comand-component-library 3.1.69 → 3.1.72

package/src/components/CmdFormElement.vue

@@ -19,50 +19,81 @@
 
         <!-- 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>
+
+            <!-- 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) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
+                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></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 -->
+
+            <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="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 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 -->
@@ -90,18 +121,18 @@
         <!-- begin checkbox and radiobutton -->
         <template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
             <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>
+                    <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"
+                        :disabled="$attrs.disabled"
+                        :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">
@@ -113,12 +144,13 @@
                            :value="inputValue"
                            :class="{inputClass, validationStatus}"
                            :id="labelId"
+                           :disabled="$attrs.disabled"
                            :aria-invalid="validationStatus === 'error'"
                     />
-                    <span class="label">{{ onLabel }}</span>
-                    <span class="label">{{ offLabel }}</span>
+                    <span class="label-text">{{ onLabel }}</span>
+                    <span class="label-text">{{ offLabel }}</span>
                 </span>
-                <span v-if="labelText">
+                <span v-if="labelText" class="label-text">
                     <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
                 </span>
             </template>
@@ -154,19 +186,19 @@
 
         <!-- begin searchfield -->
         <template v-else-if="element === 'input' && $attrs.type === 'search'">
-            <div class="search-field-wrapper flex-container no-gap">
+            <span class="search-field-wrapper flex-container no-gap">
                 <input
                     v-bind="elementAttributes"
                     :id="labelId"
                     @input="onInput"
-                    :maxlength="$attrs.maxlength > 0 ? $attrs.maxlength : 255"
+                    :maxlength="getMaxLength()"
                     :value="modelValue"
                 />
-                <a v-if="showSearchButton" href="#" class="button no-flex" :title="iconSearch.tooltip" @click.prevent="executeSearch">
+                <a v-if="showSearchButton" href="#" :class="['button no-flex', {disabled: $attrs.disabled}]" :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>
+            </span>
         </template>
     </label>
     <!-- end searchfield -->
@@ -181,45 +213,6 @@
         <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) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
-                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></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>
@@ -228,7 +221,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"
 
@@ -343,7 +336,7 @@ export default {
          * allow checkbox/radio-buttons to get value from outside
          */
         inputValue: {
-            type: String,
+            type: [String, Number],
             required: false
         },
         /**
@@ -558,6 +551,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
          *
@@ -601,7 +621,7 @@ export default {
                 textarea: [...commonAttributes, "placeholder"]
             }
             const attrs = {}
-            if(attributes[this.element]) {
+            if (attributes[this.element]) {
                 Object.entries(this.$attrs).filter(([name]) => attributes[this.element].includes(name)).forEach(([name, value]) => attrs[name] = value)
             }
             return attrs
@@ -668,21 +688,31 @@ export default {
                 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') {
+            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) {
@@ -773,29 +803,22 @@ export default {
 </script>
 
 <style lang="scss">
+/* begin cmd-form-element ------------------------------------------------------------------------------------------ */
 .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);
-        }
+    .cmd-tooltip {
+        position: absolute;
+        right: 0;
+        transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
+        left: auto !important;
+        top: 0 !important;
+    }
 
+    &.has-state, & + .cmd-tooltip {
         ::placeholder {
             color: var(--status-color);
         }
@@ -809,13 +832,9 @@ export default {
         }
     }
 
