comand-component-library 3.1.44 → 3.1.47

package/src/components/CmdFormElement.vue

@@ -1,38 +1,83 @@
 <template>
     <label v-if="(element === 'input' || element === 'select' || element === 'textarea')"
+           :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
+           }]"
            :for="id"
-           :class="['cmd-form-element', status, {'inline' : displayLabelInline, 'checked': isChecked}]"
            ref="label">
-        <!-- begin label (+ required) -->
+
+        <!-- begin label-text (+ required asterisk) -->
         <span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
-              :class="{'hidden': hideLabel}">
-          <span>{{ labelText }}</span>
-          <sup v-if="$attrs.required">*</sup>
-        </span>
-        <!-- end label (+ required) -->
+              :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>
+        <!-- end label-text (+ required asterisk) -->
 
         <!-- begin icon -->
-        <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" class="place-inside"
-              :class="[status, innerIconClass]"></span>
+        <span
+            v-if="
+        $attrs.type !== 'checkbox' &&
+          $attrs.type !== 'radio' &&
+          fieldIconClass
+      "
+            :class="['place-inside', fieldIconClass]"
+        ></span>
         <!-- end icon -->
 
         <!-- begin inputfield -->
         <template
             v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
             <input v-bind="$attrs"
-                   :id="id" :class="htmlClass"
+                   :id="id"
+                   :class="htmlClass"
                    @focus="tooltip = true"
-                   @blur="tooltip = false"
+                   @blur="onBlur"
                    @input="onInput"
                    @mouseover="datalistFocus"
-                   @change="$emit('change', $event)"
+                   @keyup="checkForCapsLock"
                    :autocomplete="datalist ? 'off' : 'on'"
                    :list="datalist ? datalist.id : false"
-                   :value="value"
+                   :value="modelValue"
+                   :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                   ref="input"
             />
         </template>
         <!-- end inputfield -->
 
+        <!-- begin show-password-icon -->
+        <a v-if="$attrs.type === 'password'"
+           href="#"
+           class="place-inside icon-visible"
+           @mousedown.prevent="showPassword"
+           @mouseup.prevent="hidePassword"
+           @mouseleave.prevent="hidePassword"
+           @click.prevent
+           title="Toggle password visibility">
+        </a>
+        <!-- end show-password-icon -->
+
         <!-- begin datalist -->
         <template v-if="datalist && datalist.options.length">
             <datalist :id="datalist.id">
@@ -45,18 +90,32 @@
         <template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
             <input v-bind="$attrs"
                    @change="onChange"
+                   @blur="onBlur"
                    :checked="isChecked"
+                   :role="$attrs.type"
+                   :aria-checked="isChecked"
                    :value="inputValue"
-                   :class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
+                   :class="[htmlClass, validationStatus, { 'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch }]"
                    :id="id"
-                   :aria-invalid="status === 'error'"
+                   :aria-invalid="validationStatus === 'error'"
                    :aria-describedby="`status-message-${id}`"
             />
