comand-component-library 4.2.88 → 4.2.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.2.88",
+  "version": "4.2.89",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,

package/src/ComponentLibrary.vue

@@ -1376,31 +1376,35 @@
                             </div>
                         </CmdForm>
                     </template>
-                    <template v-slot:page-4="props">
-                        <h3>Page 4</h3>
-                        <CmdForm
-                            :cmdHeadline=" { headlineText: 'Confirmation', headlineLevel: 3 }"
-                            :submitButton="{ disabled : props.atleastOneStepWithError }"
-                            :cancelButton="{ show: false }"
-                        >
-                        <p>Please confirm that all data ou provided is legit.</p>
-                            <CmdFormElement 
-                                element="input" 
-                                type="checkbox" 
-                                labelText="Confirm data privacy:"
-                                name="confirm-data-privacy"
-                                id="confirm-data-privac"
-                                :required="true"
-                                :modelValue="props.formDataForPage['confirm-data-privacy']" 
-                                @update:modelValue="setValue($event, 'confirm-data-privacy', props)" 
-                                @validation-status-change="setValidationStatusCheckbox($event, 'confirm-data-privacy', props)"
-                            />
-                        </CmdForm>
-                        props.atleastOneStepWithError: {{ props.atleastOneStepWithError }}
-                    </template>
-                    <template>
-                        <h3>Page 5 - Confirmation</h3>
-                        <p>Thank you for sending your request!</p>
+                    <template v-slot:page-last="props">
+                        <template v-if="!confirmDataPrivacy">
+                            <h3>Page 4</h3>
+                            <CmdForm
+                                :cmdHeadline=" { headlineText: 'Confirmation', headlineLevel: 3 }"
+                                :submitButton="{ disabled : props.atleastOneStepWithError, type: 'button' }"
+                                :cancelButton="{ show: false }"
+                                @submit="validateForm"
+                            >
+                                <p>Please confirm that all data you provided is legit.</p>
+                                <CmdFormElement 
+                                    element="input" 
+                                    type="checkbox" 
+                                    labelText="Confirm data privacy:"
+                                    name="confirm-data-privacy"
+                                    id="confirm-data-privac"
+                                    :required="true"
+                                    v-model="dataPrivacyChecked"
+                                    @update:modelValue="setValue($event, 'confirm-data-privacy', props)" 
+                                    @validation-status-change="setValidationStatusCheckbox($event, 'confirm-data-privacy', props)"
+                                />
+                            </CmdForm>
+                        </template>
+                        <template v-else>
+                            <h3>Confirmation</h3>
+                            <CmdSystemMessage systemMessage="Your request was send successfully!" validationStatus="success" :iconClose="{ show: false }" />
+                            <p>A copy with all submitted data was send to you.</p>
+                            props.formDataForPage: {{ props.formDataForPage }}
+                        </template>
                     </template>
                 </CmdMultistepFormWrapper>
                 <h3>Data provided by slot</h3>
