comand-component-library 4.3.15 → 4.3.16

package/src/components/CmdTooltip.vue

@@ -1,36 +1,28 @@
 <template>
     <!-- begin CmdTooltip ---------------------------------------------------------------------------------------- -->
-    <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
-                v-if="cmdHeadline"
-                v-bind="cmdHeadline"
-            />
-            <!-- end CmdHeadline -->
+    <div :class="['cmd-tooltip', validationStatus]" popover="manual" ref="tooltip" role="tooltip"
+        :id="popoverTargetName" @mouseenter="handleTooltipEnter" @mouseleave="handleTooltipLeave"
+        :style="'position-anchor:' + positionAnchor"
+    >
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <!-- end CmdHeadline -->
 
-            <!-- begin icon to close 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 -->
-            </button>
-            <!-- end icon to close tooltip -->
-        </div>
+        <!-- begin icon to close tooltip -->
+        <button v-if="showCloseIcon" 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 -->
+        </button>
+        <!-- end icon to close tooltip -->
 
         <!-- begin slot-content -->
         <slot>
-            {{ tooltipText }}
+            <div v-html="tooltipText"></div>
         </slot>
         <!-- end slot-content -->
-         <!-- end CmdTooltip ---------------------------------------------------------------------------------------- -->
+        <!-- end CmdTooltip ---------------------------------------------------------------------------------------- -->
     </div>
 </template>
 
@@ -39,9 +31,8 @@ export default {
     name: "CmdTooltip",
     data() {
         return {
-            tooltipVisibility: false,
-            pointerX: 0,
-            pointerY: 0
+            triggerElement: null,
+            tooltipVisibility: false
         }
     },
     inject: {
@@ -52,19 +43,20 @@ 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)
+         * 
+         * @requiered-for-accessibility
          */
          popoverTargetName: {
             type: String,
-            required: true
-         },
+            required: false
+        },
         /**
-         * properties for CmdHeadline-component
+         * positionAnchor
          */
-        cmdHeadline: {
-            type: Object,
-            default() {
-            }
-        },
+         positionAnchor: {
+            type: String,
+            required: false
+         },
         /**
          * text shown as tooltip
          */
