comand-component-library 4.2.9 → 4.2.11

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": "Casual",
+    "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/lists-of-data/founder-01.json

@@ -0,0 +1,111 @@
+{
+  "person": {
+    "id": 1,
+    "type": "founder",
+    "imgSrc": "https://comand-ui.com/samples/images/user-images/fake-user-6.jpg",
+    "bgImgSrc": "/images/background-images/background-abstract-1.jpg",
+    "lastName": "Founder",
+    "middleName": "",
+    "firstName": "Michael",
+    "birthdate": "1985-08-12",
+    "gender": "m",
+    "profession": "Marketing",
+    "countryIso": "de",
+    "companyName": "The Next Unicorn Inc.",
+    "about": "Making the world better step by step!",
+    "group": "Friends"
+  },
+  "account": {
+    "online": true,
+    "type": "premium",
+    "created": "2023-03-17"
+  },
+  "tags": [
+    {
+      "name": "Marketing"
+    },
+    {
+      "name": "Sales"
+    },
+    {
+      "name": "Procurement"
+    }
+  ],
+  "contact": [
+    {
+      "name": "companyName",
+      "iconClass": "icon-company",
+      "data": "Your company name",
+      "labelText": "companyName"
+    },
+    {
+      "name": "address",
+      "iconClass": "icon-location-set",
+      "labelText": "Address",
+      "streetNo": "Your Street/No",
+      "zip": "Your zip",
+      "city": "Grevenbroich",
+      "miscInfo": "Misc. info",
+      "country": "de",
+      "tooltip": "Open address on GoogleMaps™ (in new tab)"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-phone",
+      "data": "Your phone number",
+      "labelText": "Telephone",
+      "tooltip": "Call number",
+      "href": "00492181818123"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-device-smartphone",
+      "data": "Your mobile phone number",
+      "labelText": "Mobile phone",
+      "tooltip": "Call number",
+      "href": "00491721055725"
+    },
+    {
+      "name": "email",
+      "iconClass": "icon-mail",
+      "data": "Your email address",
+      "labelText": "Email",
+      "tooltip": "Send mail",
+      "href": "biock@biock.com"
+    },
+    {
+      "name": "url",
+      "iconClass": "icon-globe",
+      "data": "Your web site",
+      "labelText": "Web site",
+      "tooltip": "Open website in browser",
+      "href": "https://www.biock.com"
+    }
+  ],
+  "networks": [
+    {
+      "buttonClass": "social-network-facebook",
+      "iconClass": "icon-facebook",
+      "type": "href",
+      "path": "https://www.facebook.com",
+      "target": "_blank",
+      "tooltip": "Visit profile on facebook"
+    },
+    {
+      "buttonClass": "social-network-x",
+      "iconClass": "icon-x",
+      "type": "href",
+      "path": "https://www.twitter.com",
+      "target": "_blank",
+      "tooltip": "Visit profile on X"
+    },
+    {
+      "buttonClass": "social-network-linkedin",
+      "iconClass": "icon-linkedin",
+      "type": "href",
+      "path": "https://www.linkedin.com",
+      "target": "_blank",
+      "tooltip": "Visit profile on linkedin"
+    }
+  ]
+}

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

