comand-component-library 4.2.8 → 4.2.10

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

@@ -72,7 +72,7 @@
     "selectOptions": [
       {
         "text": "Please select...",
-        "value": null
+        "value": ""
       },
       {
         "text": "Option 1",
@@ -88,7 +88,6 @@
       }
     ],
     "labelText": "Select",
-    "placeholder": "Placeholdertext",
     "required": false,
     "disabled": false
   },
@@ -101,7 +100,6 @@
     "value": "checkboxInputValue1",
     "inputValue": "checkboxInputValue1",
     "labelText": "Checkbox",
-    "placeholder": "Placeholdertext",
     "required": false,
     "disabled": false
   },
@@ -113,7 +111,6 @@
     "id": "form-element-checkbox-id2",
     "inputValue": "checkboxInputValue2",
     "labelText": "Checkbox",
-    "placeholder": "Placeholdertext",
     "required": false,
     "disabled": false
   },
@@ -125,7 +122,6 @@
     "id": "form-element-radio-id1",
     "inputValue": "valueRadioButton1",
     "labelText": "Radio",
-    "placeholder": "Placeholdertext",
     "required": false,
     "disabled": false
   },
@@ -138,7 +134,6 @@
     "value": "valueRadioButton2",
     "inputValue": "valueRadioButton2",
     "labelText": "Radio",
-    "placeholder": "Placeholdertext",
     "required": false,
     "disabled": false
   },
@@ -151,6 +146,7 @@
     "labelText": "Textarea",
     "placeholder": "Placeholdertext",
     "required": false,
-    "disabled": false
+    "disabled": false,
+    "maxlength": 500
   }
 ]

package/src/assets/data/switch-language.json

@@ -1,29 +1,32 @@
-[
-  {
-    "iso2": "de",
-    "name": "Deutsch",
-    "tooltip": "Sprache zu deutsch wechseln",
-    "link": {
-      "type": "href",
-      "path": "/"
-    }
-  },
-  {
-    "iso2": "en",
-    "name": "English",
-    "tooltip": "Switch language to English",
-    "link": {
-      "type": "href",
-      "path": "/"
-    }
-  },
-  {
-    "iso2": "es",
-    "name": "Español",
-    "tooltip": "cambiar el idioma a español",
-    "link": {
-      "type": "href",
-      "path": "/"
-    }
-  }
-]
+{
+  "pathFlags": "https://comand-ui.com/samples/images/flags",
+  "languages": [
+{
+"iso2": "de",
+"name": "Deutsch",
+"tooltip": "Sprache zu deutsch wechseln",
+"link": {
+"type": "href",
+"path": "/"
+}
+},
+{
+"iso2": "en",
+"name": "English",
+"tooltip": "Switch language to English",
+"link": {
+"type": "href",
+"path": "/"
+}
+},
+{
+"iso2": "es",
+"name": "Español",
+"tooltip": "cambiar el idioma a español",
+"link": {
+"type": "href",
+"path": "/"
+}
+}
+]
+}

package/src/assets/lists-of-data/.htaccess

@@ -0,0 +1 @@
+Header set Access-Control-Allow-Origin "http://localhost:5175"

package/src/assets/lists-of-data/casual-01.json

@@ -0,0 +1,113 @@
+{
+  "person": {
+    "id": 1,
+    "type": "casual",
+    "imgSrc": "https://comand-ui.com/samples/images/user-images/fake-user-2.jpg",
+    "bgImgSrc": "/images/background-images/background-matrix.jpg",
+    "lastName": "Miller",
+    "middleName": "",
+    "firstName": "Jackson",
+    "birthdate": "1975-07-11",
+    "gender": "m",
+    "profession": "Developer",
+    "countryIso": "de",
+    "companyName": "Big Tech Company",
+    "about": "I am the best developer in my home office",
+    "group": "Friends"
+  },
+  "account": {
+    "online": true,
+    "type": "premium",
+    "created": "2023-03-17"
+  },
+  "tags": [
+    {
+      "name": "Backend Development"
+    },
+    {
+      "name": "Frontend Development",
+      "description": "Frontend Development embraces the visible part of development. This includes primary the structure and its styling of websites combined by some basic logic."
+    },
+    {
+      "name": "Data Migration"
+    }
+  ],
+  "contact": [
+    {
+      "name": "companyName",
+      "iconClass": "icon-company",
+      "data": "Your company name",
+      "labelText": "companyName"
+    },
+    {
+      "name": "address",
+      "iconClass": "icon-home",
+      "labelText": "Address",
+      "streetNo": "Your Street/No",
+      "zip": "Your zip",
+      "city": "Duisburg",
+      "miscInfo": "Misc. info",
+      "country": "de"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-phone",
+      "data": "Your phone number",
+      "labelText": "Telephone",
+      "tooltip": "Call number",
+      "href": "0123456789"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-device-smartphone",
+      "data": "Your mobile phone number",
+      "labelText": "Mobile phone",
+      "tooltip": "Call number",
+      "href": "0123456789"
+    },
+    {
+      "name": "email",
+      "iconClass": "icon-mail",
+      "data": "Your email address",
+      "labelText": "Email",
+      "tooltip": "Send mail",
+      "href": "mail@provider.de"
+    },
+    {
+      "name": "url",
+      "iconClass": "icon-globe",
+      "data": "Your website",
+      "labelText": "Website",
+      "tooltip": "Open website in new tab",
+      "href": "https://www.domain.toplevel"
+    }
+  ],
+  "networks": [
+    {
+      "buttonClass": "social-network-facebook",
+      "iconClass": "icon-facebook",
+      "linkText": "facebook",
+      "path": "https://www.facebook.com",
+      "tooltip": "Visit profile on facebook"
+    },
+    {
+      "buttonClass": "social-network-instagram",
+      "iconClass": "icon-instagram",
+      "linkText": "instagram",
+      "path": "https://www.instagram.com",
+      "tooltip": "Visit profile on instagram"
+    },
+    {
+      "buttonClass": "social-network-linkedin",
+      "iconClass": "icon-linkedin",
+      "linkText": "linkedin",
+      "path": "https://www.linkedin.com",
+      "tooltip": "Visit profile on linkedin"
+    }
+  ],
+  "profileVisibility": {
+    "casual": [],
+    "founder": ["canSeeLocation"],
+    "investor": ["canSeeLocation"]
+  }
+}

