comand-component-library 4.2.10 → 4.2.12

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

@@ -4,7 +4,7 @@
     "type": "casual",
     "imgSrc": "https://comand-ui.com/samples/images/user-images/fake-user-2.jpg",
     "bgImgSrc": "/images/background-images/background-matrix.jpg",
-    "lastName": "Miller",
+    "lastName": "Casual",
     "middleName": "",
     "firstName": "Jackson",
     "birthdate": "1975-07-11",

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/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() {
@@ -540,7 +540,7 @@ export default {
             text-decoration: none !important;
 
             &[class*="icon"]:last-child {
-                margin-left: auto !important;
+                margin-left: auto !important; /* overwrite default settings from frontend-framework */
             }
         }
     }
@@ -579,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);
                     }
 

package/src/components/CmdForm.vue

@@ -304,7 +304,7 @@ export default {
         }
     }
 
-    .button, .button:last-child {
+    [type="submit"].button {
         margin-left: auto;
     }
 

package/src/components/CmdImageZoom.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-image-zoom flex-container">
         <!-- begin small image -->
-        <a href="#" class="no-flex thumbnails-imagezoom" :title="imageSmall.image.tooltip">
+        <a href="#" class="no-flex thumbnail-imagezoom" :title="imageSmall.image.tooltip">
             <!-- begin CmdImage for small image -->
             <CmdImage v-bind="imageSmall" :figcaption="{}"
                 @mouseover="onMouseOver"
@@ -9,16 +9,17 @@
                 @mouseout="onMouseOut"
             />
             <!-- end CmdImage for small image -->
+            <div class="zoom-overlay"></div>
         </a>
         <!-- end small image -->
 
         <!-- begin large image -->
-        <div  class="zoom-container">
+        <div class="zoom-container">
             <!-- begin CmdImage for large image -->
             <CmdImage v-bind="imageLarge" :useFigureTag="false" />
             <!-- end CmdImage for large image -->
         </div>
-        <div class="zoom-overlay"></div>
+
         <!-- end large image -->
     </div>
 </template>
@@ -77,8 +78,8 @@ function positionOverlay(vm, e) {
     const largeImageWidth = largeImage.getBoundingClientRect().width
     const largeImageHeight = largeImage.getBoundingClientRect().height
 
-    const mouseX = e.pageX - e.target.getBoundingClientRect().x - window.pageXOffset
-    const mouseY = e.pageY - e.target.getBoundingClientRect().y - window.pageYOffset
+    const mouseX = e.pageX - e.target.getBoundingClientRect().x - window.scrollX
+    const mouseY = e.pageY - e.target.getBoundingClientRect().y - window.scrollY
 
     const overlayWidth = Math.min(smallImageWidth, largeImageContainer.getBoundingClientRect().width / largeImageWidth * smallImageWidth)
     const overlayHeight = Math.min(smallImageHeight, largeImageContainer.getBoundingClientRect().height / largeImageHeight * smallImageHeight)
@@ -115,12 +116,16 @@ function clamp(value, min, max) {
 .cmd-image-zoom {
     overflow: hidden;
 
+    .thumbnail-imagezoom {
+        align-self: flex-start;
+    }
+
     .zoom-container {
-        display: block !important;
         overflow: hidden;
 
         > img {
             max-width: none;
+            max-height: none;
         }
     }
 
@@ -133,5 +138,26 @@ function clamp(value, min, max) {
     }
 }
 
+</style>
+
+<style lang="scss">
+@import '../assets/styles/variables';
+
+@media only screen and (max-width: $small-max-width) {
+    .cmd-image-zoom {
+        .thumbnail-imagezoom {
+            align-self: center;
+        }
+
+        .zoom-container {
+            max-height: 40vh;
+            flex: none;
+
+            > img {
+                max-height: none;
+            }
+        }
+    }
+}
 /* end cmd-imagezoom ------------------------------------------------------------------------------------------ */
-</style>
+</style>

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/CmdLink.vue

@@ -23,7 +23,7 @@
     <!-- end router-link -->
 
     <!-- begin button -->
-    <button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')" :title="icon?.tooltip">
+    <button v-else-if="linkType === 'button' || linkType === 'submit'" :class="['cmd-link button', {'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" type="submit" @click="emitClick($event, 'button')" :title="icon?.tooltip">
         <CmdInnerLink :text="text" :icon="icon" :image="image">
             <slot></slot>
         </CmdInnerLink>
@@ -48,7 +48,8 @@ export default {
             validator(value) {
                 return value === "href" ||
                     value === "router" ||
-                    value === "button"
+                    value === "button" ||
+                    value === "submit"
             }
         },
         /**

package/src/components/CmdListOfImages.vue

@@ -6,7 +6,7 @@
     ]">
         <!-- begin cmd-headline -->
         <CmdHeadline
-            v-if="cmdHeadline?.headlineText || editModeContext"
+            v-if="cmdHeadline?.headlineText"
             v-bind="cmdHeadline"
         />
         <!-- end cmd-headline -->
@@ -32,7 +32,7 @@
 
 <script>
 // import mixins (editMode only)
-// import EditMode from "../mixins/EditMode.vue"
+import EditMode from "../mixins/EditMode.vue"
 
 // import utils (editMode only)
 // import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
@@ -40,7 +40,7 @@
 export default {
     name: "CmdListOfImages",
     emits: ["click"],
-//   mixins: [EditMode],
+    //mixins: [EditMode],
     props: {
         /**
          * style component like a box
@@ -80,7 +80,7 @@ export default {
         }
     },
     methods: {
-        /*
+/*
         onAddItem() {
             this.editModeContext.content.addContent(
                 buildComponentPath(this, 'props', 'links', -1),
@@ -107,7 +107,7 @@ export default {
                 }
             })
         }
-         */
+*/
     }
 }
 </script>

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);
         }