chore: backmerge release_ewm to main (#557)

* fix(refs T34566): Pass propper Values to init Tooltips (#511)
* fix(refs T34571): Shorten Delay for destroytooltip (#512)
* v0.1.14
* Fix(T34571): place tooltip in the foreground  (#530)
* Fix(T34571): added a method that checks the z-index of the parent element and appends zIndex + 1 to the style of the tooltip
* Fix(T34571): updated CHANGELOG.md
* Fix(T34716): add an update method in the tooltip directory (#542)
* Fix(T34716): Add update hook to tooltip directive for dynamic value updates
* v0.1.16

---------

Co-authored-by: Stefan Graupner <graupner@demos-deutschland.de>
Co-authored-by: sakutademos <110987766+sakutademos@users.noreply.github.com>
Co-authored-by: Sami Mussbach <mussbach@demos-deutschland.de>

CHANGELOG.md

@@ -3,7 +3,6 @@
 Since v0.0.10, this Changelog is formatted according to the [Common Changelog][common-changelog] recommendations.
 
 ## UNRELEASED
-
 ### Removed
 - ([#537](https://github.com/demos-europe/demosplan-ui/pull/537)) Remove DpNotifyContainer component ([@ahmad-demos](https://github.com/@ahmad-demos))
 - ([#536](https://github.com/demos-europe/demosplan-ui/pull/536)) Remove DpToggleForm component ([@ahmad-demos](https://github.com/@ahmad-demos))
@@ -31,6 +30,16 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 - ([#515](https://github.com/demos-europe/demosplan-ui/pull/515)) Add internal alias ([@spiess-demos](https://github.com/spiess-demos))
 - ([#380](https://github.com/demos-europe/demosplan-ui/pull/380)) Add DpTextArea documentation to Storybook ([@ahmad-demos](https://github.com/ahmad-demos))
 
+## v0.1.16 - 2023-09-25
+
+### Added
+- ([#542](https://github.com/demos-europe/demosplan-ui/pull/542)) Add update hook to tooltip directive for dynamic value updates ([@sakutademos](https://github.com/sakutademos))
+
+## v0.1.15 - 2023-09-18
+
+### Added
+- ([#523](https://github.com/demos-europe/demosplan-ui/pull/523)) Add a method that checks the z-index of the parent element and appends zIndex + 1 to the style of the tooltip ([@sakutademos](https://github.com/sakutademos))
+
 ## v0.1.14 - 2023-09-07
 
 Several minor bugfixes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demos-europe/demosplan-ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "license": "MIT",
   "private": false,
   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",

src/components/DpTooltip/utils/tooltip.js

@@ -5,6 +5,7 @@ import { v4 as uuid } from 'uuid'
 let handleShowTooltip = null
 let handleHideTooltip = null
 let handleTimeoutForDestroy = null
+let tooltips = {}
 
 const deleteTooltip = (tooltipEl) => {
   if (tooltipEl) {
@@ -32,13 +33,16 @@ const getZIndex = (element) => {
 }
 
 const hideTooltip = (tooltipEl) => {
-  tooltipEl.classList.add('z-below-zero')
-  tooltipEl.classList.add('opacity-0')
+  if (tooltipEl) {
+    tooltipEl.classList.add('z-below-zero')
+    tooltipEl.classList.add('opacity-0')
+  }
 
   handleTimeoutForDestroy = setTimeout(() => deleteTooltip(tooltipEl), 300)
 }
 
-const createTooltip = (id, el, value, container, classes) => {
+const createTooltip = (id, container, classes) => {
+  const value = tooltips[id]
   // this has to be in sync with the Template in DpTooltip
   const tooltipHtml =
     `<div class="tooltip absolute ${classes} z-below-zero" role="tooltip" id="${id}">` +
@@ -47,7 +51,6 @@ const createTooltip = (id, el, value, container, classes) => {
     `</div>`
 
   const range = document.createRange()
-  el.setAttribute('aria-describedby', id)
 
   const content = range.createContextualFragment(tooltipHtml)
 
@@ -59,11 +62,13 @@ const initTooltip = (el, value, options) => {
 
   const id = `tooltip-${uuid()}`
   const zIndex = getZIndex(el)
+  tooltips[id] = value
+
+  el.setAttribute('aria-describedby', id)
 
   handleShowTooltip = () => showTooltip(
     id,
     el,
-    value,
     options,
     zIndex
   )
@@ -75,9 +80,9 @@ const initTooltip = (el, value, options) => {
   el.addEventListener('blur', handleHideTooltip)
 }
 
-const showTooltip = async (id, wrapperEl, value, { place = 'top', container = 'body', classes = '' }, zIndex)  => {
+const showTooltip = async (id, wrapperEl, { place = 'top', container = 'body', classes = '' }, zIndex)  => {
   if (!document.getElementById(wrapperEl.getAttribute('aria-describedby'))) {
-    createTooltip(id, wrapperEl, value, container, classes)
+    createTooltip(id, container, classes)
   } else {
     clearTimeout(handleTimeoutForDestroy)
   }
@@ -129,4 +134,19 @@ const showTooltip = async (id, wrapperEl, value, { place = 'top', container = 'b
   tooltipEl.classList.remove('opacity-0')
 }
 
-export { destroyTooltip, initTooltip }
+const updateTooltip = (wrapper, value, options) => {
+  if (!value) return
+
+  const wrapperId = wrapper.getAttribute('aria-describedby')
+  tooltips[wrapperId] = value
+
+  const zIndex = getZIndex(wrapper)
+  const tooltipEl = document.getElementById(wrapperId)
+
+  if (tooltipEl) {
+    deleteTooltip(tooltipEl)
+    showTooltip(wrapperId, wrapper, options, zIndex)
+  }
+}
+
+export { destroyTooltip, initTooltip, updateTooltip }

src/directives/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { VPopover as Popover } from 'v-tooltip'
-import { destroyTooltip, initTooltip } from '~/components/DpTooltip/utils/tooltip'
+import { destroyTooltip, initTooltip, updateTooltip } from '~/components/DpTooltip/utils/tooltip'
 
 /**
  * @deprecated Use DpTooltip instead
@@ -60,6 +60,26 @@ const Tooltip = {
 
     initTooltip(element, content, options)
   },
+
+  update: function (element, binding) {
+    let content = binding.value
+    let options = { place: 'top' }
+
+    if (binding.value && typeof binding.value === 'object') {
+      content = binding.value.content
+
+      if (binding.value.container) {
+        options = { ...options, container: binding.value.container }
+      }
+
+      if (binding.value.classes) {
+        options = { ...options, classes: binding.value.classes }
+      }
+    }
+
+    updateTooltip(element, content, options)
+  },
+
   unbind: function (element) {
     destroyTooltip(element)
   }

tests/DpContextualHelp.spec.js

@@ -1,5 +1,4 @@
 import DpContextualHelp from '~/components/DpContextualHelp/DpContextualHelp.vue'
-import shallowMountWithGlobalMocks from '../jest/shallowMountWithGlobalMocks'
 
 describe('DpContextualHelp', () => {
   it('should be an object', () => {
@@ -9,15 +8,4 @@ describe('DpContextualHelp', () => {
   it('should be named DpContextualHelp', () => {
     expect(DpContextualHelp.name).toBe('DpContextualHelp')
   })
-
-  it('should render the correct html', async () => {
-
-    const instance = shallowMountWithGlobalMocks(DpContextualHelp, {
-      propsData: {
-        text: 'This is the tooltip content.'
-      }
-    })
-
-    expect(instance.html()).toMatchSnapshot()
-  })
 })