comand-component-library 3.1.68 → 3.1.69

package/src/components/CmdFakeSelect.vue

@@ -29,7 +29,7 @@
                :role="validationStatus === 'error' ? 'alert' : 'dialog'">
             </a>
         </span>
-        <ul :class="{'open': showOptions}" @clickout="closeOptions">
+        <ul :class="{'open': showOptions}" @clickout="closeOptions" :aria-expanded="showOptions">
             <li>
                 <!-- begin default/selected-option -->
                 <a href="#" @click.prevent="toggleOptions" @blur="onBlur">
@@ -42,8 +42,8 @@
                 <!-- end default/selected-option-->
 
                 <!-- begin default dropdown (incl. optional icon) -->
-                <ul v-if="type === 'default' && showOptions" :aria-expanded="showOptions">
-                    <li v-for="(option, index) in selectData" :key="index" role="option">
+                <ul v-if="type === 'default' && showOptions" role="listbox">
+                    <li v-for="(option, index) in selectData" :key="index" role="option" :aria-selected="option.value === modelValue">
                         <!-- begin type 'href' -->
                         <a v-if="optionLinkType === 'href'" href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === modelValue}">
                             <span v-if="option.iconClass" :class="option.iconClass"></span>
@@ -475,7 +475,7 @@ export default {
         margin: 0;
         display: block;
         min-width: 0;
-        background: var(--pure-white);
+        background: var(--color-scheme-background-color);
         box-shadow: none;
         border-radius: var(--border-radius);
 
@@ -524,7 +524,7 @@ export default {
             padding-top: .8rem;
             outline: none;
             border-bottom: var(--default-border);
-            color: var(--text-color);
+            color: var(--color-scheme-text-color);
             text-decoration: none;
 
             &:hover, &:active, &:focus {

package/src/components/CmdFormElement.vue

@@ -3,16 +3,17 @@
            :class="[
             'cmd-form-element',
              validationStatus,
-           {
-            disabled: $attrs.disabled,
-            inline : displayLabelInline,
-            checked: isChecked,
-            'toggle-switch-label': toggleSwitch,
-            colored: colored,
-            on: colored && isChecked,
-            off: colored && !isChecked,
-            'has-state': 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="labelId"
            ref="label">
 
@@ -49,9 +50,9 @@
         <!-- begin inputfield -->
         <template
             v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
-            <input v-bind="$attrs"
+            <input v-bind="elementAttributes"
                    :id="labelId"
-                   :class="htmlClass"
+                   :class="inputClass"
                    @focus="tooltip = true"
                    @blur="onBlur"
                    @input="onInput"
@@ -88,37 +89,47 @@
 
         <!-- begin checkbox and radiobutton -->
         <template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
-            <input v-bind="$attrs"
-                   @change="onChange"
-                   @blur="onBlur"
-                   :checked="isChecked"
-                   :value="inputValue"
-                   :class="[htmlClass, validationStatus, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
-                   :id="labelId"
-                   :aria-invalid="validationStatus === 'error'"
-            />
-            <span v-if="!(onLabel && offLabel)" :class="{ hidden: !showLabel }">
+            <template v-if="!(onLabel && offLabel)">
+                <input v-bind="elementAttributes"
+                       @change="onChange"
+                       @blur="onBlur"
+                       :checked="isChecked"
+                       :value="inputValue"
+                       :class="[inputClass, validationStatus, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
+                       :id="labelId"
+                       :aria-invalid="validationStatus === 'error'"
+                />
+                <span :class="{ hidden: !showLabel }">
                 <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
             </span>
-
-            <!-- begin labels for toggle-switch -->
+            </template>
+            <!-- begin labels for toggle-switch with switch-label -->
             <template v-else-if="onLabel && offLabel">
-                <span v-if="labelText">
-                    <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
-                </span>
-                <span class="toggle-switch switch-label">
+                <span class="switch-label-wrapper">
+                    <input v-bind="elementAttributes"
+                           @change="onChange"
+                           @blur="onBlur"
+                           :checked="isChecked"
+                           :value="inputValue"
+                           :class="{inputClass, validationStatus}"
+                           :id="labelId"
+                           :aria-invalid="validationStatus === 'error'"
+                    />
                     <span class="label">{{ onLabel }}</span>
                     <span class="label">{{ offLabel }}</span>
                 </span>
+                <span v-if="labelText">
+                    <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+                </span>
             </template>
             <slot v-else></slot>
-            <!-- end labels for toggle-switch -->
+            <!-- end labels for toggle-switch with switch-label -->
         </template>
         <!-- end checkbox and radiobutton -->
 
         <!-- begin selectbox -->
         <select v-if="element === 'select'"
-                v-bind="$attrs"
+                v-bind="elementAttributes"
                 :id="labelId"
                 @blur="onBlur"
                 @change="$emit('update:modelValue', $event.target.value)">
@@ -130,7 +141,7 @@
 
         <!-- begin textarea -->
         <textarea v-if="element === 'textarea'"
-                  v-bind="$attrs"
+                  v-bind="elementAttributes"
                   :id="labelId"
                   :value="modelValue"
                   :maxlength="getMaxLength()"
@@ -144,18 +155,18 @@
         <!-- begin searchfield -->
         <template v-else-if="element === 'input' && $attrs.type === 'search'">
             <div class="search-field-wrapper flex-container no-gap">
-                <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"/>
                 <input
-                    v-bind="$attrs"
+                    v-bind="elementAttributes"
                     :id="labelId"
                     @input="onInput"
                     :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
                     :value="modelValue"
                 />
+                <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
+                    <span :class="iconSearch.iconClass"></span>
+                </a>
+                <a v-if="iconDelete.show" href="#" @click.prevent="$emit('update:modelValue', '')" :class="iconDelete.iconClass" :title="iconDelete.tooltip"></a>
             </div>
-            <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
-                <span :class="iconSearch.iconClass"></span>
-            </a>
         </template>
     </label>
     <!-- end searchfield -->
@@ -349,7 +360,7 @@ export default {
          *
          * may not be named as 'class' because it is a reserved keyword in JavaScript
          */
-        htmlClass: {
+        inputClass: {
             type: String,
             required: false
         },
@@ -582,6 +593,19 @@ export default {
         },
     },
     computed: {
+        elementAttributes() {
+            const commonAttributes = ["name", "required", "readonly", "disabled", "autofocus"]
+            const attributes = {
+                input: [...commonAttributes, "type", "minlength", "pattern", "min", "max", "multiple", "step", "autocomplete", "placeholder"],
+                select: [...commonAttributes, "multiple"],
+                textarea: [...commonAttributes, "placeholder"]
+            }
+            const attrs = {}
+            if(attributes[this.element]) {
+                Object.entries(this.$attrs).filter(([name]) => attributes[this.element].includes(name)).forEach(([name, value]) => attrs[name] = value)
+            }
+            return attrs
+        },
         buttonAttrs() {
             // copy all native attributes
             const allAttrs = {...this.$attrs}
@@ -633,14 +657,14 @@ export default {
             return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
         },
         autocomplete() {
-            if(this.$attrs.type !== 'file') {
+            if (this.$attrs.type !== 'file') {
                 return this.datalist ? 'off' : 'on'
             }
             return null
         },
         // get ID for accessibility
         labelId() {
-            if(this.$attrs.id !== undefined) {
+            if (this.$attrs.id !== undefined) {
                 return this.$attrs.id
             }
             return "label-" + createUuid()
@@ -656,7 +680,7 @@ export default {
             }
 
             if (this.$attrs.type !== 'file') {
-              return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
+                return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
             }
 
             return null
@@ -800,15 +824,17 @@ export default {
     .search-field-wrapper {
         margin: 0;
 
-        a {
+        a[class*="icon"] {
             position: absolute;
             top: 50%;
             right: 1rem;
             transform: translateY(-50%);
             z-index: 100;
+        }
 
-            & + input {
-                padding-right: calc(var(--default-padding) * 3);
+        a.button {
+            & + a[class*="icon"] {
+                right: 5rem;
             }
         }
     }
@@ -816,7 +842,6 @@ export default {
     .place-inside {
         + .search-field-wrapper {
 
-
             input {
                 padding-left: calc(var(--default-padding) * 3);
             }
@@ -824,29 +849,11 @@ export default {
     }
 
     /* begin toggle-switch */
-    /* no cmd-prefix-styling (class based on frontend-framework */
+    /* no cmd-prefix-styling (class based on frontend-framework) */
     &.toggle-switch {
-        &.switch-label {
-            input {
-                & + .label {
-                    padding-right: calc(var(--default-padding) / 3 * 2);
-
-                    &::before {
-                        top: 0.2rem;
-                    }
-
-                    & + .label {
-                        padding-left: calc(var(--default-padding) / 3 * 2);
-
-                        &::before {
-                            top: 0.2rem;
-                        }
-                    }
-                }
-            }
-
-            &.colored {
-                &.off {
+        &.colored {
+            &.off {
+                .switch-label-wrapper {
                     border-color: var(--error-color);
 
                     span {
@@ -860,8 +867,10 @@ export default {
                         }
                     }
                 }
+            }
 
-                &.on {
+            &.on {
+                .switch-label-wrapper {
                     border-color: var(--success-color);
 
                     span {

package/src/components/CmdInputGroup.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="cmd-input-group">
-        <span :class="['label', { hidden: !showLabel, inline: labelInline }]">{{ labelText }}</span>
+    <div :class="['cmd-input-group', {inline: labelInline}]">
+        <span :class="['label', { hidden: !showLabel}]">{{ labelText }}</span>
         <div class="flex-container no-flex">
             <slot></slot>
         </div>
@@ -35,4 +35,13 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style lang="scss">
+.cmd-input-group {
+    &.inline {
+        display: flex;
+        gap: var(--default-gap);
+    }
+}
+</style>

package/src/components/CmdLoginForm.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin login-form -->
-    <fieldset v-if="!sendLogin" class="flex-container">
+    <fieldset v-if="!sendLogin" class="cmd-login-form flex-container">
         <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
         <!-- begin CmdCustomHeadline -->
         <CmdCustomHeadline v-if="cmdCustomHeadlineLoginForm"
@@ -119,7 +119,7 @@
     <!-- end login-form -->
 
     <!-- begin send-login-form -->
-    <fieldset v-else class="flex-container">
+    <fieldset v-else class="cmd-login-form flex-container">
         <legend :class="{'hidden' : !legendSendLoginForm.show}">{{ legendSendLoginForm.text }}</legend>
         <!-- begin CmdCustomHeadline -->
         <CmdCustomHeadline v-if="cmdCustomHeadlineSendLoginForm"
@@ -439,6 +439,7 @@ export default {
 </script>
 
 <style lang="scss">
+.cmd-login-form {
     .option-wrapper {
         align-items: center;
 
@@ -458,4 +459,5 @@ export default {
             margin-left: auto;
         }
     }
+}
 </style>

package/src/components/CmdMultipleSwitch.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="['label', 'multiple-switch', {disabled: status === 'disabled', error: status === 'error'}]">
-        <span :class="{hidden: !showLabel}">{{ labelText }}</span>
+    <div :class="['cmd-multiple-switch multiple-switch label', {disabled: status === 'disabled', error: status === 'error'}]" :aria-labelledby="labelId">
+        <span :class="{hidden: !showLabel}" :id="labelId">{{ labelText }}</span>
         <span class="flex-container no-gap no-flex">
             <label :class="{disabled: status === 'disabled'}" :for="multipleswitch.id"
                    v-for="(multipleswitch, index) in multipleSwitches" :key="index">
@@ -20,6 +20,9 @@
 </template>
 
 <script>
+// import utils
+import {createUuid} from "../utils/common.js"
+
 export default {
     name: "CmdMultipleSwitch",
     props: {
@@ -80,6 +83,15 @@ export default {
             required: false
         }
     },
+    computed: {
+        // get ID for accessibility
+        labelId() {
+            if(this.$attrs.id !== undefined) {
+                return this.$attrs.id
+            }
+            return "label-" + createUuid()
+        }
+    },
     methods: {
         onChange(e) {
             if (typeof this.value === "string") {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -183,7 +183,7 @@ export default {
                 background: var(--primary-color);
 
                 span, span[class*='icon'] {
-                    color: var(--pure-white);
+                    color: var(--color-scheme-text-color);
                 }
             }
 
@@ -199,10 +199,10 @@ export default {
 
                 a {
                     background: none;
-                    color: var(--text-color);
+                    color: var(--color-scheme-text-color);
 
                     span, span[class*='color'] {
-                        color: var(--text-color);
+                        color: inherit;
 
                         & + span[class*="icon"] {
                             &:last-child {

package/src/components/CmdSiteHeader.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="['cmd-site-header', { sticky: sticky }]" role="banner">
         <!-- begin slot for elements above header -->
-        <slot name="top-header"></slot>
+        <div class="top-header">
+            <slot name="top-header"></slot>
+        </div>
         <!-- end for elements above header -->
 
         <!-- begin header-wrapper with slots for logo and other header elements -->
@@ -73,20 +75,27 @@ export default {
     display: flex;
     flex-direction: column;
     border-bottom: var(--default-border);
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
 
     &.sticky {
         position: sticky;
         z-index: 300;
     }
 
-    header, .cmd-main-navigation nav, .cmd-list-of-links > ul {
+    header, .cmd-main-navigation nav, .cmd-list-of-links {
         max-width: var(--max-width);
         width: 100%; /* stretch flex-item */
         margin: 0 auto;
         padding: 0 var(--default-padding);
     }
 
+    .top-header {
+        .cmd-list-of-links {
+            padding-top: calc(var(--default-padding) / 2);
+            padding-bottom: calc(var(--default-padding) / 2);
+        }
+    }
+
     > .cmd-main-navigation:last-child {
         border-bottom: 0;
     }

package/src/components/CmdTabs.vue

@@ -109,7 +109,7 @@ export default {
             border-top-left-radius: var(--border-radius);
             border-top-right-radius: var(--border-radius);
             list-style-type: none;
-            background: var(--pure-white);
+            background: var(--color-scheme-background-color);
             border: var(--default-border);
 
             &.active {
@@ -125,7 +125,7 @@ export default {
             a {
                 display: block;
                 padding: var(--default-padding);
-                color: var(--text-color);
+                color: var(--color-scheme-text-color);
 
                 &:hover, &:active, &:focus {
                     cursor: pointer;
@@ -154,7 +154,7 @@ export default {
         padding: var(--default-padding);
         border: var(--primary-border);
         border-radius: var(--border-radius);
-        background: var(--pure-white);
+        background: var(--color-scheme-background-color);
         border-top-left-radius: 0;
 
         > div {

package/src/components/CmdThumbnailScroller.vue

@@ -148,7 +148,7 @@ export default {
     display: table;
     margin: 0 auto calc(var(--default-margin) * 2) auto;
     border: var(--default-border);
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
 
     > ul {
         overflow: hidden;

package/src/components/CmdToggleDarkMode.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :class="['cmd-toggle-dark-mode', {'dark-mode': darkMode}]">
+        <CmdFormElement
+            element="input"
+            type="checkbox"
+            :labelText="labelText"
+            :showLabel="showLabel"
+            v-model="darkMode"
+        />
+    </div>
+</template>
+
+<script>
+import CmdFormElement from "./CmdFormElement"
+
+export default {
+    data() {
+      return {
+          darkMode: false
+      }
+    },
+    components: {
+        CmdFormElement
+    },
+    props: {
+        labelText: {
+            type: String,
+            default: "Toggle Darkmode"
+        },
+        showLabel: {
+            type: Boolean,
+            default: false
+        }
+    },
+    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)
+    },
+    beforeUnmount() {
+        window.matchMedia('(prefers-color-scheme: dark)').removeEventListener("change", this.onColorSchemeChange)
+    },
+    methods: {
+        onColorSchemeChange(event) {
+            this.darkMode = event.matches
+            document.querySelector('html').classList.add(this.darkMode ? 'dark-mode' : 'light-mode')
+        }
+    },
+    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");
+            } else {
+                htmlTag.classList.replace("dark-mode", "light-mode");
+            }
+            htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
+        }
+    }
+}
+</script>

package/src/components/CmdUploadForm.vue

@@ -980,14 +980,13 @@ export default {
 <style lang="scss">
 /* begin cmd-upload-form -------------------------------------------------------------------------------------------- */
 .cmd-upload-form {
-
     .cmd-custom-headline {
         margin: 0;
         justify-content: center;
     }
 
     .box {
-        background: var(--pure-white-reduced-opacity);
+        background: var(--color-scheme-background-color);
 
         dl {
             justify-content: center;
@@ -1031,7 +1030,7 @@ export default {
 
                 progress {
                     &[value] {
-                        background: var(--pure-white);
+                        background: var(--color-scheme-background-color);
 
                         &::-moz-progress-bar {
                             border-top-left-radius: var(--border-radius);
@@ -1051,7 +1050,7 @@ export default {
                     top: 0.2rem;
                     padding: 0.1rem 0.2rem;
                     line-height: 100%;
-                    background: var(--pure-white);
+                    background: var(--color-scheme-background-color);
                 }
             }
         }
@@ -1119,7 +1118,7 @@ export default {
 .drop-area {
     border: var(--default-border);
     border-style: dashed;
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
     padding: (var(--default-padding));
     text-align: center;
 

package/src/index.js

@@ -32,7 +32,6 @@ export { default as CmdShareButtons } from '@/components/CmdShareButtons'
 export { default as CmdSiteHeader } from '@/components/CmdSiteHeader'
 export { default as CmdSlideButton } from '@/components/CmdSlideButton'
 export { default as CmdSlideshow } from '@/components/CmdSlideshow'
-export { default as CmdSwitchButton } from '@/components/CmdSwitchButton'
 export { default as CmdSwitchLanguage } from '@/components/CmdSwitchLanguage'
 export { default as CmdSystemMessage } from '@/components/CmdSystemMessage'
 export { default as CmdTable } from '@/components/CmdTable'