package/src/assets/styles/component-library-global-styles.scss

@@ -91,6 +91,12 @@ body.avoid-scrolling {
     width: 3rem;
     background-size: 100% 100%;
     display: block;
+    aspect-ratio: 3/2;
+}
+
+a img.flag {
+    border: 0;
+    outline: var(--default-border);
 }
 
 /* end flags ----------------------------------------------------------------------------------------------------------------------------------------------------- */

package/src/componentSettingsDataAndControls.vue

@@ -311,7 +311,7 @@ data() {
         cmdHeadlineSettingsData: {
             preHeadlineText: "Pre-headline text",
             headlineText: "Headline text",
-            headlineLevel: 1,
+            headlineLevel: 3,
             textAlign: "left"
         },
         cmdHeadlineSettingsControls: {

package/src/components/CmdBox.vue

@@ -582,11 +582,14 @@ export default {
         align-self: auto;
     }
 
-    .box-header .cmd-headline {
-        margin-bottom: 0;
+    .box-header {
+        .cmd-headline {
+            margin-bottom: 0;
+            text-decoration: none;
 
-        &:only-child {
-            width: 100% /* stretch in flex-container */
+            &:only-child {
+                width: 100% /* stretch in flex-container */
+            }
         }
     }
 

package/src/components/CmdFakeSelect.vue

@@ -533,6 +533,18 @@ export default {
         }
     }
 
+    a {
+        gap: calc(var(--icon-and-text-gap) / 2) !important;
+
+        span {
+            text-decoration: none !important;
+
+            &[class*="icon"]:last-child {
+                margin-left: auto !important;
+            }
+        }
+    }
+
     > ul {
         height: var(--form-input-height);
         margin: 0;
@@ -584,7 +596,6 @@ export default {
         }
 
         &.open {
-            border-bottom: 0;
             ul {
                 border-bottom-left-radius: var(--default-border-radius);
                 border-bottom-right-radius: var(--default-border-radius);
@@ -730,9 +741,11 @@ export default {
         > ul {
             > li:first-child {
                 > a {
+                    text-decoration: none !important;
                     border-color: var(--status-color);
 
                     > span, [class*="icon-"] {
+                        text-decoration: none !important;
                         color: var(--status-color);
                     }
 

package/src/components/CmdForm.vue

@@ -3,8 +3,8 @@
           :class="{error: errorOccurred}" :novalidate="novalidate" :method="formMethod">
         <template v-if="useFieldset">
             <fieldset class="flex-container">
-                <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{
-                        legend.text
+                <legend :class="{hidden : !legendOptions.show, 'align-left': legendOptions.align === 'left'}">{{
+                        legendOptions.text
                     }}
                 </legend>
                 <CmdSystemMessage v-if="systemMessage.show && systemMessage.message" :validationStatus="systemMessage.validationStatus" :systemMessage="systemMessage.message"/>
@@ -120,13 +120,7 @@ export default {
          */
         legend: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    align: "left",
-                    text: "Legend"
-                }
-            }
+            required: false
         },
         /**
          * activate if form-elements should be given by slot
@@ -183,6 +177,14 @@ export default {
         }
     },
     computed: {
+        legendOptions() {
+            return {
+                show: true,
+                align: "left",
+                text: "Legend",
+                ...this.legend
+            }
+        },
         submitButtonOptions() {
             return {
                 iconClass: "icon-check",

package/src/components/CmdFormElement.vue

@@ -1006,6 +1006,12 @@ export default {
                 width: 100%;
             }
         }
+
+        .label-text {
+           [class*="icon-"] {
+               top: -.2rem;
+           }
+        }
     }
 
     .search-field-wrapper {