comand-component-library 3.1.68 → 3.1.71

package/src/components/CmdCookieDisclaimer.vue

@@ -21,16 +21,15 @@
                             :key="index"
                     >
                         <template v-slot:header>
-                            <!-- begin CmdSwitchButton -->
-                            <CmdSwitchButton
+                            <!-- begin CmdFormElement -->
+                            <CmdFormElement
+                                element="input"
                                 type="checkbox"
-                                :id="cookie.id"
-                                :labelText="cookie.labelText"
-                                v-model="cookie.checked"
-                                :status="cookie.status"
-                                disabled="disabled"
+                                labelText="Google Analytics"
+                                id="google-analytics"
+                                :toggleSwitch="true"
                             />
-                            <!-- end CmdSwitchButton -->
+                            <!-- end CmdFormElement -->
                         </template>
                         <template v-slot:body>
                             <p v-if="cookie.description">{{ cookie.description }}</p>
@@ -57,15 +56,15 @@
                             :key="index"
                     >
                         <template v-slot:header>
-                            <!-- begin CmdSwitchButton -->
-                            <CmdSwitchButton
+                            <!-- begin CmdFormElement -->
+                            <CmdFormElement
+                                element="input"
                                 type="checkbox"
-                                :id="cookie.id"
-                                :labelText="cookie.labelText"
-                                v-model="cookie.checked"
-                                :status="cookie.status"
+                                labelText="Google Analytics"
+                                id="google-analytics"
+                                :toggleSwitch="true"
                             />
-                            <!-- end CmdSwitchButton -->
+                            <!-- end CmdFormElement -->
                         </template>
                         <template v-slot:body>
                             <p v-if="cookie.description">{{ cookie.description }}</p>
@@ -107,14 +106,14 @@
 // import components
 import CmdBox from "./CmdBox"
 import CmdCustomHeadline from "./CmdCustomHeadline"
