comand-component-library 4.1.91 → 4.1.93

package/src/components/CmdInnerLink.vue

@@ -1,7 +1,9 @@
 <template>
-    <span v-if="icon.iconClass && icon.position === 'left' || icon.position === 'top' || !icon.position" :class="icon.iconClass" :title="icon.tooltip"></span>
+    <img v-if="image?.src && (image?.position === 'left' || image?.position === 'top' || !image?.position)" :src="image?.src" :alt="image?.alt" />
+    <span v-if="icon?.iconClass && (icon?.position === 'left' || icon?.position === 'top' || !icon?.position)" :class="icon?.iconClass" :title="icon?.tooltip"></span>
     <span v-if="text">{{ text }}</span>
-    <span v-if="icon.iconClass && icon.position === 'right' || icon.position === 'bottom'" :class="icon.iconClass" :title="icon.tooltip"></span>
+    <span v-if="icon?.iconClass && (icon?.position === 'right' || icon?.position === 'bottom')" :class="icon?.iconClass" :title="icon?.tooltip"></span>
+    <img v-if="image?.src && (image?.position === 'right' || image?.position === 'bottom' || !image?.position)" :src="imag?.src" :alt="image?.alt" />
     <!-- begin default-slot -->
     <slot></slot>
     <!-- end default-slot -->
@@ -12,18 +14,25 @@ export default {
     name: "CmdInnerLink",
     props: {
         /**
-         * icon to display
+         * displayed icon
          */
         icon: {
             type: Object,
-            default: {}
+            required: false
         },
         /**
          * displayed text
          */
         text: {
             type: String,
-            default: ""
+            required: false
+        },
+        /**
+         * displayed image
+         */
+        image: {
+            type: Object,
+            required: false
         }
     }
 }

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

@@ -1,20 +1,26 @@
 <template>
     <!-- begin CmdLink -->
     <!-- begin href -->
-    <a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'href')" :title="icon?.tooltip">
+    <a v-if="linkType === 'href'"
+       :href="path"
+       :target="target"
+       :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]"
+       @click.prevent="emitClick($event, 'href')"
+       :title="icon?.tooltip"
+    >
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
     </a>
     <!-- end href -->
 
-    <!-- begin router -->
+    <!-- begin router-link -->
     <router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton, 'box': styleAsBox, 'fancybox': fancybox}]" @click="emitClick($event, 'router')" :title="icon?.tooltip">
         <CmdInnerLink :text="text" :icon="icon">
             <slot></slot>
         </CmdInnerLink>
     </router-link>
-    <!-- end router -->
+    <!-- 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">
@@ -112,7 +118,7 @@ export default {
     },
     methods: {
         emitClick(event, linkType) {
-            this.$emit('click', {originalEvent: event, linkType: linkType})
+            this.$emit("click", {originalEvent: event, linkType: linkType})
         }
     }
 }

package/src/components/CmdListOfLinks.vue

@@ -23,6 +23,7 @@
                 :key="index"
                 :class="{'active': sectionAnchors && activeSection === index}"
                 :link="link"
+                @click="emitClick($event, linkType)"
             />
             <!-- end CmdListOfLinksItem-->
 
@@ -199,6 +200,9 @@ export default {
             }
                 }
             })
+        },
+        emitClick(event, linkType) {
+            this.$emit("click", {originalEvent: event, linkType: linkType})
         }
     }
 }

package/src/components/CmdListOfLinksItem.vue

@@ -14,6 +14,7 @@
             :styleAsButton="link?.styleAsButton"
             :primaryButton="link?.primaryButton"
             :styleAsBox="link?.styleAsBox"
+            @click="emitClick($event, linkType)"
         />
         <!-- end CmdLink -->
 
@@ -78,6 +79,9 @@ export default {
                     props.text = text
                 }
             })
+        },
+        emitClick(event, linkType) {
+            this.$emit("click", {originalEvent: event, linkType: linkType})
         }
     }
 }

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>