comand-component-library 4.3.9 → 4.3.11

package/package.json

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

package/src/ComponentLibrary.vue

@@ -1855,20 +1855,16 @@
                         @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" 
+                    ref="CmdToast"
                 />
+                <div class="button-wrapper">
+                    <button type="button" class="button" @click="$refs.CmdToast.toggleToast()">
+                        <span>Toggle Toast</span>
+                    </button>
+                </div>
+
             </CmdWidthLimitationWrapper>
             <!-- end toast --------------------------------------------------------------------------------------------------->
 
@@ -2417,21 +2413,6 @@ 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/styles/component-library-global-styles.scss

@@ -288,6 +288,12 @@ a img.flag {
 }
 /* end tooltip for cmd-form-element and cmd-fake-select -------------------------------------------------------------------------------------------------------------------- */
 
+.flex-direction-column {
+    > .cmd-form-element, > .cmd-fake-select, > .cmd-input-group {
+        align-self: flex-start;
+    }
+}
+
 /* ----------------------------------------------- END COMPONENTS AND GLOBAL STYLES --------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */

package/src/components/CmdFakeSelect.vue

@@ -22,26 +22,29 @@
                 <span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup></span>
 
                 <!-- begin status-icon (linked with tooltip) -->
-                <a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
+                <button v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
                    href="#"
                    @click.prevent
                    :title="validationTooltip"
+                   :popovertarget="tooltipPopoverTargetName" 
+                   :aria-describedby="tooltipPopoverTargetName"
                    :aria-errormessage="tooltipId"
                    aria-live="assertive"
                    :id="tooltipId">
                    <!-- begin CmdIcon -->
                    <CmdIcon :iconClass="getStatusIconClass"/>
                     <!-- end CmdIcon -->
-                </a>
+                </button>
                 <!-- end status-icon (linked with tooltip) -->
 
                 <!-- begin CmdTooltipForFormElements -->
                 <CmdTooltipForFormElements
-                    v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                    style="border: 1px solid red;"
                     ref="tooltip"
                     :validationStatus="validationStatus"
                     :validationMessage="getValidationMessage"
                     :relatedId="tooltipId"
+                    :tooltipPopoverTargetName="tooltipPopoverTargetName"
                     :cmdListOfRequirements="listOfRequirements"
                     :role="validationStatus === 'error' ? 'alert' : 'dialog'"
                 />
@@ -185,6 +188,7 @@ import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProp
 import FieldValidation from "../mixins/FieldValidation"
 import Identifier from "../mixins/Identifier"
 import Tooltip from "../mixins/Tooltip"
+import {createUuid} from "../utils/common.js"
 
 export default {
     name: 'CmdFakeSelect',
@@ -204,6 +208,13 @@ export default {
         }
     },
     props: {
+        /**
+        * name for popover-target (will be set as id for popover and must correspond popovertarget-value of button that opens the popup)
+        */
+        tooltipPopoverTargetName: {
+            type: String,
+            default: 'tooltip-target-' + createUuid()
+        },
         /**
          * set different default selectbox-types for
          *
@@ -321,6 +332,15 @@ export default {
             type: String,
             default: "/media/images/flags"
         },
+        /**
+         * limits drodpwon height of provided value (and lets contentscroll inside)
+         * 
+         * @allowedValues: "none", "an< height in pixels/rem"
+         */
+        dropdownMaxHeight: {
+            type: String,
+            default: "20rem"
+        },
         /**
          * default text if no option is selected (and first option is not used)
          */
@@ -606,6 +626,11 @@ export default {
                     }
                 }
             }