-import CmdSwitchButton from "./CmdSwitchButton"
+import CmdFormElement from "./CmdFormElement"
 
 export default {
     name: "CmdCookieDisclaimer",
     components: {
         CmdBox,
         CmdCustomHeadline,
-        CmdSwitchButton
+        CmdFormElement
     },
     data() {
         return {

package/src/components/CmdCustomHeadline.vue

@@ -74,7 +74,7 @@ export default {
         margin-bottom: 0;
     }
 
-    h1, h2, h3, h4, h5 ,h6 {
+    h1, h2, h3, h4, h5, h6 {
         margin: 0;
         display: flex;
         align-items: center;

package/src/components/CmdFakeSelect.vue

@@ -12,24 +12,24 @@
         :aria-required="$attrs.required !== undefined"
         ref="fakeselect"
     >
-        <span v-if="showLabel">
+        <template v-if="showLabel">
             <!-- begin label -->
-            <span :id="labelId">
-                {{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup>
+            <span class="label-text" :id="labelId">
+                <span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
+                <a v-if="$attrs.required || inputRequirements.length"
+                   href="#"
+                   @click.prevent
+                   :class="getStatusIconClass"
+                   :title="!useCustomTooltip ? getValidationMessage : ''"
+                   :aria-errormessage="getValidationMessage"
+                   aria-live="assertive"
+                   :id="tooltipId"
+                   :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+                </a>
             </span>
             <!-- end label -->
-            <a v-if="$attrs.required || inputRequirements.length"
-               href="#"
-               @click.prevent
-               :class="getStatusIconClass"
-               :title="!useCustomTooltip ? getValidationMessage : ''"
-               :aria-errormessage="getValidationMessage"
-               aria-live="assertive"
-               :id="tooltipId"
-               :role="validationStatus === 'error' ? 'alert' : 'dialog'">
-            </a>
-        </span>
-        <ul :class="{'open': showOptions}" @clickout="closeOptions">
+        </template>
+        <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>
@@ -460,10 +460,6 @@ export default {
 .cmd-fake-select {
     align-self: flex-end;
 
-    & + .cmd-tooltip {
-        border-color: var(--status-color);
-    }
-
     > span:first-child {
         a {
             align-self: flex-end;
@@ -475,7 +471,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 +520,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 {
@@ -604,21 +600,21 @@ export default {
         }
     }
 
-    &.error {
+    &.has-state {
         > ul {
             > li {
                 > a {
-                    border-color: var(--error-color);
+                    border-color: var(--status-color);
 
                     > span, span[class*="icon-"] {
-                        color: var(--error-color);
+                        color: var(--status-color);
                     }
 
                     &:hover, &:active, &:focus {
                         background: var(--pure-white);
 
                         span {
-                            color: var(--error-color);
+                            color: var(--status-color);
                         }
                     }
                 }
@@ -668,7 +664,7 @@ export default {
 
                 > span:first-child {
                     width: 1.5rem;
-                    aspect-ratio: 1;
+                    aspect-ratio: 1/1;
                     border: var(--default-border);
 
                     &[style=""] {

package/src/components/CmdFormElement.vue

@@ -3,65 +3,57 @@
            :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">
 
         <!-- begin label-text (+ required asterisk) -->
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
-              :class="!showLabel ? 'hidden' : undefined">
-              <span>
-                  {{ labelText }}<sup v-if="$attrs.required">*</sup>
-              </span>
-              <a v-if="$attrs.required || inputRequirements.length"
-                 href="#"
-                 @click.prevent
-                 :class="getStatusIconClass"
-                 :title="validationTooltip"
-                 :aria-errormessage="getValidationMessage"
-                 aria-live="assertive"
-                 :id="tooltipId"
-                 :role="validationStatus === 'error' ? 'alert' : 'dialog'">
-              </a>
-            </span>
+              :class="['label-text', !showLabel ? 'hidden' : undefined]">
+            <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+            <a v-if="$attrs.required || inputRequirements.length"
+                href="#"
+                @click.prevent
+                :class="getStatusIconClass"
+                :title="validationTooltip"
+                :aria-errormessage="getValidationMessage"
+                aria-live="assertive"
+                :id="tooltipId"
+                :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+            </a>
+        </span>
         <!-- end label-text (+ required asterisk) -->
 
-        <!-- begin icon -->
-        <span
-            v-if="
-        $attrs.type !== 'checkbox' &&
-          $attrs.type !== 'radio' &&
-          fieldIconClass
-      "
-            :class="['place-inside', fieldIconClass]"
-        ></span>
-        <!-- end icon -->
+        <!-- begin icon inside field -->
+        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && fieldIconClass" :class="['place-inside', fieldIconClass]"></span>
+        <!-- end icon inside field -->
 
         <!-- begin inputfield -->
-        <template
-            v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
-            <input v-bind="$attrs"
-                   :id="labelId"
-                   :class="htmlClass"
-                   @focus="tooltip = true"
-                   @blur="onBlur"
-                   @input="onInput"
-                   @mouseover="datalistFocus"
-                   @keyup="checkForCapsLock"
-                   :autocomplete="autocomplete"
-                   :list="datalist ? datalist.id : null"
-                   :value="modelValue"
-                   :maxlength="getMaxLength()"
-                   ref="input"
+        <template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
+            <input
+                v-bind="elementAttributes"
+                :id="labelId"
+                :class="inputClass"
+                @focus="tooltip = true"
+                @blur="onBlur"
+                @input="onInput"
+                @mouseover="datalistFocus"
+                @keyup="checkForCapsLock"
+                :autocomplete="autocomplete"
+                :list="datalist ? datalist.id : null"
+                :value="modelValue"
+                :maxlength="getMaxLength()"
+                ref="input"
             />
         </template>
         <!-- end inputfield -->
@@ -88,37 +80,46 @@
 
         <!-- 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 }">
-                <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
-            </span>
-
-            <!-- begin labels for toggle-switch -->
+            <template v-if="!(onLabel && offLabel)">
+                    <input
+                        v-bind="elementAttributes"
+                        @change="onChange"
+                        @blur="onBlur"
+                        :checked="isChecked"
+                        :value="inputValue"
+                        :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
+                        :id="labelId"
+                        :aria-invalid="validationStatus === 'error'"
+                    />
+                    <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 v-if="labelText">
-                    <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+                <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-text">{{ onLabel }}</span>
+                    <span class="label-text">{{ offLabel }}</span>
                 </span>
-                <span class="toggle-switch switch-label">
-                    <span class="label">{{ onLabel }}</span>
-                    <span class="label">{{ offLabel }}</span>
+                <span v-if="labelText" class="label-text">
+                    <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 +131,7 @@
 
         <!-- begin textarea -->
         <textarea v-if="element === 'textarea'"
-                  v-bind="$attrs"
+                  v-bind="elementAttributes"
                   :id="labelId"
                   :value="modelValue"
                   :maxlength="getMaxLength()"
@@ -143,19 +144,19 @@
 
         <!-- 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"/>
+            <span class="search-field-wrapper flex-container no-gap">
                 <input
-                    v-bind="$attrs"
+                    v-bind="elementAttributes"
                     :id="labelId"
                     @input="onInput"
-                    :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                    :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-            </div>
-            <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
-                <span :class="iconSearch.iconClass"></span>
-            </a>
+                <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>
+            </span>
         </template>
     </label>
     <!-- end searchfield -->
@@ -217,7 +218,7 @@ import {createUuid} from "../utils/common.js"
 
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
@@ -332,7 +333,7 @@ export default {
          * allow checkbox/radio-buttons to get value from outside
          */
         inputValue: {
-            type: String,
+            type: [String, Number],
             required: false
         },
         /**
@@ -349,7 +350,7 @@ export default {
          *
          * may not be named as 'class' because it is a reserved keyword in JavaScript
          */
-        htmlClass: {
+        inputClass: {
             type: String,
             required: false
         },
@@ -547,6 +548,33 @@ export default {
                 }
             }
         },
+        /**
+         * toggle if toggle-switch shows icons for checked/unchecked-status
+         */
+        useIconsForToggleSwitch: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * icon for toggle-switch checked
+         *
+         * toggle-switch-property must be activated
+         * use-icons-for-toggle-switch-property must be activated
+         */
+        toggleSwitchCheckedIconClass: {
+            type: String,
+            default: "icon-check-circle"
+        },
+        /**
+         * icon for toggle-switch unchecked
+         *
+         * toggle-switch-property must be activated
+         * use-icons-for-toggle-switch-property must be activated
+         */
+        toggleSwitchUncheckedIconClass: {
+            type: String,
+            default: "icon-cancel-circle"
+        },
         /**
          * icon to toggle password-visibility
          *
@@ -582,6 +610,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,32 +674,42 @@ 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()
+        },
+        // toggle icons for toggle-switch
+        toggleSwitchIconClass() {
+            if(this.toggleSwitch && this.useIconsForToggleSwitch && this.toggleSwitchUncheckedIconClass && this.toggleSwitchCheckedIconClass) {
+                if(this.isChecked) {
+                    return this.toggleSwitchCheckedIconClass
+                }
+                return this.toggleSwitchUncheckedIconClass
+            }
+            return null
         }
     },
     methods: {
         getDomElement() {
             return this.$refs.label
         },
+        // define max-length for different input-types
         getMaxLength() {
             if (this.$attrs.element === 'textarea') {
                 return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
             }
 
-            if (this.$attrs.type !== 'file') {
-              return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
+            if (this.$attrs.type !== 'file' && this.$attrs.type !== 'number' && this.$attrs.type !== 'date') {
+                return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 255
             }
-
             return null
         },
         onBlur(event) {
@@ -749,6 +800,7 @@ export default {
 </script>
 
 <style lang="scss">
+/* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .cmd-form-element {
     input + .place-inside[class*="icon"] {
         left: auto;
@@ -756,22 +808,6 @@ export default {
     }
 
     &.has-state, & + .cmd-tooltip {
-        &.error {
-            --status-color: var(--error-color);
-        }
-
-        &.warning {
-            --status-color: var(--warning-color);
-        }
-
-        &.success {
-            --status-color: var(--success-color);
-        }
-
-        &.info {
-            --status-color: var(--info-color);
-        }
-
         ::placeholder {
             color: var(--status-color);
         }
@@ -785,13 +821,9 @@ export default {
         }
     }
 
-    & + .cmd-tooltip {
-        border-color: var(--status-color);
-    }
-
     &.inline {
         & > span {
-            & > a {
+            & > a:not(.button) {
                 margin-left: calc(var(--default-margin) / 2);
             }
         }
@@ -800,23 +832,23 @@ 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;
             }
         }
     }
 
     .place-inside {
         + .search-field-wrapper {
-
-
             input {
                 padding-left: calc(var(--default-padding) * 3);
             }
@@ -824,33 +856,15 @@ 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 {
-                        &.label {
+                        &.label-text {
                             color: var(--error-color);
 
                             &::before {
@@ -860,12 +874,14 @@ export default {
                         }
                     }
                 }
+            }
 
-                &.on {
+            &.on {
+                .switch-label-wrapper {
                     border-color: var(--success-color);
 
                     span {
-                        &.label {
+                        &.label-text {
                             color: var(--success-color);
 
                             &::before {
@@ -878,7 +894,7 @@ export default {
             }
         }
     }
-
-    /* end toggle-switch ------------------------------------------------------------------------------------------ */
+    /* end toggle-switch */
 }
+/* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>