@@ -0,0 +1,114 @@
+{
+  "person": {
+    "id": 1,
+    "type": "investor",
+    "imgSrc": "/images/user-images/fake-user-1.jpg",
+    "bgImgSrc": "/images/background-images/golden-gate-bridge.jpg",
+    "imgStyle": "color",
+    "lastName": "Investor",
+    "middleName": "",
+    "firstName": "Julia",
+    "birthdate": "1980-12-22",
+    "gender": "f",
+    "countryIso": "de",
+    "gmt": "+1",
+    "profession": "Owner",
+    "companyName": "VC Investments",
+    "companyLink": "",
+    "about": "I am a great investor!"
+  },
+  "account": {
+    "online": true,
+    "type": "premium",
+    "isMyAccount": true,
+    "created": "2023-03-18"
+  },
+  "tags": [
+    {
+      "name": "Trainings"
+    },
+    {
+      "name": "Investment"
+    },
+    {
+      "name": "Fundings"
+    }
+  ],
+  "contact": [
+    {
+      "name": "companyName",
+      "iconClass": "icon-company",
+      "data": "Your company name",
+      "labelText": "companyName"
+    },
+    {
+      "name": "address",
+      "iconClass": "icon-location-set",
+      "labelText": "Address",
+      "streetNo": "Your Street/No",
+      "zip": "Your zip",
+      "city": "San Francisco",
+      "miscInfo": "Misc. info",
+      "country": "de",
+      "tooltip": "Open address on GoogleMaps™ (in new tab)"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-phone",
+      "data": "Your phone number",
+      "labelText": "Telephone",
+      "tooltip": "Call number",
+      "href": "00492181818123"
+    },
+    {
+      "name": "phone",
+      "iconClass": "icon-device-smartphone",
+      "data": "Your mobile phone number",
+      "labelText": "Mobile phone",
+      "tooltip": "Call number",
+      "href": "00491721055725"
+    },
+    {
+      "name": "email",
+      "iconClass": "icon-mail",
+      "data": "Your email address",
+      "labelText": "Email",
+      "tooltip": "Send mail",
+      "href": "biock@biock.com"
+    },
+    {
+      "name": "url",
+      "iconClass": "icon-globe",
+      "data": "Your web site",
+      "labelText": "Web site",
+      "tooltip": "Open website in browser",
+      "href": "https://www.biock.com"
+    }
+  ],
+  "networks": [
+    {
+      "buttonClass": "social-network-facebook",
+      "iconClass": "icon-facebook",
+      "type": "href",
+      "path": "https://www.facebook.com",
+      "target": "_blank",
+      "tooltip": "Visit profile on facebook"
+    },
+    {
+      "buttonClass": "social-network-x",
+      "iconClass": "icon-x",
+      "type": "href",
+      "path": "https://www.twitter.com",
+      "target": "_blank",
+      "tooltip": "Visit profile on X"
+    },
+    {
+      "buttonClass": "social-network-linkedin",
+      "iconClass": "icon-linkedin",
+      "type": "href",
+      "path": "https://www.linkedin.com",
+      "target": "_blank",
+      "tooltip": "Visit profile on linkedin"
+    }
+  ]
+}

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

@@ -359,11 +359,11 @@ export default {
 
             // set default-tooltip if customTooltip is not set
             if (this.validationStatus === 'error') {
-                return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
+                return this.getMessage("form_element.validation_tooltip.an_error_occurred")
             } else if (this.validationStatus === 'success') {
-                return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
+                return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
             }
-            return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
+            return this.getMessage("form_element.validation_tooltip.open_field_requirements")
         },
         // get the displayed option name
         optionName() {
@@ -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; /* overwrite default settings from frontend-framework */
+            }
+        }
+    }
+
     > ul {
         height: var(--form-input-height);
         margin: 0;
@@ -567,7 +579,7 @@ export default {
                     }
 
                     > [class*="icon-"]:last-child {
-                        margin-left: auto;
+                        margin-left: auto !important; /* overwrite default settings from frontend-framework */
                         font-size: var(--icon-size-small);
                     }
 
@@ -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 {

package/src/components/CmdInputGroup.vue

@@ -272,11 +272,11 @@ export default {
 
             // set default-tooltip if customTooltip is not set
             if (this.validationStatus === 'error') {
-                return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
+                return this.getMessage("form_element.validation_tooltip.an_error_occurred")
             } else if (this.validationStatus === 'success') {
-                return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
+                return this.getMessage("form_element.validation_tooltip.information_is_filled_correctly")
             }
-            return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
+            return this.getMessage("form_element.validation_tooltip.open_field_requirements")
         },
         inputValue: {
             // read inputValue
@@ -322,7 +322,6 @@ export default {
     /* overwrite default behavior from frontend-framework */
     > .label-text {
         display: inline-flex;
-        margin: 0;
 
         > span + a:has([class*="icon-"]) {
             margin-left: calc(var(--default-margin) / 2);

package/src/components/CmdListOfRequirements.vue

@@ -2,7 +2,7 @@
     <div class="cmd-list-of-requirements">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="showHeadline" :headline-level="cmdHeadline.headlineLevel">
-             {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
+             {{ headlineRequirements }}<template v-if="labelText"><br/>"{{ labelText }}"</template>
         </CmdHeadline>
         <!-- end CmdHeadline -->
 
@@ -159,22 +159,22 @@ export default {
         }
 
         .error, .error span {
-            --status-color: var(--error-color);
+            --status-color: var(--error-color) !important; /* assure status-color is not overwritten by form-element-status */
         }
 
         .warning, .warning span {
-            --status-color: var(--warning-color);
+            --status-color: var(--warning-color) !important; /* assure status-color is not overwritten by form-element-status */
         }
 
         .success, .success span {
-            --status-color: var(--success-color);
+            --status-color: var(--success-color) !important; /* assure status-color is not overwritten by form-element-status */
         }
 
         .info, .info span {
-            --status-color: var(--info-color);
+            --status-color: var(--info-color) !important; /* assure status-color is not overwritten by form-element-status */
         }
 
-        dt {
+        dt, dt span[class*="icon-"] {
             color: var(--status-color);
         }