comand-component-library 3.1.79 → 3.1.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.79",
+  "version": "3.1.80",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -49,6 +49,7 @@
                     <li><a href="#section-tables">Tables</a></li>
                     <li><a href="#section-tabs">Tabs</a></li>
                     <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
+                    <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
                     <li><a href="#section-upload-form">Upload-Form</a></li>
                 </ul>
             </div>
@@ -86,7 +87,6 @@
                 <fieldset class="grid-container-create-columns">
                     <legend>Legend</legend>
                     <h2>Form Element-Component</h2>
-                    <CmdToggleDarkMode :showLabel="true"/>
                     <div class="flex-container">
                         <CmdFormElement labelText="Input (type text):"
                                         element="input"
@@ -457,6 +457,10 @@
                         checkbox with boolean: {{ checkboxValue }}<br/>
                         checkboxes with values: {{ checkboxValues }}
                     </p>
+                    <h3>Toggle Dark-Mode</h3>
+                    <a id="section-toggle-darkmode"></a>
+                    <CmdToggleDarkMode :showLabel="true"/>
+                    <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true" />
                     <h2>Checkboxes and Radiobuttons</h2>
                     <h3>Checkboxes [native]</h3>
                     <div class="label inline">

package/src/components/CmdBox.vue

@@ -87,7 +87,7 @@
 
     <!-- begin boxType 'user' -->
     <div v-else-if="boxType === 'user' && user" :class="['cmd-box box user', {'stretch-vertically': stretchVertically}]">
-        <div class="box-header">
+        <div class="box-header flex-container vertical">
             <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
             <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
             <!-- begin CmdHeadline -->
@@ -340,6 +340,14 @@ export default {
                 font-size: 1rem;
                 margin-left: auto;
             }
+
+            &:hover, &:active, &:focus {
+                background: var(--pure-white);
+
+                > * {
+                    color: var(--primary-color);
+                }
+            }
         }
 
         .box-body {
@@ -428,7 +436,6 @@ export default {
                 color: var(--pure-white);
                 text-transform: uppercase;
                 text-align: center;
-                box-shadow: var(--box-shadow);
             }
         }
 
@@ -449,6 +456,10 @@ export default {
                 display: table;
                 margin: 0 auto;
             }
