schlechtenburg/packages/core/lib/directives/hover-cover.ts

import './hover-cover.scss';

const findParents = (el: HTMLElement, foundParents: HTMLElement[] = []): HTMLElement[] => {
  const parent = el.parentElement as HTMLElement|null;
  if (!parent) {
    return foundParents;
  }

  if (parent.classList.contains('sb-hover-cover')) {
    return findParents(
      parent,
      [
        ...foundParents,
        parent,
      ],
    );
  }

  return findParents(
    parent,
    foundParents,
  );
}

const parentData = new WeakMap();

const onMouseEnter = (event: MouseEvent) => {
  const parents = parentData.get(event.target as HTMLElement);
  for (const parent of parents) {
    parent.classList.add('sb-hover-cover_child-hovered');
  }
};

const onMouseLeave = (event: MouseEvent) => {
  const parents = parentData.get(event.target as HTMLElement);
  if (parents && parents.length) {
    parents[0].classList.remove('sb-hover-cover_child-hovered');
  }
};

export default {
  updated(el: HTMLElement) {
    el.classList.add('sb-hover-cover');
  },

  beforeMount(el: HTMLElement) {
    el.classList.add('sb-hover-cover');
  },

  mounted(el: HTMLElement) {
    el.classList.add('sb-hover-cover');

    const parents = findParents(el);
    parentData.set(el, parents);

    el.addEventListener('mouseenter', onMouseEnter)
    el.addEventListener('mouseleave', onMouseLeave)
  },

  unmounted(el:HTMLElement) {
    el.removeEventListener('mouseenter', onMouseEnter)
    el.removeEventListener('mouseleave', onMouseLeave)
  },
};