+
+            ul {
+                max-height: v-bind(dropdownMaxHeight);
+                overflow-y: auto;
+            }
         }
 
         &.open {

package/src/components/CmdHeadline.vue

@@ -38,11 +38,11 @@
             <!-- end CmdIcon -->
 
             <!-- begin default headline-text without slot -->
-            <span v-if="headlineText" v-html="headlineText"></span>
+            <span v-if="headlineText" v-html="headlineText" :class="['text-align-' + textAlign]"></span>
             <!-- end default headline-text without slot -->
 
             <!-- begin headline-text with slot -->
-            <span v-else>
+            <span v-else :class="['text-align-' + textAlign]">
                 <!-- begin slot -->
                 <slot></slot>
                 <!-- end slot -->
@@ -91,13 +91,15 @@
                         <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                         <!-- end CmdIcon -->
 
-                        <!-- begin pre-headline-text -->
-                        <span class="pre-headline-text">{{ preHeadlineText }}</span>
-                        <!-- end pre-headline-text -->
+                        <span :class="['pre-headline-text-wrapper', 'text-align-' + textAlign]">
+                            <!-- begin pre-headline-text -->
+                            <span class="pre-headline-text">{{ preHeadlineText }}</span>
+                            <!-- end pre-headline-text -->
 
-                        <!-- begin slot -->
-                        <slot>{{ headlineText }}</slot>
-                        <!-- end slot -->
+                            <!-- begin slot -->
+                            <slot>{{ headlineText }}</slot>
+                            <!-- end slot -->
+                         </span>
                     </component>
                 </template>
                 <component v-else-if="headlineText" :is="headlineTag">

package/src/components/CmdLoginForm.vue

@@ -50,9 +50,10 @@
 
         <!-- begin default-login-button -->
         <button v-if="!showLogin"
+                type="button"
                 class="button stretch-on-small-devices"
                 v-bind="buttonLoginWithYourDataDefaultOptions"
-                @click.prevent="showLogin = true">
+                @click="showLogin = true">
                 <!-- begin CmdIcon -->
                 <CmdIcon
                     v-if="buttonLoginWithYourDataDefaultOptions.icon?.iconClass"

package/src/components/CmdToast.vue

@@ -1,22 +1,16 @@
 <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>
+    <div v-if="showToast" class="cmd-toast box" role="status" aria-live="assertive" aria-atomic="true">
+        <slot>
+            <header>
+                <CmdHeadline v-if="cmdHeadlineProps" v-bind="cmdHeadlineProps" />
+                <a href="#" @click.prevent="close" :aria-label="cmdIconProps.tooltip">
+                    <CmdIcon v-bind="cmdIconProps" />
+                </a>
+            </header>
+            <p>{{ message }}</p>
+        </slot>
+    </div>
     <!-- end CmdToast ---------------------------------------------------------------------------------------- -->
 </template>
 
@@ -25,12 +19,12 @@ export default {
     name: 'CmdToast',
     data() {
         return {
-            dialogIsOpen: true
+            showToast: false
         }
     },
     props: {
         /**
-         * message shown in toast
+         * message shown inside the toast
          */
         message: {
             type: String,
@@ -65,30 +59,22 @@ export default {
                 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()
+            this.showToast = true
         },
-        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()
-            }
+        close() {
+            this.showToast = false
+        },
+        toggleToast() {
+            this.showToast = !this.showToast
+        }
+    },
+    watch: {
+        showToast() {
+            this.$emit('status-changed', this.showToast)
         }
     }
 }
@@ -98,12 +84,11 @@ export default {
 /* begin cmd-toast ---------------------------------------------------------------------------------------- */
 .cmd-toast {
     position: fixed;
-    margin-right: 2rem;
-    margin-left: auto;
+    right: 2rem;
+    left: auto;
     top: auto;
     bottom: 7rem;
     z-index: 1000;
-    transition: margin-right linear 3s;
 
     header {
         display: flex;
@@ -114,12 +99,5 @@ export default {
     }
 }
 
-.fade-in {
-    margin-right: 2rem;
-}
-
-.fade-out {
-    margin-right: 100%;
-}
 /* end cmd-toast ---------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdTooltip.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin CmdTooltip ---------------------------------------------------------------------------------------- -->
-    <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" ref="tooltip">
+    <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" popover ref="tooltip" role="tooltip" :id="popoverTargetName">
         <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
             <!-- begin CmdHeadline -->
             <CmdHeadline
@@ -10,12 +10,18 @@
             <!-- end CmdHeadline -->
 
             <!-- begin icon to close tooltip -->
-            <a v-if="iconClose.show && toggleVisibilityByClick" href="#" @click.prevent="hideTooltip"
-               :title="iconClose.tooltip">
+            <button 
+                v-if="iconClose.show && toggleVisibilityByClick" 
+                type="button"
+                class="close-tooltip no-style" 
+                popovertargetaction="hide"
+                :popovertarget="popoverTargetName"
+                :title="iconClose.tooltip"
+            >
                 <!-- begin CmdIcon -->
                 <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType"/>
                 <!-- end CmdIcon -->
-            </a>
+            </button>
             <!-- end icon to close tooltip -->
         </div>
 
@@ -44,6 +50,13 @@ export default {
         }
     },
     props: {
+        /**
+         * name for popover-target (will be set as id for popover and must correspond popovertarget-value of button that opens the popup)
+         */
+         popoverTargetName: {
+            type: String,
+            required: true
+         },
         /**
          * properties for CmdHeadline-component
          */
@@ -122,6 +135,7 @@ export default {
         }
     },
     mounted() {
+        /*
         if (this.relatedId) {
             const relatedElement = document.getElementById(this.relatedId)
 
@@ -148,6 +162,7 @@ export default {
                 }
             }
         }
+            */
     },
     methods: {
         toggleTooltipVisibility(event) {
@@ -203,6 +218,7 @@ export default {
         }
     },
     watch: {
+        /*
         tooltipVisibility() {
             if (this.tooltipVisibility) {
                 this.$nextTick(() => {
@@ -212,7 +228,7 @@ export default {
                     this.$refs.tooltip.style.top = ((this.pointerY + verticalOffset) / 10) + "rem"
                 })
             }
-        }
+        }*/
     }
 }
 </script>

package/src/components/CmdTooltipForFormElements.vue

@@ -7,6 +7,7 @@
         :class="validationStatus"
         :relatedId="relatedId"
         :scrollContainer="scrollContainerForTooltip"
+        :popoverTargetName="popoverTargetName"
         :toggle-visibility-by-click="true">
 
         <!-- begin CmdListOfRequirements -->
@@ -24,6 +25,12 @@
 export default {
     name: "CmdTooltipForFormElements",
     props: {
+        /**
+         * name for popover-target (will be set as id for popover and must correspond popovertarget-value of button that opens the popup)
+         */
+         popoverTargetName: {
+            type: String
+         },
         /**
          * specify a scroll-container which scrolling hides the tooltip
          */