+
+            > img {
+                border: 0;
+            }
         }
 
         .box-body {
@@ -477,6 +488,13 @@ export default {
         > .box-header {
             padding: var(--default-padding);
 
+            .cmd-headline  {
+                > * {
+                    display: block;
+                    text-align: center;
+                }
+            }
+
             > img, > div:first-child {
                 display: table;
                 margin: 0 auto;

package/src/components/CmdCookieDisclaimer.vue

@@ -237,14 +237,20 @@ export default {
 
             // push all required cookies to array
             const requiredCookies = this.cookieOptions?.required?.cookies
-            for(let i = 0; i < requiredCookies.length ; i++) {
-                allCookies.push(requiredCookies[i].value)
+
+            if (requiredCookies) {
+                for (let i = 0; i < requiredCookies.length; i++) {
+                    allCookies.push(requiredCookies[i].value)
+                }
             }
 
             // push all optional cookies to array
             const optionalCookies = this.cookieOptions?.optional?.cookies
-            for(let i = 0; i < optionalCookies.length ; i++) {
-                allCookies.push(optionalCookies[i].value)
+
+            if (optionalCookies) {
+                for (let i = 0; i < optionalCookies.length; i++) {
+                    allCookies.push(optionalCookies[i].value)
+                }
             }
 
             this.$emit("close-cookie-disclaimer", allCookies)

package/src/components/CmdFakeSelect.vue

@@ -444,6 +444,7 @@ export default {
 
 .cmd-fake-select {
     align-self: flex-end;
+    border-radius: var(--border-radius);
 
     > span:first-child {
         a {
@@ -456,7 +457,6 @@ export default {
         margin: 0;
         display: block;
         min-width: 0;
-        background: var(--color-scheme-background-color);
         box-shadow: none;
         border-radius: var(--border-radius);
 
@@ -467,6 +467,7 @@ export default {
                 > a {
                     height: inherit;
                     border: var(--default-border);
+                    background: var(--color-scheme-background-color);
 
                     .option-name {
                         text-overflow: ellipsis;

package/src/components/CmdForm.vue

@@ -1,7 +1,7 @@
 <template>
-    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}">
+    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
         <template v-if="useFieldset">
-            <fieldset>
+            <fieldset class="flex-container">
                 <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
                 <!-- begin default-slot-content -->
                 <slot></slot>
@@ -29,6 +29,13 @@ export default {
         }
     },
     props: {
+        /**
+         * deactivate if browser-validation should be used
+         */
+        novalidate: {
+          type: Boolean,
+          default: true
+        },
         /**
          * if activated the entire form will be validated by pre-coded validation
          *

package/src/components/CmdFormElement.vue

@@ -37,6 +37,7 @@
                 :inputModelValue="modelValue"
                 :helplink="helplink"
                 :relatedId="tooltipId"
+                :labelText="labelText"
             />
             <!-- end CmdTooltipForInputElements -->
 
@@ -113,6 +114,7 @@
                     />
                     <span v-if="labelText" :class="['label-text', { hidden: !showLabel }]"><span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span></span>
             </template>
+
             <!-- begin labels for toggle-switch with switch-label -->
             <template v-else-if="onLabel && offLabel">
                 <span class="switch-label-wrapper">
@@ -830,6 +832,11 @@ export default {
             z-index: 100;
         }
 
+        input:not(:only-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
         a.button {
             & + a[class*="icon"] {
                 right: 5rem;

package/src/components/CmdHeadline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText}]">
+    <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
         <span v-if="iconClass" :class="iconClass"></span>
         <div v-if="preHeadlineText">
             <span class="pre-headline-text">{{ preHeadlineText }}</span>
@@ -62,11 +62,14 @@ export default {
 @import '../assets/styles/variables';
 
 .cmd-headline {
-    display: flex;
-    align-items: center;
     margin-bottom: var(--default-margin);
     gap: calc(var(--default-gap) / 2);
 
+    &.has-icon {
+        display: flex;
+        align-items: center;
+    }
+
     &.has-pre-headline-text {
         [class*="icon"] {
             font-size: 5rem;
@@ -79,8 +82,11 @@ export default {
 
     h1, h2, h3, h4, h5, h6 {
         margin: 0;
-        display: flex;
-        align-items: center;
+
+        &:only-child {
+            flex: none;
+            width: 100%;
+        }
     }
 
     @media only screen and ($small-max-width) {

package/src/components/CmdListOfRequirements.vue

@@ -2,7 +2,7 @@
     <div class="cmd-list-of-requirements">
         <!-- begin cmd-custom-headline -->
         <CmdHeadline :headline-level="cmdHeadline.headlineLevel">
-            <!-- {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}" -->
+            {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
         </CmdHeadline>
         <!-- end cmd-custom-headline -->
 
@@ -13,8 +13,8 @@
                 <dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
                     <span
                         aria-live="assertive"
-                        :class="requirement.valid(inputModelValue, inputAttributes) ? 'icon-check-circle' : 'icon-error-circle'"
-                        :title="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'"
+                        :class="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconClass : iconError.iconClass"
+                        :title="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.tooltip : iconError.tooltip"
                     >
                     </span>
                 </dd>
@@ -48,11 +48,19 @@
 // import components
 import CmdHeadline from "./CmdHeadline"
 
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMessageProperties"
+
 export default {
     name: "CmdListOfRequirements",
     components: {
         CmdHeadline
     },
+    mixins: [
+        I18n,
+        DefaultMessageProperties
+    ],
     props: {
         /**
         * property to check validity of given modelValue
@@ -69,7 +77,7 @@ export default {
             required: true
         },
         /**
-         * text for label
+         * text for label (used in headline)
          */
         labelText: {
             type: String,
@@ -89,6 +97,30 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * icon to show success-status
+         */
+        iconSuccess: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-check-circle",
+                    tooltip: "success"
+                }
+            }
+        },
+        /**
+         * icon to show error-status
+         */
+        iconError: {
+            type: Object,
+            default() {
+                return {
+                    iconClass: "icon-error-circle",
+                    tooltip: "error"
+                }
+            }
+        },
         /**
          * properties of CmdHeadline-component
          */
@@ -100,6 +132,14 @@ export default {
                 }
             }
         }
+    },
+    computed: {
+        headlineRequirements() {
+            if (this.inputRequirements.length > 1) {
+                return this.getMessage("cmdlistofrequirements.headline.requirements_for_input")
+            }
+            return this.getMessage("cmdlistofrequirements.headline.requirement_for_input")
+        }
     }
 }
 </script>

package/src/components/CmdMainNavigation.vue

@@ -19,7 +19,7 @@
                     </a>
                 </li>
                 <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
-                    :class="{'open' : navigationEntry.open}">
+                    :class="{'open' : navigationEntry.open, 'has-subentries': navigationEntry.subentries}">
                     <!-- begin type === href -->
                     <a
                        v-if="navigationEntry.type === 'href'"

package/src/components/CmdSlideButton.vue

@@ -105,6 +105,7 @@ export default {
         &.up, &.down {
             width: 100%;
             height: auto;
+            height: auto;
             left: 0;
             top: 0;
         }

package/src/components/CmdTabs.vue

@@ -122,6 +122,8 @@ export default {
                 display: block;
                 padding: var(--default-padding);
                 color: var(--color-scheme-text-color);
+                border-top-left-radius: var(--border-radius);
+                border-top-right-radius: var(--border-radius);
 
                 &:hover, &:active, &:focus {
                     cursor: pointer;

package/src/components/CmdToggleDarkMode.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-toggle-dark-mode', {'dark-mode': darkMode}]">
+    <div :class="['cmd-toggle-dark-mode', {'styled-layout': useStyledLayout, 'dark-mode': darkMode}]">
         <CmdFormElement
             element="input"
             type="checkbox"
@@ -7,6 +7,7 @@
             :showLabel="showLabel"
             v-model="darkMode"
             :toggle-switch="true"
+            :title="!showLabel ? labelText: ''"
         />
     </div>
 </template>
@@ -22,20 +23,46 @@ export default {
     data() {
         return {
             darkMode: false,
-            labelText: "Light mode activated"
+            labelText: ""
         }
     },
     props: {
+        /**
+         * toggle visibility of label
+         */
         showLabel: {
             type: Boolean,
             default: false
+        },
+        /**
+         * activate if styled layout should be used
+         *
+         * @affectsStyling: true
+         */
+        useStyledLayout: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * label-text to enable dark-mode
+         *
+         * @requiredForAccessibility: true
+         */
+        labelTextDarkMode: {
+            type: String,
+            default: "Dark-mode enabled"
+        },
+        /**
+         * label-text to enable light-mode
+         *
+         * @requiredForAccessibility: true
+         */
+        labelTextLightMode: {
+            type: String,
+            default: "Light-mode enabled"
         }
     },
     created() {
-        // get color-scheme (light-/dark-mode) from browser-settings
-        // this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-        // document.body.classList.add(this.darkMode ? 'dark-mode' : 'light-mode');
-
         const mql = window.matchMedia('(prefers-color-scheme: dark)')
         mql.addEventListener("change", this.onColorSchemeChange)
         this.onColorSchemeChange(mql)
@@ -50,74 +77,80 @@ export default {
         }
     },
     watch: {
-        darkMode() {
-            // toggle classes to overwrite media-query styles for color-schemes
-            const htmlTag = document.querySelector('html')
-            if(this.darkMode) {
-                htmlTag.classList.replace("light-mode", "dark-mode");
-                this.labelText = "Dark-Mode enabled"
-            } else {
-                htmlTag.classList.replace("dark-mode", "light-mode");
-                this.labelText = "Light-Mode enabled"
-            }
-            htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
+        darkMode: {
+            handler() {
+                // toggle classes to overwrite media-query styles for color-schemes
+                const htmlTag = document.querySelector('html')
+                if (this.darkMode) {
+                    htmlTag.classList.replace("light-mode", "dark-mode");
+                    this.labelText = this.labelTextDarkMode
+                } else {
+                    htmlTag.classList.replace("dark-mode", "light-mode");
+                    this.labelText = this.labelTextLightMode
+                }
+                htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', {detail: this.darkMode ? 'dark-mode' : 'light-mode'}))
+            },
+            immediate: true
         }
     }
 }
 </script>
 
 <style lang="scss">
+/* begin cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
 .cmd-toggle-dark-mode {
-    .cmd-form-element {
+    &.styled-layout {
         input {
             --dark-blue: hsl(195, 96%, 45%);
             --medium-blue: hsl(194, 97%, 39%);
             --light-blue: hsl(195, 97%, 76%);
-            background: linear-gradient(to bottom, var(--dark-blue) 0%,var(--light-blue) 67%);
+            background: linear-gradient(to bottom, var(--dark-blue) 0%, var(--light-blue) 67%);
             border-color: var(--medium-blue);
 
-            &:after {
+            &::after {
                 --yellow-hue: 60;
                 --yellow-saturation: 100%;
                 --yellow-lightness: 76.7%;
-                background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness),0) 100%);
+                background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%);
                 border-color: transparent;
                 box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness));
             }
         }
-    }
 
-    &.dark-mode {
-        input {
-            background: var(--color-scheme-background-color);
-            border-color: var(--color-scheme-text-color);
-
-            &:before {
-                --size: 1.2rem;
-                content: "";
-                width: var(--size);
-                aspect-ratio: 1/1;
+        &.dark-mode {
+            input {
                 background: var(--color-scheme-background-color);
-                border-radius: var(--full-circle);
-                position: absolute;
-                top: 0;
-                right: calc(var(--size) / 2);
-                transform: translateY(calc(50% - 35%));
-                z-index: 100;
-            }
+                border-color: var(--color-scheme-text-color);
 
-            &:after {
-                background: radial-gradient(ellipse at center,  var(--pure-white) 50%,var(--medium-gray) 100%);
-                border-color: transparent;
-                box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
+                &::before {
+                    --size: 1.2rem;
+                    content: "";
+                    width: var(--size);
+                    aspect-ratio: 1/1;
+                    background: var(--color-scheme-background-color);
+                    border-radius: var(--full-circle);
+                    position: absolute;
+                    top: 0;
+                    right: calc(var(--size) / 2);
+                    transform: translateY(calc(50% - 35%));
+                    z-index: 100;
+                    transition: var(--default-transition);
+                }
+
+                &::after {
+                    background: radial-gradient(ellipse at center, var(--pure-white) 50%, var(--medium-gray) 100%);
+                    border-color: transparent;
+                    box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
+                }
             }
-        }
 
-        .label-text {
-            span {
-                color: var(--color-scheme-text-color);
+            .label-text {
+                span {
+                    color: var(--color-scheme-text-color);
+                }
             }
         }
     }
 }
+/* end cmd-toggle-dark-mode ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdTooltipForInputElements.vue

@@ -24,6 +24,7 @@
             :inputModelValue="inputModelValue"
             :inputAttributes="inputAttributes"
             :validationTooltip="validationTooltip"
+            :labelText="labelText"
         />
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
@@ -44,6 +45,13 @@ export default {
         CmdTooltip
     },
     props: {
+        /**
+         * text for label (used in headline)
+         */
+        labelText: {
+            type: String,
+            required: false
+        },
         /**
          * related-id for CmdTooltip-component
          */

package/src/documentation/generated/CmdFormPropertyDescriptions.json

@@ -1,4 +1,9 @@
 {
+    "novalidate": {
+        "comments": [
+            "deactivate if browser-validation should be used"
+        ]
+    },
     "useValidation": {
         "comments": [
             "if activated the entire form will be validated by pre-coded validation"

package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json

@@ -11,7 +11,7 @@
     },
     "labelText": {
         "comments": [
-            "text for label"
+            "text for label (used in headline)"
         ]
     },
     "inputRequirements": {
@@ -24,6 +24,16 @@
             "set a helplink to a different page for further support"
         ]
     },
+    "iconSuccess": {
+        "comments": [
+            "icon to show success-status"
+        ]
+    },
+    "iconError": {
+        "comments": [
+            "icon to show error-status"
+        ]
+    },
     "cmdHeadline": {
         "comments": [
             "properties of CmdHeadline-component"

package/src/documentation/generated/CmdToggleDarkModePropertyDescriptions.json

@@ -0,0 +1,37 @@
+{
+    "showLabel": {
+        "comments": [
+            "toggle visibility of label"
+        ]
+    },
+    "useStyledLayout": {
+        "comments": [
+            "activate if styled layout should be used"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "labelTextDarkMode": {
+        "comments": [
+            "label-text to enable dark-mode"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
+    "labelTextLightMode": {
+        "comments": [
+            "label-text to enable light-mode"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdTooltipForInputElementsPropertyDescriptions.json

@@ -1,4 +1,9 @@
 {
+    "labelText": {
+        "comments": [
+            "text for label (used in headline)"
+        ]
+    },
     "relatedId": {
         "comments": [
             "related-id for CmdTooltip-component"

package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js

@@ -2,7 +2,7 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
-        "cmdfakeselect.headline.requirement_for_input": "Requirement for input",
+        "cmdfakeselect.headline.requirements_for_input": "Requirements for input",
         "cmdfakeselect.linktext.deselect_all_options": "Deselect all options",
         "cmdfakeselect.linktext.select_all_options": "Select all options",
         "cmdfakeselect.headline.": "An option is selected",