@@ -75,11 +67,26 @@ export default {
         /**
          * delay (in milliseconds) until tooltip will be shown
          *
+         * only works on hover/leave
+         * 
          * toggleVisibilityByClick-property must be false
          */
         delayToShowTooltip: {
             type: Number,
             default: 0
+        },
+         /**
+         * delay (in milliseconds) until tooltip will be hidden
+         *
+         * only works on hover/leave
+         * 
+         * toggleVisibilityByClick-property must be false
+         * 
+         * minimum should be set to 100 to avoid flickering while user moves mouse over tooltip itself
+         */
+         delayToHideTooltip: {
+            type: Number,
+            default: 100
         },
         /**
          * id of related input-element
@@ -121,7 +128,7 @@ export default {
             default() {
                 return {
                     show: true,
-                    iconClass: "icon-cancel",
+                    iconClass: "icon-cancel-circle",
                     tooltip: "Close this tooltip!"
                 }
             }
@@ -129,106 +136,86 @@ export default {
         /**
          * enable toggling tooltip-visibility by click
          */
-        toggleVisibilityByClick: {
+         showCloseIcon: {
             type: Boolean,
             default: false
+        },
+         /**
+         * properties for CmdHeadline-component
+         */
+         cmdHeadline: {
+            type: Object,
+            requiured: false
         }
     },
     mounted() {
-        /*
-        if (this.relatedId) {
-            const relatedElement = document.getElementById(this.relatedId)
-
-            if (relatedElement) {
-                const scrollContainerSelector = this.injectScrollContainer || this.scrollContainer
+        // provide the container the tooltip scrolls in (and should react to)
+        const scrollContainerSelector = this.injectScrollContainer || this.scrollContainer
 
-                if (scrollContainerSelector) {
-                    const scrollContainerElement = document.querySelector(scrollContainerSelector)
+        if (scrollContainerSelector) {
+            const scrollContainerElement = document.querySelector(scrollContainerSelector)
 
-                    if(scrollContainerElement) {
-                        scrollContainerElement.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
-                    } else {
-                        console.warn( "'CmdTooltip-Component': Element accessed by " + scrollContainerSelector + " does not exist! Please provide selector for an existing element!")
-                    }
+            if (scrollContainerElement) {
+                scrollContainerElement.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
+            } else {
+                console.warn("'CmdTooltip-Component': Element accessed by " + scrollContainerSelector + " does not exist! Please provide selector for an existing element!")
+            }
+        }
 
-                    document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
-                }
+        if(this.relatedId) {
+            // get eleemnt that triggers the tooltip
+            this.triggerElement = document.getElementById(this.relatedId)
+            if (!this.triggerElement) return
+            
+            // add event listeners
+            this.triggerElement.addEventListener("mouseenter", this.handleTriggerEnter)
+            this.triggerElement.addEventListener("mouseleave", this.handleTriggerLeave)
+        }
+    },
+    beforeUnmount() {
+        if(this.relatedId) {
+            if (!this.triggerElement) return
 
-                if (this.toggleVisibilityByClick) {
-                    relatedElement.addEventListener("click", this.toggleTooltipVisibility)
-                } else {
-                    relatedElement.addEventListener("mouseenter", this.showTooltip)
-                    relatedElement.addEventListener("mouseleave", this.hideTooltip)
-                }
-            }
+            this.triggerElement.removeEventListener("mouseenter", this.handleTriggerEnter)
+            this.triggerElement.removeEventListener("mouseleave", this.handleTriggerLeave)
         }
-            */
+
     },
     methods: {
-        toggleTooltipVisibility(event) {
-            this.getPointerPosition(event)
-            this.tooltipVisibility = !this.tooltipVisibility
+        showTooltip() {
+            // use native method on element to show popover/tooltip
+            this.$refs.tooltip.showPopover()
         },
-        showTooltip(event) {
-            // if delay is set
-            if (this.delayToShowTooltip > 0) {
-                setTimeout(() => {
-                    this.toggleVisibility(event)
-                }, this.delayToShowTooltip)
-            } else {
-                this.toggleVisibility(event)
-            }
+        hideTooltip() {
+            // use native method on element to close popover/tooltip
+            this.$refs.tooltip.hidePopover()
         },
-        toggleVisibility(event) {
-            if (!this.toggleVisibilityByClick) {
-                this.tooltipVisibility = true
-            }
-            this.getPointerPosition(event)
+        handleTriggerEnter() {
+                 // small delay prevents flicker when moving to tooltip
+                setTimeout(() => {
+                if (!this.tooltipVisibility) {
+                    this.showTooltip()
+                }
+            }, this.delayToShowTooltip)
         },
-        hideTooltipOnEsc(event) {
-            if (this.allowEscapeKey) {
-                if (event.key === 'Escape' || event.key === 'Esc') {
+        handleTriggerLeave() {
+            // small delay prevents flicker when moving to tooltip
+            setTimeout(() => {
+                if (!this.tooltipVisibility) {
                     this.hideTooltip()
                 }
-            }
+            }, this.delayToHideTooltip)
         },
-        hideTooltip() {
-            this.tooltipVisibility = false
+        handleTooltipEnter() {
+            this.tooltipVisibility = true  
         },
-        getPointerPosition(event) {
-            this.pointerX = event.clientX
-            this.pointerY = event.clientY
+        handleTooltipLeave() {
+            this.tooltipVisibility = false
+            this.$refs.tooltip.hidePopover()
         }
     },
     unmounted() {
-        if (this.relatedId) {
-            const relatedElement = document.getElementById(this.relatedId)
-
-            if (relatedElement) {
-                document.removeEventListener("scroll", this.hideTooltip)
-                document.removeEventListener("keyup", this.hideTooltipOnEsc)
-
-                if (this.toggleVisibilityByClick) {
-                    relatedElement.removeEventListener("click", this.toggleTooltipVisibility)
-                } else {
-                    relatedElement.removeEventListener("mouseenter", this.showTooltip)
-                    relatedElement.removeEventListener("mouseleave", this.showTooltip)
-                }
-            }
-        }
-    },
-    watch: {
-        /*
-        tooltipVisibility() {
-            if (this.tooltipVisibility) {
-                this.$nextTick(() => {
-                    const verticalOffset = 25
-                    // this.$refs.tooltip.addEventListener("keyup", this.hideTooltip)
-                    this.$refs.tooltip.style.left = (this.pointerX / 10) + "rem"
-                    this.$refs.tooltip.style.top = ((this.pointerY + verticalOffset) / 10) + "rem"
-                })
-            }
-        }*/
+        document.removeEventListener("scroll", this.hideTooltip)
     }
 }
 </script>
@@ -246,10 +233,11 @@ export default {
     border-color: hsl(220, 2%, 25%);
     border-right-color: hsl(240, 1%, 81%);
     border-bottom-color: hsl(240, 1%, 81%);
-    display: flex;
-    flex-direction: column;
 
-    &.error, &.warning, &.success, &.info {
+    &.error,
+    &.warning,
+    &.success,
+    &.info {
         border-color: var(--status-color);
     }
 
@@ -272,7 +260,7 @@ export default {
     .headline-wrapper {
         display: flex;
 
-        > a {
+        >button {
             margin-left: auto !important;
 
             [class*="icon-"] {
@@ -280,7 +268,9 @@ export default {
                 font-size: var(--font-size-small);
                 color: var(--hyperlink-color);
 
-                &:hover, &:active, &:focus {
+                &:hover,
+                &:active,
+                &:focus {
                     color: var(--hyperlink-color-highlighted);
                 }
             }

package/src/components/CmdWidthLimitationWrapper.vue

@@ -5,8 +5,8 @@
         <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
             <!-- begin cmd-headline -->
             <CmdHeadline
-                v-if="cmdHeadline"
-                v-bind="cmdHeadline"
+                v-if="cmdHeadline?.headlineText"
+                v-bind="cmdHeadlineProperties"
             />
             <!-- end cmd-headline -->
 
@@ -112,7 +112,7 @@ export default {
         /**
          * properties for CmdHeadline-component
          *
-         * @requiredForAccessibilty
+         * @requiredForAccessibilty: true
          */
         cmdHeadline: {
             type: Object,
@@ -120,6 +120,12 @@ export default {
         }
     },
     computed: {
+        cmdHeadlineProperties() {
+            return {
+                headlineLevel: 2,
+                ...this.cmdHeadline
+            }
+        },
         setInnerClass() {
             if (this.useFullDeviceWidth) {
                 return "full-width"

package/src/index.js

@@ -53,7 +53,6 @@ export { default as CmdTextImageBlock } from '@/components/CmdTextImageBlock.vue
 export { default as CmdThumbnailScroller } from '@/components/CmdThumbnailScroller.vue'
 export { default as CmdToggleDarkMode } from '@/components/CmdToggleDarkMode.vue'
 export { default as CmdTooltip } from '@/components/CmdTooltip.vue'
-export { default as CmdTooltipForFormElements } from '@/components/CmdTooltipForFormElements.vue'
 export { default as CmdUploadForm } from '@/components/CmdUploadForm.vue'
 export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper.vue'
 export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'

package/src/mixins/FieldValidation.js

@@ -14,6 +14,13 @@ export default {
         GlobalDefaultMessageProperties
     ],
     props: {
+        /**
+         * 
+         */
+        useCustomTooltip: {
+            type: Boolean,
+            default: true
+        },
         /**
          * validation message shown on clicking the status-icon of a form-element with state
          */

package/src/components/CmdTooltipForFormElements.vue

@@ -1,113 +0,0 @@
-<template>
-    <!-- begin CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
-    <!-- begin CmdTooltip -->
-    <CmdTooltip
-        ref="tooltip"
-        class="cmd-tooltip-for-form-elements box"
-        :class="validationStatus"
-        :relatedId="relatedId"
-        :scrollContainer="scrollContainerForTooltip"
-        :popoverTargetName="popoverTargetName"
-        :toggle-visibility-by-click="true">
-
-        <!-- begin CmdListOfRequirements -->
-        <CmdListOfRequirements
-            v-if="cmdListOfRequirementsProperties.showRequirements"
-            v-bind="cmdListOfRequirementsProperties"
-        />
-        <!-- end CmdListOfRequirements -->
-    </CmdTooltip>
-    <!-- end CmdTooltip -->
-    <!-- end CmdTooltipForFormElements ---------------------------------------------------------------------------------------- -->
-</template>
-
-<script>
-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
-         */
-        scrollContainerForTooltip: {
-            type: String,
-            required: false
-        },
-        /**
-         * related-id for CmdTooltip-component
-         */
-        relatedId: {
-            type: String,
-            default: ""
-        },
-        /**
-         * validation-status for CmdTooltip-component
-         *
-         * @allowedValues: "", error, warning, success, info
-         *
-         * @affectsStyling: true
-         */
-        validationStatus: {
-            type: String,
-            default: "",
-            validator(value) {
-                return value === "" ||
-                    value === "error" ||
-                    value === "warning" ||
-                    value === "success" ||
-                    value === "info"
-            }
-        },
-        /**
-         * properties for CmdListOfRequirements-component
-         */
-        cmdListOfRequirements: {
-            type: Object,
-            required: false
-        }
-    },
-    computed: {
-        cmdListOfRequirementsProperties() {
-            return {
-                showRequirements: true,
-                validationTooltip: "",
-                inputRequirements: [],
-                inputAttributes: {},
-                showHeadline: true,
-                inputModelValue: "",
-                helplink: {},
-                labelText: "",
-                ...this.cmdListOfRequirements
-            }
-        }
-    },
-    methods: {
-        hideTooltip() {
-            // close tooltip by calling function from CmdTooltip using $refs
-            this.$refs.tooltip.hideTooltip()
-        }
-    }
-}
-</script>
-
-<style>
-/* begin cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
-.cmd-tooltip-for-form-elements {
-    .headline-wrapper {
-        a[class*="icon-"], a:has([class*="icon-"]) {
-            margin-left: auto;
-
-            &:hover, &:active, &:focus {
-                background: none;
-            }
-        }
-    }
-}
-
-/* end cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
-</style>