comand-component-library 3.1.77 → 3.1.80

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/CmdTooltip.vue

@@ -1,12 +1,14 @@
 <template>
     <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip" aria-role="tooltip">
-        <div v-if="CmdHeadline || iconClose.show" class="headline-wrapper">
+        <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
-            <CmdHeadline v-if="CmdHeadline"
-                               :iconClass="CmdHeadline.iconClass"
-                               :preHeadline="CmdHeadline.preHeadline"
-                               :headlineLevel="CmdHeadline.headlineLevel"
-                               :headlineText="CmdHeadline.headlineText"/>
+            <CmdHeadline
+                v-if="cmdHeadline"
+               :iconClass="cmdHeadline.iconClass"
+               :preHeadline="cmdHeadline.preHeadline"
+               :headlineLevel="cmdHeadline.headlineLevel"
+               :headlineText="cmdHeadline.headlineText"
+            />
             <!-- end CmdHeadline -->
 
             <!-- begin icon to close tooltip -->

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/components/CmdUploadForm.vue

@@ -3,8 +3,9 @@
     <fieldset v-if="advancedMode" :class="['cmd-upload-form flex-container', { 'upload-initiated': uploadInitiated }]">
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
         <!-- begin CmdHeadlineFieldset -->
-        <CmdHeadline v-if="CmdHeadlineFieldset"
-                           v-bind="CmdHeadlineFieldset"
+        <CmdHeadline
+            v-if="cmdHeadlineFieldset"
+            v-bind="cmdHeadlineFieldset"
         />
         <!-- end CmdHeadlineFieldset -->
 
@@ -25,10 +26,10 @@
 
         <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler">
             <template v-if="!listOfFiles.length">
-                <CmdHeadline v-if="allowMultipleFileUploads" v-bind="CmdHeadlineNoFilesToUpload" headlineLevel="4">
+                <CmdHeadline v-if="allowMultipleFileUploads" v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_files_to_upload") }}
                 </CmdHeadline>
-                <CmdHeadline v-else v-bind="CmdHeadlineNoFilesToUpload" headlineLevel="4">
+                <CmdHeadline v-else v-bind="cmdHeadlineNoFilesToUpload" headlineLevel="4">
                     {{ getMessage("cmduploadform.no_file_to_upload") }}
                 </CmdHeadline>
             </template>
@@ -36,7 +37,7 @@
             <!-- begin total-upload information -->
             <div v-else class="flex-container vertical">
                 <div v-if="showTotalUpload && listOfFiles.length !== 1" class="flex-container vertical list-files-wrapper">
-                    <CmdHeadline v-bind="CmdHeadlineSummaryOfAllFiles" headlineLevel="4">
+                    <CmdHeadline v-bind="cmdHeadlineSummaryOfAllFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.summary_of_all_files") }}
                     </CmdHeadline>
                     <ul v-if="showTotalUpload && listOfFiles.length !== 1" class="list-of-files total-files">
@@ -80,7 +81,7 @@
 
                 <div class="flex-container vertical list-files-wrapper">
                     <!-- begin list of selected files -->
-                    <CmdHeadline v-bind="CmdHeadlineListOfSelectedFiles" headlineLevel="4">
+                    <CmdHeadline v-bind="cmdHeadlineListOfSelectedFiles" headlineLevel="4">
                         {{ getMessage("cmduploadform.headline.list_of_selected_files") }}
                     </CmdHeadline>
                     <ul class="list-of-files">
@@ -131,10 +132,10 @@
             <!-- end list of selected files -->
 
             <!-- begin upload conditions -->
-            <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="CmdHeadlineSelectAdditionalFiles" headlineLevel="4">
+            <CmdHeadline v-if="allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectAdditionalFiles" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_additional_files") }}
             </CmdHeadline>
-            <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="CmdHeadlineSelectNewFile" headlineLevel="4">
+            <CmdHeadline v-if="!allowMultipleFileUploads && listOfFiles.length" v-bind="cmdHeadlineSelectNewFile" headlineLevel="4">
                 {{ getMessage("cmduploadform.headline.select_new_file") }}
             </CmdHeadline>
             <dl class="small">