-    & + .cmd-tooltip {
-        border-color: var(--status-color);
-    }
-
     &.inline {
         & > span {
-            & > a {
+            & > a:not(.button) {
                 margin-left: calc(var(--default-margin) / 2);
             }
         }
@@ -841,7 +860,6 @@ export default {
 
     .place-inside {
         + .search-field-wrapper {
-
             input {
                 padding-left: calc(var(--default-padding) * 3);
             }
@@ -857,7 +875,7 @@ export default {
                     border-color: var(--error-color);
 
                     span {
-                        &.label {
+                        &.label-text {
                             color: var(--error-color);
 
                             &::before {
@@ -874,7 +892,7 @@ export default {
                     border-color: var(--success-color);
 
                     span {
-                        &.label {
+                        &.label-text {
                             color: var(--success-color);
 
                             &::before {
@@ -887,7 +905,7 @@ export default {
             }
         }
     }
-
-    /* end toggle-switch ------------------------------------------------------------------------------------------ */
+    /* end toggle-switch */
 }
+/* end cmd-form-element------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdInputGroup.vue

@@ -1,15 +1,94 @@
 <template>
-    <div :class="['cmd-input-group', {inline: labelInline}]">
-        <span :class="['label', { hidden: !showLabel}]">{{ labelText }}</span>
-        <div class="flex-container no-flex">
+    <div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch, disabled: disabled}]">
+        <span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
+             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+        </span>
+        <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
+            <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
+                <input
+                    :type="inputTypes"
+                   :id="inputElement.id"
+                   :name="inputElement.name"
+                   :value="inputElement.value"
+                   v-model="inputValue"
+                   :disabled="disabled"
+                   :class="{'replace-input-type': replaceInputType}"
+                />
+                <span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
+                <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
+            </label>
+        </span>
+
+        <!-- begin useSlot -->
+        <div v-else class="flex-container no-flex">
+            <!-- begin slot -->
             <slot></slot>
+            <!-- end slot -->
         </div>
+        <!-- end useSlot -->
     </div>
 </template>
 
 <script>
+import {createUuid} from "../utils/common"
+
 export default {
+    data() {
+        return {
+            value: ""
+        }
+    },
     props: {
+        /**
+         * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
+         */
+        modelValue: {
+            type: [Array, String],
+            required: false
+        },
+        /**
+         * list of input-elements inside group
+         *
+         * useSlot-property must be set to 'false'
+         */
+        inputElements: {
+          type: Array,
+          required: false
+        },
+        /**
+         * set type for inputs in group
+         *
+         * @allowedValues: checkbox, radio
+         */
+        inputTypes: {
+            type: String,
+            default: "radio"
+        },
+        /**
+         * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
+         *
+         * @affectsStyling: true
+         */
+        replaceInputType: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * activate if input-elements should be given by slot
+         */
+        useSlot: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * toggle multipleSwitch-styling
+         *
+         * @affectsStyling: true
+         */
+        multipleSwitch: {
+            type: Boolean,
+            default: false
+        },
         /**
          * toggle label-text visibility
          */
@@ -32,6 +111,58 @@ export default {
         labelInline: {
             type: Boolean,
             default: false
+        },
+        /**
+         * toggle if input-elements will be stretched horizontally
+         *
+         * @affectsStyling: true
+         */
+        stretchHorizontally: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * define disabled-property to set disabled-style
+         *
+         * component cannot handle native disabled-attribute, because it is no native form-element
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        // get ID for accessibility
+        labelId() {
+            if(this.$attrs.id !== undefined) {
+                return this.$attrs.id
+            }
+            return "label-" + createUuid()
+        },
+        inputValue: {
+            // read inputValue
+            get() {
+                return this.modelValue
+            },
+            // set/write a value to update v-model for this component
+            set(value) {
+                this.$emit("update:modelValue", value)
+            }
+        }
+    },
+    methods: {
+        onChange(e) {
+            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)
+                } else {
+                    values = values.filter(value => value !== e.target.value)
+                }
+                this.$emit("update:modelValue", values)
+            }
         }
     }
 }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -183,7 +183,7 @@ export default {
                 background: var(--primary-color);
 
                 span, span[class*='icon'] {
-                    color: var(--color-scheme-text-color);
+                    color: var(--pure-white);
                 }
             }
 

package/src/components/CmdProgressBar.vue

@@ -1,8 +1,8 @@
 <template>
     <label class="cmd-progressbar" :for="id">
-        <span :class="{hidden: !showLabel}">{{ labelText }}</span>
+        <span :class="['label-text', {hidden: !showLabel}]">{{ labelText }}</span>
         <span class="progressbar">
-            <span v-if="showLoadingStatus">{{ loadingStatus }}%</span><!-- do not place inside progress-tag (will not be displayed then) -->
+            <span v-if="showLoadingStatus">{{ loadingStatus }} %</span><!-- do not place inside progress-tag (will not be displayed then) -->
             <progress v-bind="$attrs" :id="id" :value="loadingStatus"></progress>
         </span>
     </label>

package/src/components/CmdTable.vue

@@ -133,7 +133,7 @@ export default {
             type: Object,
             default: function () {
                 return {
-                    iconClass: "icon-table",
+                    iconClass: "icon-toggle-table-width",
                     tooltip: "Toggle table width"
                 }
             }

package/src/components/CmdTabs.vue

@@ -116,10 +116,6 @@ export default {
                 border-bottom: 0;
                 border-color: var(--primary-color);
                 top: .1rem;
-
-                a {
-                    color: var(--primary-color);
-                }
             }
 
             a {