comand-component-library 4.3.8 → 4.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.8",
+  "version": "4.3.9",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,

package/src/ComponentLibrary.vue

@@ -1839,7 +1839,7 @@
                 <p> date (YMD/default): {{ formatDate('2025-01-28', "", "-") }}</p>
                 <p> date (DMY): {{ formatDate('2025-01-28', "dmy") }}</p>
                 <p> date (MDY): {{ formatDate('2025-01-28', "mdy", "/") }}</p>
-                <p> date (invalid)): {{ formatDate('invalid') }}</p>
+                <p> date (invalid): {{ formatDate('invalid') }}</p>
                 <div class="inline-size">
                     <CmdThumbnailScroller ref="CmdThumbnailScroller" v-bind="cmdThumbnailScrollerSettingsData"
                         :thumbnailScrollerItems="thumbnailScrollerData" />
@@ -1847,6 +1847,31 @@
             </CmdWidthLimitationWrapper>
             <!-- end thumbnail-scroller --------------------------------------------------------------------------------------------------->
 
+            <!-- begin toast --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-toast">
+                    <span>Toast</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdToast')">
+                    </a>
+                </h2>
+                <div class="button-wrapper">
+                    <button type="button" class="button" @click.prevent="toggleToast('modal')">
+                        <span>Open Toast (as modal)</span>
+                    </button>
+                    <button type="button" class="button" @click.prevent="toggleToast">
+                        <span>Toggle Toast (default)</span>
+                    </button>
+                </div>
+                this.showToast: {{ this.showToast }}
+                <CmdToast 
+                    message="This is a message!"
+                    ref="cmdToast"
+                    @close="toggleToast" 
+                />
+            </CmdWidthLimitationWrapper>
+            <!-- end toast --------------------------------------------------------------------------------------------------->
+
             <!-- begin toggle-darkmode --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-toggle-dark-mode">
@@ -2174,6 +2199,7 @@ export default {
                     "page-2-telephone": "12345/67890"
                 }
             },
+            showToast: false,
 
             // assign data from json files to data-properties
             addressData,
@@ -2391,6 +2417,21 @@ export default {
         showError() {
             alert("Error")
         },
+        toggleToast(type) {
+            const dialog = this.$refs.cmdToast
+
+            if (!this.showToast) {
+                if (type === "modal") {
+                    dialog.showModal()
+                } else {
+                    dialog.show()
+                }
+                this.showToast = true
+            } else {
+                dialog.closeDialog()
+                this.showToast = false
+            }
+        },
         showFancyBox(type, content, ariaLabelText) {
             if (type === "text") {
                 openFancyBox({

package/src/assets/data/listOfComponents.json

@@ -45,6 +45,7 @@
   "Tag",
   "TextImageBlock",
   "ThumbnailScroller",
+  "Toast",
   "ToggleDarkMode",
   "Tooltip",
   "UploadForm",

package/src/componentSettingsDataAndControls.vue

@@ -870,6 +870,9 @@ export default {
                     }
                 ]
             },
+            cmdToast: {
+                message: "This is a message!"
+            },
             cmdTextImageBlockSettingsData: {
                 htmlContent: "Text given as html-content",
                 paragraphTextAlign: "left",

package/src/components/CmdSystemMessage.vue

@@ -5,7 +5,7 @@
             v-if="showSystemMessage"
             :class="['cmd-system-message', 'system-message', 'flex-container', 'flex-direction-column', { 'full-width': fullWidth }, systemMessageTextAlign, validationStatus]"
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
-            :aria-labelledby="htmlId"
+            :aria-labelledby="ariaId"
         >
             <!-- begin slot-content -->
             <slot>
@@ -16,7 +16,7 @@
                     :headlineText="systemMessage"
                     :headlineLevel="messageHeadlineLevel"
                     :textAlign="textAlign"
-                    :id="htmlId"
+                    :id="ariaId"
                 />
                 <!-- end CmdHeadline -->
             </slot>
@@ -50,7 +50,7 @@ export default {
     data() {
         return {
             showSystemMessage: true,
-            id: this.ariaReferenceId || this.buildHtmlId("system-message") // mixin requires id to be defined
+            ariaId: this.ariaReferenceId || this.buildHtmlId("system-message") // mixin requires id to be defined
         }
     },
     props:  {

package/src/components/CmdToast.vue

@@ -0,0 +1,125 @@
+<template>
+    <!-- begin CmdToast ---------------------------------------------------------------------------------------- -->
+    <transition :name="transition">
+        <dialog class="cmd-toast box" ref="cmdToast">
+            <slot>
+                <header>
+                    <CmdHeadline
+                        v-if="cmdHeadlineProps"
+                        v-bind="cmdHeadlineProps" 
+                    />
+                    <a href="#" @click.prevent="closeModal">
+                        <CmdIcon v-bind="cmdIconProps" />
+                    </a>
+                </header>
+                <p>{{ message }}</p>
+                this.dialogIsOpen: {{ this.dialogIsOpen }}
+            </slot>
+        </dialog>
+    </transition>
+    <!-- end CmdToast ---------------------------------------------------------------------------------------- -->
+</template>
+
+<script>
+export default {
+    name: 'CmdToast',
+    data() {
+        return {
+            dialogIsOpen: true
+        }
+    },
+    props: {
+        /**
+         * message shown in toast
+         */
+        message: {
+            type: String,
+            required: true
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
+        /**
+         * properties for CmdIcon-component
+         */
+        cmdIcon: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        cmdHeadlineProps() {
+            return {
+                headlineLevel: 6,
+                headlineText: "Information",
+                ...this?.cmdHeadline
+            }
+        },
+        cmdIconProps() {
+            return {
+                iconClass: "icon-cancel",
+                tooltip: "Close Toast",
+                ...this?.cmdIcon
+            }
+        },
+        transition() {
+            return this.dialogIsOpen ? 'fade-in' : 'fade-out' 
+        }
+    },
+    methods: {
+        closeModal() {
+            this.dialogIsOpen = false
+            this.$emit("close", true);
+        },
+        showModal() {
+            this.dialogIsOpen = true
+            this.$refs.cmdToast.showModal()
+        },
+        show() {
+            this.dialogIsOpen = true
+            this.$refs.cmdToast.show()
+        },
+        closeDialog() {
+            // Close only if the dialog is open; avoids immediate reopen if already closed.
+            const dialog = this.$refs.cmdToast
+            if (this.dialogIsOpen === true && dialog && (dialog.open || dialog.hasAttribute?.('open'))) {
+                dialog.close()
+            }
+        }
+    }
+}
+</script>
+
+<style>
+/* begin cmd-toast ---------------------------------------------------------------------------------------- */
+.cmd-toast {
+    position: fixed;
+    margin-right: 2rem;
+    margin-left: auto;
+    top: auto;
+    bottom: 7rem;
+    z-index: 1000;
+    transition: margin-right linear 3s;
+
+    header {
+        display: flex;
+
+        a {
+            margin-left: auto;
+        }
+    }
+}
+
+.fade-in {
+    margin-right: 2rem;
+}
+
+.fade-out {
+    margin-right: 100%;
+}
+/* end cmd-toast ---------------------------------------------------------------------------------------- */
+</style>