@@ -508,14 +509,14 @@ export default {
         /**
          * properties for CmdHeadline-component at of the fieldset
          */
-        CmdHeadlineFieldset: {
+        cmdHeadlineFieldset: {
             type: Object,
             required: false
         },
         /**
          * properties for CmdHeadline-component shown if no files for upload exist
          */
-        CmdHeadlineNoFilesToUpload: {
+        cmdHeadlineNoFilesToUpload: {
             type: Object,
             required: false
         },
@@ -529,28 +530,28 @@ export default {
         /**
          * properties for CmdHeadline-component for 'summary of all files'
          */
-        CmdHeadlineSummaryOfAllFiles: {
+        cmdHeadlineSummaryOfAllFiles: {
             type: Object,
             required: false
         },
         /**
          * properties for CmdHeadline-component for 'list of selected files'
          */
-        CmdHeadlineListOfSelectedFiles: {
+        cmdHeadlineListOfSelectedFiles: {
             type: Object,
             required: false
         },
         /**
          * properties for CmdHeadline-component for 'select additional files'
          */
-        CmdHeadlineSelectAdditionalFiles: {
+        cmdHeadlineSelectAdditionalFiles: {
             type: Object,
             required: false
         },
         /**
          * properties for CmdHeadline-component for 'select new file'
          */
-        CmdHeadlineSelectNewFile: {
+        cmdHeadlineSelectNewFile: {
             type: Object,
             required: false
         },

package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json

@@ -4,7 +4,7 @@
             "set default v-model (must be named modelValue in Vue3)"
         ]
     },
-    "CmdHeadlineCookieDisclaimer": {
+    "cmdHeadlineCookieDisclaimer": {
         "comments": [
             "properties for CmdHeadline-component at top of cookie disclaimer"
         ]

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/CmdLoginFormPropertyDescriptions.json

@@ -29,12 +29,12 @@
             ]
         }
     },
-    "CmdHeadlineLoginForm": {
+    "cmdHeadlineLoginForm": {
         "comments": [
             "properties for CmdHeadline-component for login-form"
         ]
     },
-    "CmdHeadlineSendLoginForm": {
+    "cmdHeadlineSendLoginForm": {
         "comments": [
             "properties for CmdHeadline-component for send-login-form"
         ]

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/documentation/generated/CmdUploadFormPropertyDescriptions.json

@@ -122,12 +122,12 @@
             "set icon class for cancel-icon"
         ]
     },
-    "CmdHeadlineFieldset": {
+    "cmdHeadlineFieldset": {
         "comments": [
             "properties for CmdHeadline-component at of the fieldset"
         ]
     },
-    "CmdHeadlineNoFilesToUpload": {
+    "cmdHeadlineNoFilesToUpload": {
         "comments": [
             "properties for CmdHeadline-component shown if no files for upload exist"
         ]
@@ -137,22 +137,22 @@
             "properties for CmdHeadline-component shown if no file for upload exist"
         ]
     },
-    "CmdHeadlineSummaryOfAllFiles": {
+    "cmdHeadlineSummaryOfAllFiles": {
         "comments": [
             "properties for CmdHeadline-component for 'summary of all files'"
         ]
     },
-    "CmdHeadlineListOfSelectedFiles": {
+    "cmdHeadlineListOfSelectedFiles": {
         "comments": [
             "properties for CmdHeadline-component for 'list of selected files'"
         ]
     },
-    "CmdHeadlineSelectAdditionalFiles": {
+    "cmdHeadlineSelectAdditionalFiles": {
         "comments": [
             "properties for CmdHeadline-component for 'select additional files'"
         ]
     },
-    "CmdHeadlineSelectNewFile": {
+    "cmdHeadlineSelectNewFile": {
         "comments": [
             "properties for CmdHeadline-component for 'select new file'"
         ]

package/src/index.js

@@ -11,13 +11,13 @@ export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs'
 export { default as CmdCompanyLogo } from '@/components/CmdCompanyLogo'
 export { default as CmdCookieDisclaimer } from '@/components/CmdCookieDisclaimer'
 export { default as CmdCopyrightInformation } from '@/components/CmdCopyrightInformation'
-export { default as CmdHeadline } from '@/components/CmdHeadline'
 export { default as CmdFakeSelect } from '@/components/CmdFakeSelect'
 export { openFancyBox, default as CmdFancyBox } from '@/components/CmdFancyBox'
 export { default as CmdForm } from '@/components/CmdForm'
 export { default as CmdFormElement } from '@/components/CmdFormElement'
 export { default as CmdFormFilters } from '@/components/CmdFormFilters'
 export { default as CmdGoogleMaps } from '@/components/CmdGoogleMaps'
+export { default as CmdHeadline } from '@/components/CmdHeadline'
 export { default as CmdImageGallery } from '@/components/CmdImageGallery'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom'
 export { default as CmdInputGroup } from '@/components/CmdInputGroup'
@@ -38,6 +38,7 @@ export { default as CmdSystemMessage } from '@/components/CmdSystemMessage'
 export { default as CmdTable } from '@/components/CmdTable'
 export { default as CmdTabs } from '@/components/CmdTabs'
 export { default as CmdThumbnailScroller } from '@/components/CmdThumbnailScroller'
+export { default as CmdToggleDarkMode } from '@/components/CmdToggleDarkMode'
 export { default as CmdTooltip } from '@/components/CmdTooltip'
 export { default as CmdUploadForm } from '@/components/CmdUploadForm'
 export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper'

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",

package/src/mixins/CmdListOfRequirements/DefaultMessageProperties.js

@@ -0,0 +1,10 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdlistofrequirements.headline.requirement_for_input": "Requirement for input",
+        "cmdlistofrequirements.headline.requirements_for_input": "Requirements for input",
+      }
+    }
+  }
+}