comand-component-library 4.1.90 → 4.1.92

package/src/assets/data/tabs.json

@@ -1,20 +1,20 @@
 [
   {
-    "name": "Tab 1",
+    "text": "Tab 1",
     "headlineText": "Tab 1 Headline",
     "headlineLevel": 4,
     "iconClass": "icomoon-free:airplane",
     "htmlContent": "<p>Content for Tab 1</p>"
   },
   {
-    "name": "Tab 2",
+    "text": "Tab 2",
     "headlineText": "Tab 2 Headline",
     "headlineLevel": 4,
     "iconClass": "icomoon-free:blocked",
     "htmlContent": "<p>Content for Tab  2</p>"
   },
   {
-    "name": "Tab 3",
+    "text": "Tab 3",
     "headlineText": "Tab 3 Headline",
     "headlineLevel": 4,
     "iconClass": "cmd:linkedin",

package/src/componentSettingsDataAndControls.vue

@@ -449,16 +449,15 @@ data() {
             ]
         },
         cmdLoginFormSettingsData: {
-            legendLoginForm: {
-                show: true,
-                align: "left",
-                text: "Login form"
+            cmdHeadlineLoginForm: {
+                headlineText: "Login",
+                headlineLevel: 4
             },
-            legendForgotLoginForm: {
-                show: true,
-                align: "right",
-                text: "Forgot login form"
-            }
+            cmdHeadlineSendLoginForm: {
+                headlineText: "Send Login",
+                headlineLevel: 4
+            },
+            orientation: "horizontal",
         },
         cmdLoginFormSettingsControls: {
             orientation: [
@@ -509,10 +508,6 @@ data() {
         },
         cmdNewsletterSubscriptionSettingsData: {
             buttonType: "submit",
-            legend: {
-                show: true,
-                text: "Stay up-to-date"
-            },
             cmdInputGroup: {
                 inputElements: [
                     {
@@ -615,11 +610,7 @@ data() {
             ],
         },
         cmdSiteSearchSettingsData: {
-            useFilters: true,
-            legend: {
-                show: true,
-                text: "Search"
-            }
+            useFilters: true
         },
         cmdSlideshowSettingsData: {
             useSlot: false,

package/src/components/CmdAddressData.vue

@@ -172,10 +172,11 @@
 </template>
 
 <script>
-import EditMode from "../mixins/EditMode.vue"
-import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js";
+// import functions
+import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
 
 // import mixins
+import EditMode from "../mixins/EditMode.vue"
 
 export default {
     name: "CmdAddressData",

package/src/components/CmdBackToTopButton.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script>
-
 export default {
     name: "CmdBackToTopButton",
     data() {

package/src/components/CmdBasicForm.vue

@@ -263,8 +263,9 @@
 // import mixins
 import I18n from "../mixins/I18n.js"
 import DefaultMessageProperties from "../mixins/CmdBasicForm/DefaultMessageProperties.js"
-import {ContactFormValidator} from "../utils/ContactFormValidation.js"
 
+// import functions
+import {ContactFormValidator} from "../utils/ContactFormValidation.js"
 import {openFancyBox} from "./CmdFancyBox.vue"
 
 export default {

package/src/components/CmdForm.vue

@@ -37,19 +37,22 @@
                 />
                 <!-- end loop for formElements -->
 
-                <!-- begin submit-button (inside fieldset) -->
-                <button
-                    v-if="submitButtonOptions && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null) "
-                    :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}, {disabled: submitButtonOptions.disabled}]"
-                    :type="submitButtonOptions.type"
-                >
-                    <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
-                    <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
-                </button>
-                <!-- end submit-button (inside fieldset) -->
+                <div v-if="submitButtonOptions && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null)" class="flex-container">
+                    <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>
+                    <!-- begin submit-button (inside fieldset) -->
+                    <button
+                        :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}, {disabled: submitButtonOptions.disabled}]"
+                        :type="submitButtonOptions.type"
+                    >
+                        <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
+                        <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
+                    </button>
+                    <!-- end submit-button (inside fieldset) -->
+                </div>
             </fieldset>
 
             <div v-if="submitButtonOptions && submitButtonOptions.position === 'belowFieldset'" class="button-wrapper">
+                <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>
                 <!-- begin submit-button (below fieldset) -->
                 <button :class="['button stretch-on-small-devices', {primary: submitButtonOptions.primary}, {disabled: submitButtonOptions.disabled}]"
                         :type="submitButtonOptions.type || 'submit'">
@@ -170,6 +173,13 @@ export default {
         submitButton: {
             type: Object,
             required: false
+        },
+        /**
+         * text to clarify which inputs are mandatory
+         */
+        mandatoryText: {
+            type: String,
+            default: "mandatory inputs"
         }
     },
     computed: {
@@ -284,6 +294,14 @@ export default {
         }
     }
 
+    .mandatory-text {
+        sup {
+            color: var(--primary-color);
+            font-size: 1.5rem;
+            top: 0;
+        }
+    }
+
     .button, .button:last-child {
         margin-left: auto;
     }

package/src/components/CmdFormElement.vue

@@ -71,7 +71,6 @@
             <!-- begin inputfield -->
             <template v-if="element === 'input' && $attrs.type !== 'search'">
                 <input
-                    v-bind="elementAttributes"
                     :id="htmlId"
                     :class="inputClass"
                     @focus="tooltip = true"
@@ -83,8 +82,10 @@
                     :autocomplete="autocomplete"
                     :list="datalist ? datalist.id : null"
                     :value="modelValue"
+                    :minlength="$attrs.type === 'password' ? '8' : null"
                     :maxlength="getMaxLength()"
                     ref="input"
+                    v-bind="elementAttributes"
                 />
             </template>
             <!-- end inputfield -->
@@ -829,8 +830,11 @@ export default {
             const useValidation = event.target.closest("form")?.dataset.useValidation === "true"
 
             if (useValidation) {
+                // get value from input-element
+                const value = event.target.value
+
                 // if input is filled, set status to success (expect for checkboxes and radiobuttons)
-                if (!["checkbox", "radio"].includes(this.$attrs.type) && this.modelValue) {
+                if (!["checkbox", "radio"].includes(this.$attrs.type) && value) {
                     this.validationStatus = "success"
                 }
 
@@ -840,7 +844,7 @@ export default {
                     if (this.customRequirements) {
                         // check if customRequirement returns invalid result
                         const invalidCustomRequirement = this.customRequirements.some(requirement => {
-                            return !requirement.valid(this.modelValue)
+                            return !requirement.valid(value)
                         })
 
                         // set validation-status if invalidCustomRequirement returns at least one invalid entry

package/src/components/CmdGoogleMaps.vue

@@ -95,8 +95,12 @@ export default {
     border: var(--default-border);
     border-radius: var(--default-border-radius);
 
+    &:hover, &:active, &:focus {
+        border-color: var(--hyperlink-color-highlighted);
+    }
+
     iframe {
-        border-radius: var(--default-border-radius);
+        border-radius: inherit;
     }
 
     .cmd-system-message {

package/src/components/CmdImage.vue

@@ -105,7 +105,7 @@
     <!-- end image with figure/figcaption -->
 
     <!-- begin image without figure/figcaption -->
-    <img v-else :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
+    <img v-else class="cmd-image" :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
     <!-- end image without figure/figcaption -->
     <!-- end default-view -->
 </template>

package/src/components/CmdInputGroup.vue

@@ -322,7 +322,7 @@ export default {
     /* overwrite default behavior from frontend-framework */
     > .label-text {
         display: inline-flex;
-        margin-bottom: calc(var(--default-margin) / 2);
+        margin: 0;
 
         > span + a:has([class*="icon-"]) {
             margin-left: calc(var(--default-margin) / 2);

package/src/components/CmdLoginForm.vue

@@ -73,21 +73,22 @@
 
             <!-- begin link-type 'button' -->
             <button
-                v-if="buttonLoginOptions.linkType === 'button'"
-                :type="buttonLoginOptions.type === 'submit' ? 'submit' : 'button'"
-                :class="['button', { primary: buttonLoginOptions.primary }]"
+                v-if="buttonLoginDefaultOptions.linkType === 'button'"
+                :type="buttonLoginDefaultOptions.type === 'submit' ? 'submit' : 'button'"
+                v-bind="buttonLoginOptions"
+                :class="['button', { primary: buttonLoginDefaultOptions.primary }]"
                 @click="onClick"
                 :disabled="buttonLoginDisabled"
             >
                 <!-- begin CmdIcon -->
                 <CmdIcon
-                    v-if="buttonLoginOptions.icon.iconClass"
-                    :iconClass="buttonLoginOptions.icon.iconClass"
-                    :type="buttonLoginOptions.icon.iconType"
-                    :title="buttonLoginOptions.icon.tooltip"
+                    v-if="buttonLoginDefaultOptions.icon.iconClass"
+                    :iconClass="buttonLoginDefaultOptions.icon.iconClass"
+                    :type="buttonLoginDefaultOptions.icon.iconType"
+                    :title="buttonLoginDefaultOptions.icon.tooltip"
                 />
                 <!-- end CmdIcon -->
-                <span v-if="buttonLoginOptions.text">{{ buttonLoginOptions.text }}</span>
+                <span v-if="buttonLoginDefaultOptions.text">{{ buttonLoginDefaultOptions.text }}</span>
             </button>
             <!-- begin link-type 'button' -->
         </div>
@@ -120,23 +121,25 @@
         <!-- end slot for send-login-form -->
 
         <div class="option-wrapper flex-container">
-            <a v-if="linkForgotPassword" href="#" @click.prevent="toggleSendLoginView">
+            <a href="#" @click.prevent="toggleSendLoginView">
                 <!-- begin CmdIcon -->
                 <CmdIcon
-                    v-if="linkForgotPassword && linkForgotPassword.icon && linkForgotPassword.icon.show && linkForgotPassword.icon.iconClass"
-                    :iconClass="linkForgotPassword.icon.iconClass"
-                    :type="linkForgotPassword.icon.iconType"
-                    :title="linkForgotPassword.icon.tooltip"
+                    v-if="linkBackToLogin.icon && linkBackToLogin.icon.show && linkBackToLogin.icon.iconClass"
+                    :iconClass="linkBackToLogin.icon.iconClass"
+                    :type="linkBackToLogin.icon.iconType"
+                    :title="linkBackToLogin.icon.tooltip"
                 />
                 <!-- end CmdIcon -->
-                <span v-if="linkForgotPassword.text">
-                  {{ linkForgotPassword.text }}
+
+                <span>
+                    {{linkBackToLogin.text}}
                 </span>
             </a>
 
             <!-- begin link-type 'button' -->
             <button
                 v-if="buttonSendLoginOptions.linkType === 'button'"
+                v-bind="buttonSendLoginOptions"
                 :type="buttonSendLoginOptions.type === 'submit' ? 'submit' : 'button'"
                 :class="['button', { primary: buttonSendLoginOptions.primary }]"
                 :disabled="buttonSendLoginDisabled"
@@ -221,8 +224,8 @@ export default {
             default() {
                 return {
                     show: true,
-                    align: 'right"',
-                    text: 'Forgot login form'
+                    align: "right",
+                    text: "Forgot login form"
                 }
             }
         },
@@ -286,6 +289,9 @@ export default {
                 }
             }
         },
+        /**
+         * define link to create an account (that is linked to a register-form i.e.)
+         */
         linkCreateAccount: {
             type: Object,
             default() {
@@ -301,7 +307,10 @@ export default {
                 }
             }
         },
-        linkBackToLoginForm: {
+        /**
+         * define link from "forgot-login-form"-view back to the default login-form
+         */
+        linkBackToLogin: {
             type: Object,
             default() {
                 return {
@@ -310,7 +319,7 @@ export default {
                         iconClass: "icon-chevron-one-stripe-left",
                         tooltip: ""
                     },
-                    text: "Back to login form"
+                    text: "Back to login"
                 }
             }
         },
@@ -367,7 +376,7 @@ export default {
                 ...this.cmdFormElementSendLogin
             }
         },
-        buttonLoginOptions() {
+        buttonLoginDefaultOptions() {
             return {
                 linkType: "button", /* href, router, button */
                 type: "submit", /* submit, button */
@@ -382,6 +391,12 @@ export default {
                 ...this.buttonLogin
             }
         },
+        buttonLoginOptions() {
+            return {
+                type: "submit",
+                ...this.buttonLogin
+            }
+        },
         buttonSendLoginOptions() {
             return {
                 linkType: "button", /* href, router, button */

package/src/components/CmdMailTool.vue

@@ -0,0 +1,151 @@
+<template>
+    <CmdTabs class="cmd-mail-tool" v-bind="cmdTabs">
+        <!-- begin tab "inbox" -->
+        <template v-slot:tab-content-0>
+            <!-- begin CmdMailToolFilter (for inbox) -->
+            <CmdMailToolFilter v-bind="cmdMailToolFilterInbox" v-model="searchFilters"/>
+            <!-- end CmdMailToolFilter -->
+
+            <!-- begin CmdMailToolEntry -->
+            <CmdMailToolEntry :mails="filteredMailsInbox"/>
+            <!-- end CmdMailToolEntry (for inbox) -->
+        </template>
+        <!-- end tab "inbox" -->
+
+        <!-- begin tab "outbox" -->
+        <template v-slot:tab-content-1>
+            <!-- begin CmdMailToolFilter (for outbox) -->
+            <CmdMailToolFilter v-bind="cmdMailToolFilterOutbox" boxType="outbox"/>
+            <!-- end CmdMailToolFilter (for outbox) -->
+
+            <!-- begin CmdMailToolEntry -->
+            <CmdMailToolEntry boxType="outbox" :mails="mailsOutbox"/>
+            <!-- end CmdMailToolEntry -->
+        </template>
+        <!-- end tab "outbox" -->
+    </CmdTabs>
+</template>
+
+<script>
+
+export default {
+    name: "CmdMailTool",
+    data() {
+        return {
+            searchFilters: {
+                searchFilterText: "",
+                searchFilterOptions: ["senders", "subjects"]
+            }
+        }
+    },
+    props: {
+        /**
+         * array of mails for inbox
+         *
+         * required-structure for entries:
+         * {
+         *     cmdImage: Object (structure for CmdImage-component used for image of contact)
+         *     contactFullName: String
+         *     subject: String
+         *     isoDate: String (formatted as iso-date: YYYY-MM-DD)
+         *     time: String (formatted as time: HH:MM)
+         * }
+         */
+        mailsInbox: {
+            type: Array,
+            required: true
+        },
+        /**
+         * array of mails for outbox
+         *
+         * required-structure for entries:
+         * {
+         *     cmdImage: Object (structure for CmdImage-component used for image of contact)
+         *     contactFullName: String
+         *     subject: String
+         *     isoDate: String (formatted as iso-date: YYYY-MM-DD)
+         *     time: String (formatted as time: HH:MM)
+         * }
+         */
+        mailsOutbox: {
+            type: Array,
+            required: true
+        },
+        /**
+         * properties for CmdTabs-component
+         */
+        cmdTabs: {
+            type: Object,
+            default() {
+                return {
+                    tabs: [
+                        {
+                            "text": "Inbox",
+                            "headlineText": "Inbox",
+                            "headlineLevel": 4,
+                            "iconClass": "icon-inbox"
+                        },
+                        {
+                            "text": "Outbox",
+                            "headlineText": "Outbox",
+                            "headlineLevel": 4,
+                            "iconClass": "icon-outbox"
+                        }
+                    ],
+                    useSlot: true,
+                    stretchTabs: true,
+                    useDefaultPadding: false
+                }
+            }
+        },
+        cmdMailToolFilterInbox: {
+            type: Object,
+            default() {
+                return {}
+            }
+        },
+        /**
+         * define properties for CmdHeadline-component for inbox
+         */
+        cmdMailToolFilterOutbox: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "Outbox",
+                    headlineLevel: 4,
+                }
+            }
+        }
+    },
+    computed: {
+        filteredMailsInbox() {
+            if (this.searchFilters.searchFilterText === "") {
+                return this.mailsInbox
+            }
+
+            if (this.searchFilters.searchFilterOptions.length) {
+                return this.mailsInbox.filter((mail) => {
+                    let s1 = false
+                    let s2 = false
+
+                    if (this.searchFilters?.searchFilterOptions?.includes("senders")) {
+                        s1 = mail.contactFullName.toLowerCase().includes(this.searchFilters?.searchFilterText?.toLowerCase())
+                    }
+                    if (this.searchFilters?.searchFilterOptions?.includes("subjects")) {
+                        s2 = mail.subject.toLowerCase().includes(this.searchFilters?.searchFilterText?.toLowerCase())
+                    }
+
+                    return s1 || s2
+                })
+            }
+            return []
+        }
+    }
+}
+</script>
+
+<style>
+.cmd-mail-tool {
+
+}
+</style>