comand-component-library 4.3.2 → 4.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.2",
+  "version": "4.3.4",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.3.28",
+    "comand-frontend-framework": "^4.3.29",
     "comand-ui-iconfonts": "^1.0.19",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",

package/src/ComponentLibrary.vue

@@ -149,7 +149,7 @@
             </template>
         </CmdSidebar>
         <!-- begin site-header ------------------------------------------------------------------------------------------->
-        <CmdSiteHeader :sticky="true">
+        <CmdSiteHeader :sticky="true" :resizeHeaderOnScroll="true" :cmdCompanyLogo="companyLogoData">
             <template v-slot:top-header>
                 <!-- begin list ------------------------------------------------------------------------------------------->
                 <CmdList :links="listData" orientation="horizontal" align="right" />
@@ -157,7 +157,7 @@
             </template>
             <template v-slot:logo>
                 <!-- begin company-logo ------------------------------------------------------------------------------------------->
-                <CmdCompanyLogo v-bind="companyLogoData" />
+                <!-- CmdCompanyLogo v-bind="companyLogoData" --/>
                 <!-- end company-logo ------------------------------------------------------------------------------------------->
             </template>
         </CmdSiteHeader>
@@ -285,9 +285,10 @@
                                 placeholder="Type in username" tooltipText="This is a tooltip!" maxlength="100"
                                 v-model="inputUsername" :status="validationStatus" :disabled="disabledStatus" />
                             <CmdFormElement element="input" labelText="Label for password-field:" type="password"
+                                :required="true"
                                 minlength="8" maxlength="255" id="inputfield-password"
                                 fieldIconClass="icon-security-settings" placeholder="Type in password"
-                                tooltipText="This is a tooltip!" :customRequirements="customRequirements"
+                                tooltipText="This is a tooltip!" :customRequirements="customRequirements.filter((_ , index) => index !== 2)"
                                 v-model="inputPassword" :status="validationStatus" :disabled="disabledStatus" />
                         </div>
                         <!-- end inputfield in two columns -->
@@ -2637,6 +2638,7 @@ export default {
             flex-direction: column;
             gap: var(--default-gap);
             padding: var(--default-padding);
+            align-items: center;
 
             .button {
                 align-self: center;

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

@@ -163,7 +163,8 @@
         "labelText": "Input Group (Checkbox):",
         "toggleSwitches": true,
         "inputTypes": "checkbox",
-        "value": "checkbox-website",
+        "value": ["checkbox-website"],
+        "name": "input-group-checkboxes",
         "inputElements": [
           {
             "labelText": "Website",
@@ -193,6 +194,7 @@
         "labelText": "Input Group (Radio):",
         "toggleSwitches": true,
         "value": "radio-website",
+        "name": "input-group-radiobuttons",
         "inputElements": [
           {
             "labelText": "Website",

package/src/components/CmdForm.vue

@@ -31,9 +31,9 @@
                 <!-- begin default-slot-content -->
                 <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
-
                 <!-- begin loop for formElements -->
                 <template v-else v-for="(item, index) in formElements" :key="index">
+                 
                     <CmdFormElement
                         v-if="!item.component || item.component === 'CmdFormElement'"
                         :key="index"
@@ -54,6 +54,7 @@
                         v-bind="item"
                         v-model="formValues[item.name]"                
                     /> 
+              
                     <div 
                         v-else-if="item.component === 'flexContainer' || item.component === 'inputWrapper'"
                         :class="item.component === 'flexContainer' ? 'flex-container' : 'input-wrapper'"
@@ -344,7 +345,15 @@ export default {
             // fill form-data with names and value
             let formdata = {}
             if (this.formElements) {
+                // iterate form-elements in flex-containers and input-wrappers to get their names and values
                 this.formElements.forEach((element) => {
+                    if(element.component === 'flexContainer' || element.component === 'inputWrapper') {
+                        element.formElements.forEach(innerElement => {
+                            formdata[innerElement.name] = this.formValues[innerElement.name]
+                        })
+                        return
+                    }
+
                     formdata[element.name] = this.formValues[element.name]
                 })
             }
@@ -410,6 +419,26 @@ export default {
         formElements: {
             handler() {
                 this.formElements?.forEach(element => {
+                    // iterate form-elements inside flex-containers and input-wrappers
+                    if(element.component === 'flexContainer' || element.component === 'inputWrapper') {
+                        element.formElements.forEach(innerElement => {
+                            if (innerElement.type === "checkbox") {
+                                // create array if element is a checkbox (to contain several values)
+                                if (!this.formValues[innerElement.name]) {
+                                    this.formValues[innerElement.name] = []
+                                }
+
+                                if (innerElement.value != null) {
+                                    this.formValues[innerElement.name].push(innerElement.value)
+                                }
+                            } else {
+                                this.formValues[innerElement.name] = innerElement.value ?? ""
+                            }
+                        })
+                        return
+                    }
+                
+                    // iterate form-elements on main-level
                     if (element.type === "checkbox") {
                         // create array if element is a checkbox (to contain several values)
                         if (!this.formValues[element.name]) {

package/src/components/CmdFormElement.vue

@@ -232,6 +232,16 @@ export default {
         }
     },
     props: {
+         /**
+         * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
+         */
+         modelValue: {
+            type: [String, Boolean, Array, Number],
+            default: ""
+        },
+        /**
+         * group entries of selectbox by first letter of its options
+         */
         groupSelectOptionsByInitialLetters: {
             type: Boolean,
             default: false
@@ -243,13 +253,6 @@ export default {
             type: String,
             required: false
         },
-        /**
-         * set value for v-model (must be named modelValue in vue3 if default v-model should be used)
-         */
-        modelValue: {
-            type: [String, Boolean, Array, Number],
-            default: ""
-        },
         /**
          * set type of native form-element
          *

package/src/components/CmdInputGroup.vue

@@ -2,7 +2,7 @@
     <!-- begin CmdInputGroup ---------------------------------------------------------------------------------------- -->
     <div :class="[
         'cmd-input-group label',
-        $attrs.required ? validationStatus : null,
+        required ? validationStatus : null,
         {
             'has-state': validationStatus,
             inline: labelInline,
@@ -359,14 +359,17 @@ export default {
             --status-color: var(--hyperlink-color);
         }
 
+        .label-text span {
+                color: var(--status-color);
+            }
+
         &.error {
             --status-color: var(--error-color);
+
+            /* labels for checkboxes and radiobuttons */
+   
         }
 
-/*
-        label, span, [class*="icon-"]  {
-            color: var(--status-color);
-        }*/
 
         &.multiple-switch {
             &.error {
@@ -380,7 +383,7 @@ export default {
                     }
 
                     &:is(:hover, :active, :focus) {
-                        [class*="icon-"] {
+                        > * {
                             color: var(--hyperlink-color-highlighted);
                         }
                     }

package/src/components/CmdSiteHeader.vue

@@ -158,7 +158,10 @@ export default {
     },
     methods: {
         onImageLoaded(event) {
-            this.defaultLogoHeight = (event.target.height / 10) + "rem"
+            if(!this.useGrid) {
+                // image should must have height to bi visible as flex-item (else size is 0x0)
+                this.defaultLogoHeight = (event.target.height / 10) + "rem"
+            }
         },
         emitOffcanvasStatus(event) {
             this.$emit("offcanvas", event)