-            <span v-if="labelText">
-        <span>{{ labelText }}</span>
-        <sup v-if="$attrs.required">*</sup>
-      </span>
+
+            <!-- begin labels for toggle-switch -->
+            <span v-if="!(onLabel && offLabel)" :class="{ hidden: !showLabel }">
+                <span v-if="labelText">{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+            </span>
+            <template v-else-if="onLabel && offLabel">
+                <span v-if="labelText">
+                    <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+                </span>
+                <div class="toggle-switch switch-label">
+                    <span class="label">{{ onLabel }}</span>
+                    <span class="label">{{ offLabel }}</span>
+                </div>
+            </template>
             <slot v-else></slot>
+            <!-- end labels for toggle-switch -->
         </template>
         <!-- end checkbox and radiobutton -->
 
@@ -64,10 +123,10 @@
         <select v-if="element === 'select'"
                 v-bind="$attrs"
                 :id="id"
-                @change="$emit('input', $event.target.value)"
-        >
+                @blur="onBlur"
+                @change="$emit('update:modelValue', $event.target.value)">
             <option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
-                    :selected="option.value === value">{{ option.text }}
+                    :selected="option.value === modelValue">{{ option.text }}
             </option>
         </select>
         <!-- end selectbox -->
@@ -76,65 +135,124 @@
         <textarea v-if="element === 'textarea'"
                   v-bind="$attrs"
                   :id="id"
-                  :value="value"
+                  :value="modelValue"
+                  :maxlength="getMaxLength"
                   @input="onInput"
                   @focus="tooltip = true"
-                  @blur="tooltip = false">
+                  @blur="onBlur">
         </textarea>
+        <span v-if="element === 'textarea' && showCharactersTextarea">{{ charactersTextarea }}</span>
         <!-- end textarea -->
 
-        <!-- begin tooltip -->
-        <CmdTooltip v-if="tooltip && tooltipText" :tooltipText="tooltipText"/>
-        <!-- end tooltip -->
-
         <!-- begin searchfield -->
-        <span v-else-if="element === 'input' && $attrs.type === 'search'" class="flex-container no-gap">
-      <input v-bind="$attrs" :id="id" @input="onInput" :value="value"/>
-      <button class="no-flex" type="button">
-        <span class="icon-search"></span>
-      </button>
-    </span>
+        <span v-else-if="element === 'input' && $attrs.type === 'search'" 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"
+                :id="id"
+                @input="onInput"
+                :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                :value="modelValue"
+            />
+            <button v-if="showSearchButton" class="no-flex" type="button" :title="iconSearch.tooltip">
+                <span :class="iconSearch.iconClass"></span>
+            </button>
+        </span>
         <!-- end searchfield -->
     </label>
 
     <!-- begin button -->
-    <button v-else class="button" v-bind="$attrs">
-        <span v-if="buttonIcon.iconPosition === 'before'" :class="buttonIcon.iconClass"></span>
-        <span v-if="buttonIcon.iconPosition">{{ buttonText }}</span>
+    <button v-else class="button" v-bind="buttonAttrs">
+        <span v-if="nativeButton?.icon?.show && (nativeButton?.icon?.position === 'before' || !nativeButton?.icon?.position)" :class="nativeButton?.icon?.iconClass"></span>
+        <span v-if="nativeButton?.icon && nativeButton?.text">{{ nativeButton.text }}</span>
         <template v-else>
-            {{ buttonText }}
+            {{ nativeButton.text }}
         </template>
-        <span v-if="buttonIcon.iconPosition === 'after'" :class="buttonIcon.iconClass"></span>
+        <span v-if="nativeButton?.icon?.show && nativeButton?.icon?.position === 'after'" :class="nativeButton?.icon?.iconClass"></span>
     </button>
     <!-- end button -->
+
+    <!-- begin CmdTooltip -->
+    <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
+        <!-- begin CmdSystemMessage -->
+        <CmdSystemMessage
+            v-if="getValidationMessage"
+            :message="getValidationMessage"
+            :validation-status="validationStatus"
+            :iconClose="{show: false}"
+        />
+        <!-- end CmdSystemMessage -->
+
+        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
+            <!-- begin list of requirements -->
+            <h6>
+                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
+                "{{ labelText }}"
+            </h6>
+            <dl class="list-of-requirements">
+                <template v-for="(requirement, index) in inputRequirements" :key="index">
+                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
+                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
+                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
+                              :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
+                    </dd>
+                </template>
+            </dl>
+            <!-- end list of requirements -->
+
+            <!-- begin helplink -->
+            <hr v-if="helplink?.show"/>
+            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
+                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
+                <span v-if="helplink.text">{{ helplink.text }}</span>
+            </a>
+            <!-- end helplink -->
+        </template>
+    </CmdTooltip>
+    <!-- end CmdTooltip -->
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n"
+import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import FieldValidation from "../mixins/FieldValidation.js"
+import Tooltip from "../mixins/Tooltip.js"
+
+// import components
+import CmdSystemMessage from "./CmdSystemMessage"
 import CmdTooltip from "./CmdTooltip"
 
 export default {
     inheritAttrs: false,
     name: "FormElement",
     components: {
+        CmdSystemMessage,
         CmdTooltip
     },
+    mixins: [
+        I18n,
+        DefaultMessageProperties,
+        FieldValidation,
+        Tooltip
+    ],
     data() {
         return {
-            tooltip: false
+            errorOccurred: 0
         }
     },
     props: {
         /**
-         * set value for v-model
+         * set value for v-model (must be names modelValue in vue3)
          */
-        value: {
+        modelValue: {
             type: [String, Boolean, Array, Number],
             default: ""
         },
         /**
          * set type of native form-element
          *
-         * values: input, select, textarea, button
+         * @allowedValues: input, select, textarea, button
          */
         element: {
             type: String,
@@ -151,9 +269,9 @@ export default {
          *
          * label may not be removed, because it is required for accessibility
          */
-        hideLabel: {
+        showLabel: {
             type: Boolean,
-            default: false
+            default: true
         },
         /**
          * text for label
@@ -162,6 +280,52 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * set to activate to use toggle-switch-styling
+         *
+         * element-prop must be set to "input" and type-attribute must be set to "checkbox" or "radio"
+         *
+         * @affectsStyling: true
+         */
+        toggleSwitch: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * text for on-label
+         *
+         * set to activate switch-label (=label is placed on toggle-switch (not behind))
+         * toggleSwitch-prop must be set to "true"
+         * element-prop must be set to "input" and type-attribute must be set to "checkbox" or "radio"
+         */
+        onLabel: {
+            type: String,
+            required: false
+        },
+        /**
+         * text for off-label
+         *
+         * set to activate switch-label (=label is placed on toggle-switch (not behind))
+         * toggleSwitch-prop must be set to "true"
+         * element-prop must be set to "input" and type-attribute must be set to "checkbox" or "radio"
+         */
+        offLabel: {
+            type: String,
+            required: false
+        },
+        /**
+         * on/off-, yes/no-color-styling
+         *
+         * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
+         * toggleSwitch-prop must be set to "true"
+         * element-prop must be set to "input" and type-attribute must be set to "checkbox" or "radio"
+         *
+         * @affectsStyling: true
+         */
+        colored: {
+            type: Boolean,
+            required: false
+        },
         /**
          * allow checkbox/radio-buttons to get value from outside
          */
@@ -171,6 +335,8 @@ export default {
         },
         /**
          * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
+         *
+         * @affectsStyling: true
          */
         replaceInputType: {
             type: Boolean,
@@ -209,19 +375,20 @@ export default {
             required: false
         },
         /**
-         * text for native button
-         */
-        buttonText: {
-            type: String,
-            required: false
-        },
-        /**
-         * set icon for native button
+         * native button
          */
-        buttonIcon: {
+        nativeButton: {
             type: Object,
             default() {
-                return {}
+                return {
+                    text: "",
+                    icon: {
+                        show: true,
+                        iconClass: "",
+                        position: "left",
+                        tooltip: ""
+                    }
+                }
             }
         },
         /**
@@ -236,7 +403,7 @@ export default {
          *
          * element-property must be 'input' and type-property may not be checkbox or radio
          */
-        innerIconClass: {
+        fieldIconClass: {
             type: String,
             required: false
         },
@@ -245,51 +412,174 @@ export default {
          *
          * type-property may not be checkbox or radio
          */
-         displayLabelInline: {
+        displayLabelInline: {
             type: Boolean,
             required: false
         },
         /**
          * set status for label and form-element
          *
-         * values: error (red-styling), success (green-styling)
+         * @allowedValues: error, success
+         *
+         * @affectsStyling: true
          */
         status: {
             type: String,
             required: false
+        },
+        /**
+         * toggle display of number of used and allowed characters for textarea
+         *
+         * type-property must be set to textarea
+         */
+        showCharactersTextarea: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * toggle visibility of search-button (next to search-field)
+         */
+        showSearchButton: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * icon to delete search term
+         *
+         * element-property must me set to 'input'
+         * type-property must be set to 'search'
+         *
+         */
+        iconDelete: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    iconClass: "icon-cancel-circle",
+                    tooltip: "Delete term"
+                }
+            }
+        },
+        /**
+         * icon to search term
+         *
+         * element-property must me set to 'input'
+         * type-property must be set to 'search'
+         *
+         */
+        iconSearch: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    iconClass: "icon-search",
+                    tooltip: "Search"
+                }
+            }
         }
     },
     computed: {
+        buttonAttrs() {
+            // copy all native attributes
+            const allAttrs = {...this.$attrs}
+
+            // check if specific tooltip for icon is set (and add as title-attribute)
+            if (this.nativeButton.icon?.tooltip) {
+                allAttrs.title = this.nativeButton.icon?.tooltip
+            }
+
+            return allAttrs
+        },
+        tooltipHeadline() {
+            return {
+                text: this.labelText,
+                level: "5"
+            }
+        },
         isChecked() {
-            if (typeof this.value === "boolean") {
-                return this.value
+            if (typeof this.modelValue === "boolean") {
+                return this.modelValue
             }
-            if (typeof this.value === "string") {
-                return this.value === this.inputValue
+            if (typeof this.modelValue === "string") {
+                return this.modelValue === this.inputValue
             }
-            if (typeof this.value === "number") {
-                return this.value === this.inputValue
+            if (typeof this.modelValue === "number") {
+                return this.modelValue === this.inputValue
             }
-            if (this.value !== undefined) {
-                return this.value.includes(this.inputValue)
+            if (this.modelValue !== undefined) {
+                return this.modelValue.includes(this.inputValue)
             }
             return false
+        },
+        charactersTextarea() {
+            return "Characters: " + this.modelValue.length + "/" + this.getMaxLength()
+        },
+        validationTooltip() {
+            if (!this.useCustomTooltip) {
+                return this.getValidationMessage
+            }
+
+            // set default-tooltip if customTooltip is not set
+            if (this.validationStatus === 'error') {
+                return "An error occurred!"
+            } else if (this.validationStatus === 'success') {
+                return "This information is filled correctly!"
+            } else if (this.capsLockActivated) {
+                return "Attention: Caps lock is activated!"
+            }
+            return "Open field requirements!"
         }
     },
     methods: {
-        onChange(e) {
-            if (typeof this.value === "boolean") {
-                this.$emit("update:value", e.target.checked)
-            } else if (typeof this.value === "string") {
-                this.$emit("update:value", e.target.value)
-            } else if (this.value !== undefined) {
-                let values = [...this.value]
-                if (e.target.checked) {
-                    values.push(e.target.value)
+        getDomElement() {
+            return this.$refs.label
+        },
+        getMaxLength() {
+            return this.$attrs.maxlength > 0 ? this.$attrs.maxlength : 5000
+        },
+        onBlur(event) {
+            // check if surrounding form with data-use-validation exists
+            const useValidation = event.target.closest("form")?.dataset.useValidation === "true"
+
+            if (useValidation) {
+                this.tooltip = false
+                this.validationStatus = ""
+
+                // if input is filled, set status to success (expect for checkboxes and radiobuttons)
+                if (!["checkbox", "radio"].includes(this.$attrs.type) && this.modelValue) {
+                    this.validationStatus = "success"
+                }
+
+                if (typeof event.target.checkValidity === "function" && !event.target.checkValidity()) {
+                    this.validationStatus = "error"
+                } else {
+                    if (this.customRequirements) {
+                        // check if customRequirement returns invalid result
+                        const invalidCustomRequirement = this.customRequirements.some(requirement => {
+                            return !requirement.valid(this.modelValue)
+                        })
+
+                        // set validation-status if invalidCustomRequirement returns at least one invalid entry
+                        if (invalidCustomRequirement) {
+                            this.validationStatus = "error"
+                        }
+                    }
+                }
+            }
+        },
+        onChange(event) {
+            if (typeof this.modelValue === "boolean") {
+                this.$emit("update:modelValue", event.target.checked)
+            } else if (typeof this.modelValue === "string") {
+                this.$emit("update:modelValue", event.target.value)
+            } else if (this.modelValue !== undefined) {
+                let values = [...this.modelValue]
+                if (event.target.checked) {
+                    values.push(event.target.value)
                 } else {
-                    values = values.filter(value => value !== e.target.value)
+                    values = values.filter(value => value !== event.target.value)
                 }
-                this.$emit("update:value", values)
+                this.$emit("update:modelValue", values)
             }
         },
         datalistFocus() {
@@ -298,9 +588,168 @@ export default {
                 this.$refs.label.focus()
             }
         },
-        onInput(e) {
-            this.$emit('update:value', e.target.value)
+        onInput(event) {
+            this.$emit('update:modelValue', event.target.value)
+        },
+        showPassword() {
+            // get password-field
+            const passwordField = this.$refs.input
+
+            // get value of password field (to save it temporary)
+            const password = passwordField.value
+
+            // toggle input-type to make password visible
+            passwordField.nextElementSibling.classList.replace("icon-visible", "icon-not-visible")
+            passwordField.setAttribute("type", "text")
+
+            // assign saved password back to field
+            passwordField.setAttribute("value", password)
+        },
+        hidePassword() {
+            this.$refs.input.nextElementSibling.classList.replace("icon-not-visible", "icon-visible")
+            this.$refs.input.setAttribute("type", "password")
+        }
+    },
+    watch: {
+        status: {
+            handler() {
+                this.validationStatus = this.status
+            },
+            immediate: true
         }
     }
 }
 </script>
+
+<style lang="scss">
+.cmd-form-element {
+    input + .place-inside[class*="icon"] {
+        left: auto;
+        right: .5rem
+    }
+
+    &.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);
+        }
+
+        > span {
+            color: var(--status-color);
+
+            &[class*="icon-"].place-inside {
+                color: var(--status-color);
+            }
+        }
+    }
+
+    & + .cmd-tooltip {
+        border-color: var(--status-color);
+    }
+
+    &.inline {
+        & > span {
+            & > a {
+                margin-left: calc(var(--default-margin) / 2);
+            }
+        }
+    }
+
+    .search-field-wrapper {
+        margin: 0;
+    }
+
+    .place-inside {
+        + .search-field-wrapper {
+            a {
+                position: absolute;
+                top: 50%;
+                right: 1rem;
+                transform: translateY(-50%);
+                z-index: 100;
+
+                & + input {
+                    padding-right: calc(var(--default-padding) * 3);
+                }
+            }
+
+            input {
+                padding-left: calc(var(--default-padding) * 3);
+            }
+        }
+    }
+
+    /* begin toggle-switch */
+    /* 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 {
+                    border-color: var(--error-color);
+
+                    span {
+                        &.label {
+                            color: var(--error-color);
+
+                            &::before {
+                                border-color: var(--error-color);
+                                background-color: var(--pure-white);
+                            }
+                        }
+                    }
+                }
+
+                &.on {
+                    border-color: var(--success-color);
+
+                    span {
+                        &.label {
+                            color: var(--success-color);
+
+                            &::before {
+                                border-color: var(--success-color);
+                                background-color: var(--success-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    /* end toggle-switch ------------------------------------------------------------------------------------------ */
+}
+</style>