comand-component-library 4.3.7 → 4.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.7",
+  "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/assets/data/multistep-form-wrapper-page-1.json

@@ -19,5 +19,34 @@
         "placeholder": "First Name",
         "required": true,
         "disabled": false
-    }
+    },
+    {
+        "component": "CmdInputGroup",
+        "labelText": "Label for input-group (checkboxes):",
+        "inputTypes": "checkbox",
+        "toggleSwitches": true,
+        "required": true, 
+        "value": ["option1"],
+        "name": "input-group-checkboxes",
+        "inputElements": [
+          {
+            "labelText": "Option 1",
+            "id": "option1",
+            "name": "checkbox-options",
+            "value": "option1"
+          },
+          {
+            "labelText": "Option 2",
+            "id": "option2",
+            "name": "checkbox-options",
+            "value": "option2"
+          },
+          {
+            "labelText": "Option 3",
+            "id": "option3",
+            "name": "checkbox-options",
+            "value": "option3"
+          }
+        ]
+      }
 ]

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

@@ -924,6 +924,7 @@ export default {
             &.success {
                 * {
                     --status-color: var(--success-color);
+                    --form-input-text-color: var(--success-color);
                 }
 
                 &:has(input[type="checkbox"], input[type="radio"]) {

package/src/components/CmdInputGroup.vue

@@ -341,6 +341,10 @@ export default {
     > .label-text {
         display: inline-flex;
 
+        .flex-container {
+            gap: 1rem 1.5rem; /* vertical, horizontal */
+        }
+
         > span + a:has([class*="icon-"]) {
             margin-left: calc(var(--default-margin) / 2);
         }

package/src/components/CmdLoginForm.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdLoginForm ---------------------------------------------------------------------------------------- -->
-    <fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
+    <fieldset v-if="!sendLogin" class="cmd-login-form flex-container">
         <legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">
             {{ legendLoginForm.text }}
         </legend>
@@ -66,7 +66,7 @@
         <!-- end default-login-button -->
 
         <!-- begin form elements -->
-        <div v-show="showLogin" :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
+        <div v-if="showLogin" :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
             <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
@@ -153,7 +153,7 @@
     <!-- end login-form -->
 
     <!-- begin send-login-form -->
-    <fieldset v-show="sendLogin" class="cmd-login-form flex-container">
+    <fieldset v-if="sendLogin" class="cmd-login-form flex-container">
         <legend :class="{hidden : !legendForgotLoginForm.show, 'align-left': legendForgotLoginForm.align === 'left'}">
             {{ legendForgotLoginForm.text }}
         </legend>

package/src/components/CmdMultistepFormProgressBar.vue

@@ -345,19 +345,6 @@ export default {
             }
         }
 
-        &.success {
-            .number {
-                border-color: var(--success-color);
-                color: var(--success-color);
-            }
-
-            .active {
-                .number {
-                    background: var(--success-color) !important;
-                }
-            }
-        }
-
         :is(.active, .router-link-exact-active):not(.disabled) {
             a {
                 background: var(--button-primary-background-highlighted);

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>