@@ -2007,6 +2011,7 @@ export default {
             componentControls: {},
             componentView: true,
             colorScheme: "none",
+            confirmDataPrivacy: false,
             showLeftSidebar: true,
             selectedTemplate: "blank",
             acceptedCookies: ["google-maps"],
@@ -2014,6 +2019,7 @@ export default {
             showSettingsSidebar: false,
             disabledStatus: undefined,
             validationStatus: "",
+            dataPrivacyChecked: false,
             loginData: {
                 username: "",
                 password: ""
@@ -2404,6 +2410,9 @@ export default {
         doSomething() {
             alert("Language changed!")
         },
+        validateForm() {
+            this.confirmDataPrivacy = true
+        },
         executeSearch() {
             return Math.floor(Math.random() * 100)
         },

package/src/assets/data/form-elements.json

@@ -6,7 +6,7 @@
     "htmlClass": "form-element-text-class",
     "id": "form-element-text-id",
     "value": "",
-    "fieldIconClass": "icon-lock",
+    "fieldIconClass": "icon-globe",
     "labelText": "Text input",
     "placeholder": "Placeholdertext",
     "required": false,
@@ -15,33 +15,33 @@
   {
     "component": "flexContainer",
     "formElements": [
-    {
-      "element": "input",
-      "type": "text",
-      "name": "form-element-username",
-      "htmlClass": "form-element-text-class",
-      "id": "form-element-username",
-      "value": "default value",
-      "fieldIconClass": "icon-cogs",
-      "labelText": "Username input",
-      "placeholder": "Placeholdertext",
-      "required": true,
-      "disabled": false
-    },
-    {
-      "element": "input",
-      "type": "password",
-      "name": "form-element-password-name",
-      "htmlClass": "form-element-password-class",
-      "id": "form-element-password-id",
-      "value": "",
-      "fieldIconClass": "icon-cogs",
-      "labelText": "Password input",
-      "placeholder": "Placeholdertext",
-      "required": false,
-      "disabled": false
-    }
-  ]
+      {
+        "element": "input",
+        "type": "text",
+        "name": "form-element-username",
+        "htmlClass": "form-element-text-class",
+        "id": "form-element-username",
+        "value": "default value",
+        "fieldIconClass": "icon-user-profile",
+        "labelText": "Username input",
+        "placeholder": "Placeholdertext",
+        "required": true,
+        "disabled": false
+      },
+      {
+        "element": "input",
+        "type": "password",
+        "name": "form-element-password-name",
+        "htmlClass": "form-element-password-class",
+        "id": "form-element-password-id",
+        "value": "",
+        "fieldIconClass": "icon-security-settings",
+        "labelText": "Password input",
+        "placeholder": "Placeholdertext",
+        "required": false,
+        "disabled": false
+      }
+    ]
   },
   {
     "element": "input",
@@ -50,7 +50,7 @@
     "htmlClass": "form-element-tel-class",
     "id": "form-element-tel-id",
     "value": "default value",
-    "fieldIconClass": "icon-tel",
+    "fieldIconClass": "icon-phone",
     "labelText": "Telephone input (disabled)",
     "placeholder": "Placeholdertext",
     "required": false,
@@ -63,7 +63,7 @@
     "htmlClass": "form-element-email-class",
     "id": "form-element-email-id",
     "value": "default value",
-    "fieldIconClass": "icon-email",
+    "fieldIconClass": "icon-mail",
     "labelText": "Email input (with icon)",
     "placeholder": "Placeholdertext",
     "required": false,
@@ -156,31 +156,66 @@
     "maxlength": 500
   },
   {
-    "component": "CmdInputGroup",
-    "labelText": "Input Group (Radio):",
-    "toggleSwitches": true,
-    "value": "website",
-    "inputElements": [
-      {
-        "labelText": "Website",
-        "id": "radio-id-1",
-        "name": "input-group-radio",
-        "iconClass": "icon-globe",
-        "value": "website"
-      },
+    "component": "flexContainer",
+    "formElements": [
       {
-        "labelText": "E-Mail",
-        "id": "radio-id-2",
-        "name": "input-group-radio",
-        "iconClass": "icon-mail",
-        "value": "email"
+        "component": "CmdInputGroup",
+        "labelText": "Input Group (Checkbox):",
+        "toggleSwitches": true,
+        "inputTypes": "checkbox",
+        "value": "checkbox-website",
+        "inputElements": [
+          {
+            "labelText": "Website",
+            "id": "checkbox-id-1",
+            "name": "input-group-checkbox",
+            "iconClass": "icon-globe",
+            "value": "checkbox-website"
+          },
+          {
+            "labelText": "E-Mail",
+            "id": "checkbox-id-2",
+            "name": "input-group-checkbox",
+            "iconClass": "icon-mail",
+            "value": "checkbox-email"
+          },
+          {
+            "labelText": "Phone",
+            "id": "checkbox-id-3",
+            "name": "input-group-checkbox",
+            "iconClass": "icon-phone",
+            "value": "checkbox-phone"
+          }
+        ]
       },
       {
-        "labelText": "Phone",
-        "id": "radio-id-3",
-        "name": "input-group-radio",
-        "iconClass": "icon-phone",
-        "value": "phone"
+        "component": "CmdInputGroup",
+        "labelText": "Input Group (Radio):",
+        "toggleSwitches": true,
+        "value": "radio-website",
+        "inputElements": [
+          {
+            "labelText": "Website",
+            "id": "radio-id-1",
+            "name": "input-group-radio",
+            "iconClass": "icon-globe",
+            "value": "radio-website"
+          },
+          {
+            "labelText": "E-Mail",
+            "id": "radio-id-2",
+            "name": "input-group-radio",
+            "iconClass": "icon-mail",
+            "value": "radio-email"
+          },
+          {
+            "labelText": "Phone",
+            "id": "radio-id-3",
+            "name": "input-group-radio",
+            "iconClass": "icon-phone",
+            "value": "radio-phone"
+          }
+        ]
       }
     ]
   }

package/src/components/CmdFakeSelect.vue

@@ -432,6 +432,7 @@ export default {
     methods: {
         toggleAllOptions() {
             this.validationStatus = "success"
+            
             const checkboxValues = []
             if (this.modelValue.length === this.selectData.length) {
                 if (this.$attrs.required) {
@@ -444,7 +445,9 @@ export default {
             }
 
             this.$emit("update:modelValue", checkboxValues)
+            this.$emit('validation-status-change', this.validationStatus)
         },
+        // toggle options/dropdown
         toggleOptions() {
             if (this.$attrs.disabled !== 'disabled') {
                 this.showOptions = !this.showOptions
@@ -465,8 +468,11 @@ export default {
                 }
             }
 
+            // hide options after selection
             this.showOptions = false
+            
             this.$emit('update:modelValue', optionValue)
+            this.$emit('validation-status-change', this.validationStatus)
         },
         // check if a checkbox is changed for selectbox with checkboxes
         optionSelect(event) {
@@ -484,18 +490,23 @@ export default {
 
             this.$emit('update:modelValue', value)
         },
+        // hide options (in dropdown)
         closeOptions() {
             this.showOptions = false
         },
+        // set path for flag-icons (type-property must be 'country')
         pathFlag(isoCode) {
             return this.pathFlags + "/flag-" + isoCode + ".svg"
         },
+        // validate on blur
         onBlur() {
             this.validationStatus = "success"
 
             if (this.$attrs.required !== undefined && (!this.modelValue || this.modelValue.length === 0)) {
                 this.validationStatus = "error"
             }
+            
+            this.$emit('validation-status-change', this.validationStatus)
         },
         // overwrite requirement-message form fieldValidation.js
         getRequirementMessage() {

package/src/components/CmdForm.vue

@@ -10,16 +10,18 @@
     >
         <template v-if="useFieldset">
             <fieldset class="flex-container flex-direction-column"><!-- do not remove .flex-direction-column to keep specificity -->
+                <!-- begin (mandatory) legend-->
                 <legend :class="{hidden : !legendOptions.show, 'align-left': legendOptions.align === 'left'}">{{
                         legendOptions.text
                     }}
                 </legend>
-                
+                <!-- end (mandatory) legend-->
+
                 <CmdHeadline 
                     v-if="cmdHeadline?.headlineText"
                     v-bind="cmdHeadline"
                 />
-
+  
                 <CmdSystemMessage 
                     v-if="systemMessage.show && systemMessage.message" 
                     :validationStatus="systemMessage.validationStatus" 
@@ -30,84 +32,57 @@
                 <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
 
+                <!-- begin loop for formElements -->
                 <template v-else v-for="(item, index) in formElements" :key="index">
-                    <!-- begin loop for formElements -->
                     <CmdFormElement
                         v-if="!item.component || item.component === 'CmdFormElement'"
                         :key="index"
-                        :element="item.element || 'input'"
-                        :type="item.type || 'text'"
-                        :name="item.name"
                         :class="item.htmlClass"
-                        :id="item.id || createHtmlId()"
+                        v-bind="item"
                         v-model="formValues[item.name]"
-                        :inputValue="item.inputValue"
-                        :fieldIconClass="item.innerIconClass"
-                        :selectOptions="item.selectOptions"
-                        :toggleSwitch="item.toggleSwitch"
-                        :labelText="item.labelText"
-                        :placeholder="item.placeholder"
-                        :required="item.required"
-                        :disabled="item.disabled"
-                        :autocomplete="item.autocomplete"
-                        :minlength="item.minlength"
-                        :maxlength="item.maxlength"
-                        :nativeButton="item.nativeButton"
-                        :colored="item.colored"
                         @validation-status-change="formElementHasError($event, item.name)"
                     />
-                    <CmdInputGroup
-                        v-else-if="item.component === 'CmdInputGroup'"
+                    <CmdFakeSelect
+                        v-if="item.component === 'CmdFakeSelect'"
+                        :class="item.htmlClass"
+                        v-bind="item"
                         v-model="formValues[item.name]"
-                        :labelText="item.labelText" 
-                        :inputElements="item.inputElements"
-                        :toggleSwitches="item.toggleSwitches"
-                        :colored="item.colored"
                     />
+                    <CmdInputGroup
+                        v-else-if="item.component === 'CmdInputGroup'"
+                        :class="item.htmlClass"
+                        v-bind="item"
+                        v-model="formValues[item.name]"                
+                    /> 
                     <div 
-                        v-else-if="item.component === 'flexContainer'"
-                        class="flex-container"
+                        v-else-if="item.component === 'flexContainer' || item.component === 'inputWrapper'"
+                        :class="item.component === 'flexContainer' ? 'flex-container' : 'input-wrapper'"
                     >
+                        <!-- begin inner loop for formElements inside flex-container/input-wrapper -->
                         <template v-for="(item, index) in item.formElements" :key="index">
                             <CmdFormElement
                                 v-if="!item.component || item.component === 'CmdFormElement'"
                                 :key="index"
-                                :element="item.element || 'input'"
-                                :type="item.type || 'text'"
-                                :name="item.name"
                                 :class="item.htmlClass"
-                                :id="item.id || createHtmlId()"
+                                v-bind="item"
                                 v-model="formValues[item.name]"
-                                :inputValue="item.inputValue"
-                                :toggleSwitch="item.toggleSwitch"
-                                :fieldIconClass="item.innerIconClass"
-                                :selectOptions="item.selectOptions"
-                                :labelText="item.labelText"
-                                :placeholder="item.placeholder"
-                                :required="item.required"
-                                :disabled="item.disabled"
-                                :autocomplete="item.autocomplete"
-                                :minlength="item.minlength"
-                                :maxlength="item.maxlength"
-                                :nativeButton="item.nativeButton"
                                 @validation-status-change="formElementHasError($event, item.name)"
                             />
                             <CmdInputGroup
                                 v-else-if="item.component === 'CmdInputGroup'"
                                 v-model="formValues[item.name]"
-                                :labelText="item.labelText" 
-                                :inputElements="item.inputElements"
-                                :toggleSwitches="item.toggleSwitches"
-                                :colored="item.colored"
+                                v-bind="item"
                             />
                         </template>
+                        <!-- end inner loop for formElements inside flex-container/input-wrapper -->
                     </div>
                 </template>
                 <!-- end loop for formElements -->
 
+                <!-- begin submit- and cancel-button inside fieldset -->
                 <div v-if="submitButtonOptions.show && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null)" class="flex-container no-wrap-on-small-devices">
                     <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>
-                    <!-- begin cancel-button (below fieldset) -->
+                    <!-- begin cancel-button -->
                     <button 
                         v-if="cancelButtonOptions.show"
                         :class="['button', {'stretch-on-small-devices': cancelButtonOptions.stretchOnSmallDevices, disabled: cancelButtonOptions.disabled, cancel: cancelButtonOptions.useDefaultStyling}]" 
@@ -117,23 +92,26 @@
                         <span v-if="cancelButtonOptions.iconClass" :class="cancelButtonOptions.iconClass"></span>
                         <span v-if="cancelButtonOptions.text">{{ cancelButtonOptions.text }}</span>
                     </button>
-                    <!-- end cancel-button (below fieldset) -->
+                    <!-- end cancel-button -->
                     
-                    <!-- begin submit-button (inside fieldset) -->
+                    <!-- begin submit-button -->
                     <button
                         :class="['button', {'stretch-on-small-devices': submitButtonOptions.stretchOnSmallDevices, primary: submitButtonOptions.primary, disabled: submitButtonOptions.disabled}]"
                         :type="submitButtonOptions.type"
+                        @click.prevent="onSubmit"
                     >
                         <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
                         <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
                     </button>
-                    <!-- end submit-button (inside fieldset) -->
+                    <!-- end submit-button -->
                 </div>
+                <!-- end submit- and cancel-button inside fieldset -->
             </fieldset>
 
+            <!-- begin submit- and cancel-button outside/below fieldset -->
             <div v-if="submitButtonOptions.show && submitButtonOptions.position === 'belowFieldset'" class="flex-container no-wrap-on-small-devices">
                 <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>     
-                <!-- begin cancel-button (below fieldset) -->
+                <!-- begin cancel-button-->
                 <button 
                     v-if="cancelButtonOptions.show"
                     :class="['button', {'stretch-on-small-devices': cancelButtonOptions.stretchOnSmallDevices, disabled: cancelButtonOptions.disabled, cancel: cancelButtonOptions.useDefaultStyling}]" 
@@ -143,17 +121,18 @@
                     <span v-if="cancelButtonOptions.iconClass" :class="cancelButtonOptions.iconClass"></span>
                     <span v-if="cancelButtonOptions.text">{{ cancelButtonOptions.text }}</span>
                 </button>
-                <!-- end cancel-button (below fieldset) -->
+                <!-- end cancel-button -->
 
-                <!-- begin submit-button (below fieldset) -->
+                <!-- begin submit-button -->
                 <button v-if="submitButtonOptions.show"
                         :class="['button', {'stretch-on-small-devices': submitButtonOptions.stretchOnSmallDevices, primary: submitButtonOptions.primary, disabled: submitButtonOptions.disabled}]"
                         :type="submitButtonOptions.type || 'submit'">
                     <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
                     <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
                 </button>
-                <!-- end submit-button (below fieldset) -->
+                <!-- end submit-button -->
             </div>
+            <!-- end submit- and cancel-button outside/below fieldset -->
 
             <!-- begin button-row-slot-content -->
             <slot name="button-row"></slot>
@@ -189,6 +168,9 @@ export default {
         }
     },
     props: {
+        /**
+         * model-value for entire form
+         */
         modelValue: {
             type: Object
         },
@@ -299,7 +281,7 @@ export default {
     computed: {
         legendOptions() {
             return {
-                show: true,
+                show: false,
                 align: "left",
                 text: "Legend",
                 ...this.legend
@@ -371,10 +353,10 @@ export default {
                     event.preventDefault()
                     this.errorOccurred = true
                 }
-                } else {
-                    this.submitFormData(event)
-                }
+            } else {
+                this.submitFormData(event)
             }
+        }
     },
     watch: {
         modelValue: {

package/src/components/CmdInputGroup.vue

@@ -59,7 +59,7 @@
                     :value="inputElement.value"
                     v-model="inputValue"
                     :disabled="inputElement.disabled"
-                    :class="{'replace-input-type': replaceInputType}"
+                    :class="[inputElements.htmlClass, {'replace-input-type': replaceInputType}]"
                 />
                 <!-- begin CmdIcon -->
                 <CmdIcon
@@ -109,7 +109,7 @@ export default {
         /**
          * set orientation
          *
-         * @allwoedValues = horizontal, vertical
+         * @allowedValues = horizontal, vertical
          */
         orientation: {
             type: String,
@@ -277,6 +277,8 @@ export default {
                 return
             }
             this.validationStatus = this.status
+
+            this.$emit('validation-status-change', this.validationStatus)
         }
     },
     computed: {
@@ -300,6 +302,7 @@ export default {
             },
             // set/write a value to update v-model for this component
             set(value) {
+                this.$emit('validation-status-change', this.validationStatus)
                 this.$emit("update:modelValue", value)
             }
         }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -4,6 +4,7 @@
         <li v-for="(step, index) in multisteps" :key="index" :class="[errorLinkClass(index), successLinkClass(index)]">
             <!-- begin CmdLink -->
             <CmdLink
+                v-if="stepsCanBeClicked"
                 :linkType="step.linkType"
                 :class="['stretch-on-small-devices', activeLinkClass(index), errorLinkClass(index), successLinkClass(index)]"
                 :styleAsButton="styleAsButtons"
@@ -21,6 +22,14 @@
             </CmdLink>
             <!-- end CmdLink -->
 
+            <template v-else>
+                <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
+                <!-- end CmdIcon -->
+                <span v-if="step.text">{{ step.text }}</span>
+            </template>
+
             <!-- begin separator -->
             <span v-if="index + 1 !== multisteps.length && useGap" :class="['separator', separatorIconClass]"></span>
             <!-- end separator -->
@@ -42,6 +51,13 @@ export default {
         }
     },
     props: {
+        /**
+         * active if steps should be clickable
+         */
+        stepsCanBeClicked: {
+            type: Boolean,
+            default: true
+        },
          /**
          * set highlight-level for steps
          * 
@@ -249,12 +265,6 @@ export default {
 
         &:has(:not(.button)) {
             flex: none;
-
-            &:is(:hover, :active, :focus) {
-                span, span[class*="icon-"] {
-                    color: var(--hyperlink-color);
-                }
-            }
         }
 
         a, button {
@@ -293,12 +303,6 @@ export default {
                 }
             }
 
-            &:hover, &:active, &:focus {
-                .number {
-                    color: var(--hyperlink-color);
-                }
-            }
-
             .number {
                 line-height: 100%;
                 width: 2rem;

package/src/components/CmdMultistepFormWrapper.vue

@@ -32,7 +32,10 @@
             
             <!-- begin slot for last step -->
             <slot 
-                name="last-step"
+                name="page-last"
+                :setErrorOnPage="(message) => setErrorOnPage(step, message)" 
+                :removeErrorOnPage="() => removeErrorOnPage(step)"
+                :atleastOneStepWithError="atleastOneStepWithError"
             />
             <!-- end slot for last step -->
         </div>

package/src/components/CmdTag.vue

@@ -95,7 +95,7 @@ export default {
         margin: 0 auto;
     }
 
-    .primary, .secondary, .tertiary {
+    &.primary, &.secondary, &.tertiary {
         span[class*="icon-"] {
             color: var(--color-white);
         }