comand-component-library 4.1.91 → 4.1.92

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/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/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>
@@ -138,6 +139,7 @@
             <!-- 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"
@@ -222,8 +224,8 @@ export default {
             default() {
                 return {
                     show: true,
-                    align: 'right"',
-                    text: 'Forgot login form'
+                    align: "right",
+                    text: "Forgot login form"
                 }
             }
         },
@@ -374,7 +376,7 @@ export default {
                 ...this.cmdFormElementSendLogin
             }
         },
-        buttonLoginOptions() {
+        buttonLoginDefaultOptions() {
             return {
                 linkType: "button", /* href, router, button */
                 type: "submit", /* submit, button */
@@ -389,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>

package/src/components/CmdMailToolEntry.vue

@@ -0,0 +1,230 @@
+<template>
+    <template v-if="mails.length"
+              v-for="(mail, index) in mails"
+              :key="index">
+        <div
+            :class="['cmd-mail-tool-entry flex-container box', { unread : !mailIsRead.has(mail.id)}]"
+            :title="getMessage('mail_tool_entry.tooltip.read_this_mail')"
+        >
+            <dl class="no-flex">
+                <dt class="flex-container align-items-center">
+                    {{
+                        boxType === "inbox" ? getMessage("mail_tool_entry.description_label.from") : getMessage("mail_tool_entry.description_label.to")
+                    }}
+                </dt>
+                <dd class="sender-receiver-wrapper flex-container align-items-center no-flex">
+                    <!-- begin CmdImage for contact image -->
+                    <CmdImage v-if="mail.cmdImage?.src"
+                              :src="mail.cmdImage.src"
+                              :alt="mail.cmdImage.alt"
+                              :title="mail.cmdImage.title || mail.contactFullName"
+                              :useFigureTag="false"
+                    />
+                    <!-- end CmdImage for contact image -->
+                    <span class="contact-full-name">{{ mail.contactFullName }}</span></dd>
+                <dt>{{ getMessage("mail_tool_entry.description_label.subject") }}</dt>
+                <dd><a href="#" @click.prevent="readMail(mail.id)">{{ mail.subject }}</a></dd>
+            </dl>
+            <div class="flex-container vertical no-flex">
+                <dl class="no-list-items date-time-wrapper">
+                    <dt>Received:</dt>
+                    <dd>
+                        <time :datetime="mail.isoDate">{{ mailFormatDate(mail.isoDate) }}</time>
+                        <time :datetime="mail.time">{{ mailFormatTime(mail.time) }}</time>
+                    </dd>
+                </dl>
+                <div class="options-wrapper flex-container no-flex">
+                    <a href="#" @click.prevent="deleteMail(mail.id)" title="Delete this mail">
+                        <span class="icon-delete"></span>
+                    </a>
+                    <a href="#" @click.prevent="toggleReadStatus(mail.id)"
+                       :title="mailIsRead.has(mail.id) ? 'Set status to unread' : 'Set status to read'">
+                        <span :class="mailIsRead.has(mail.id) ? 'icon-visible' : 'icon-not-visible'"></span>
+                    </a>
+                    <a href="#" @click.prevent="toggleExpandMail(mail.id)"
+                       :title="expandMail.has(mail.id) ? 'Collapse mail content' : 'Expand mail content'">
+                        <span
+                            :class="expandMail.has(mail.id) ? 'icon-chevron-one-stripe-up' : 'icon-chevron-one-stripe-down'"></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="expandMail.has(mail.id)">
+            <header>
+                mailId: {{ mail.id }}
+            </header>
+        </div>
+    </template>
+    <!-- begin CmdSystemMessage (if no mails exist) -->
+    <CmdSystemMessage v-else v-bind="cmdSystemMessage"/>
+    <!-- end CmdSystemMessage (if no mails exist) -->
+
+</template>
+
+<script>
+// import mixins
+import I18n from "../mixins/I18n.js"
+import DefaultMessageProperties from "../mixins/CmdMailToolEntry/DefaultMessageProperties.js"
+
+// import functions
+import {formatDate, formatTime} from "../utils/date.js"
+
+export default {
+    name: "CmdMailToolEntry",
+    mixins: [I18n, DefaultMessageProperties],
+    data() {
+        return {
+            expandMail: new Set(),
+            mailIsRead: new Set()
+        }
+    },
+    props: {
+        /**
+         * define box type
+         *
+         * @allowedValues: inbox, outbox
+         */
+        boxType: {
+            type: String,
+            default: "inbox"
+        },
+        /**
+         * activate if you want to use the default-slot
+         */
+        useSlot: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * array of mails
+         *
+         * 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)
+         * }
+         */
+        mails: {
+            type: Array,
+            required: true
+        },
+        /**
+         * date-format for mails
+         *
+         * @allowedValues: "dmy", "mdy", "ymd"
+         */
+        dateFormat: {
+            type: String,
+            default: "dmy"
+        },
+        /**
+         * dateSeparator for mails
+         */
+        dateSeparator: {
+            type: String,
+            default: "."
+        },
+        /**
+         * timeFormat for mails
+         *
+         * @allowedValues: "12", "24"
+         */
+        timeFormat: {
+            type: String,
+            default: "24"
+        },
+        /**
+         * properties for CmdSystemMessage-component
+         */
+        cmdSystemMessage: {
+            type: Object,
+            default() {
+                return {
+                    validationStatus: "info",
+                    systemMessage: "No mails found!",
+                    showCloseIcon: false
+                }
+            }
+        }
+    },
+    methods: {
+        mailFormatDate(date) {
+            return formatDate(date, this.dateFormat, this.dateSeparator)
+        },
+        mailFormatTime(time) {
+            return formatTime(time, this.timeFormat)
+        },
+        readMail(id) {
+            this.mailIsRead.add(id)
+            this.expandMail.add(id)
+        },
+        deleteMail(id) {
+            if (confirm("Are you sure you want to delete this mail?")) {
+                this.$emit("deleteMail", id)
+            }
+        },
+        toggleReadStatus(id) {
+            if (this.mailIsRead.has(id)) {
+                this.mailIsRead.delete(id)
+            } else {
+                this.mailIsRead.add(id)
+            }
+        },
+        toggleExpandMail(id) {
+            if (this.expandMail.has(id)) {
+                this.expandMail.delete(id)
+            } else {
+                this.expandMail.add(id)
+            }
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-mail-tool-entry -------------------------------------------------------------------------------------------- */
+.cmd-mail-tool-entry {
+    justify-content: space-between;
+    text-decoration: none;
+    border: 0;
+    border-top: var(--default-border);
+    border-radius: 0;
+
+    &:hover, &:active, &:focus {
+        cursor: pointer;
+        background: var(--pure-white);
+    }
+
+    &.unread {
+        * {
+            font-weight: bold;
+        }
+    }
+
+    dl {
+        margin: 0;
+
+        dd {
+            gap: calc(var(--default-gap) / 2);
+        }
+    }
+
+    .cmd-image {
+        width: 3rem;
+        aspect-ratio: 1/1;
+        border: var(--default-border);
+        border-radius: var(--full-circle);
+        margin: 0; /* overwrite "a img"-selector from frontend-framework */
+    }
+
+    .options-wrapper {
+        justify-content: flex-end;
+    }
+}
+
+/* end cmd-mail-tool-entry -------------------------------------------------------------------------------------------- */
+</style>