@energie360/ui-library 0.1.0 → 0.1.2

package/components/tooltip/dom.js

@@ -0,0 +1,167 @@
+/**
+ * Wrap an element with another element
+ *
+ * @param {Node} el
+ * @param {string} wrapper - Tag name of wrapper element. Can also have a classname (like emmet notation)
+ *
+ * @returns {Node}
+ */
+export const wrap = (el, wrapper) => {
+  const parsedWrapper = wrapper.split('.')
+  const wrapperEl = document.createElement(parsedWrapper[0])
+
+  if (parsedWrapper.length > 1) {
+    wrapperEl.className = parsedWrapper.slice(1).join(' ')
+  }
+
+  el.parentNode.insertBefore(wrapperEl, el)
+  wrapperEl.appendChild(el)
+
+  return wrapperEl
+}
+
+/**
+ * Get element position relative to document.
+ *
+ * @param {Node} el
+ * @returns {{top: number, left: number, width: number, height: number}}
+ */
+export const getElementPosition = (el) => {
+  const elRect = el.getBoundingClientRect()
+  const scrollTop = window.scrollY
+  const scrollLeft = window.scrollX
+
+  return {
+    top: elRect.top + scrollTop,
+    left: elRect.left + scrollLeft,
+    width: elRect.width,
+    height: elRect.height,
+  }
+}
+
+/**
+ * Decode HTML encoded string.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+export const htmlDecode = (str) => {
+  const doc = new DOMParser().parseFromString(str, 'text/html')
+  return doc.documentElement.textContent
+}
+
+export const htmlToDocFragment = (str) => {
+  const tpl = document.createElement('template')
+  tpl.innerHTML = str
+  return tpl.content.cloneNode(true)
+}
+
+/**
+ * Reverse order of direct child nodes of given parent.
+ *
+ * @param {Node} parent
+ */
+export const reverseChildren = (parent) => {
+  for (let i = 1; i < parent.childNodes.length; i++) {
+    parent.insertBefore(parent.childNodes[i], parent.firstChild)
+  }
+}
+
+/**
+ * Check if element is in a slotted element.
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+const isInSlottedElement = (el) => {
+  const parentEl = el.parentElement
+
+  if (parentEl === document.body || !parentEl) {
+    return false
+  }
+
+  if (parentEl.assignedSlot) {
+    return true
+  } else {
+    return isInSlottedElement(parentEl)
+  }
+}
+
+/**
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+const isOffsetParent = (el) => {
+  const style = getComputedStyle(el)
+  return style.position === 'relative' || style.position === 'absolute'
+}
+
+/**
+ * Get the expected offsetParent within nested shadow roots.
+ *
+ * Because elements are nested in web components or slotted in web components we can't get desired offsetParent.
+ *
+ * @param {Element} el
+ * @returns {Element}
+ */
+export const getOffsetParent = (el) => {
+  if (el === document.body) {
+    // We arrived at the top.
+    // 'body' must be the offsetParent then.
+    return el
+  }
+
+  const offsetParent = el.offsetParent
+
+  if (offsetParent === document.body || offsetParent === null) {
+    // It's possible that we're a slotted element, in which case we'll always have the potentially 'wrong' offsetParent 'body'.
+    // Dig deeper...
+    if (el.assignedSlot) {
+      // A <slot> doesn't have an offsetParent. Let's use the parentNode.
+      const parentElement = el.assignedSlot.parentElement
+
+      // Handle case where the parent node actually is an offsetParent
+      if (isOffsetParent(parentElement)) {
+        return parentElement
+      }
+
+      return getOffsetParent(el.assignedSlot.parentElement)
+    }
+
+    if (isInSlottedElement(el)) {
+      return getOffsetParent(el.parentElement)
+    }
+
+    if (el.getRootNode() instanceof ShadowRoot) {
+      // If we're nested in another shadow root we'll also always get 'body' as offsetParent.
+      // Check the offsetParent of the current host element.
+      return getOffsetParent(el.getRootNode().host)
+    }
+  }
+
+  return offsetParent
+}
+
+/**
+ * Get offset positions of parent which is not 'static'.
+ *
+ * @param {Element} el
+ * @returns {Object}
+ */
+export const getOffsetParentPosition = (el) => {
+  const offsetParent = getOffsetParent(el)
+  const elRect = el.getBoundingClientRect()
+  const offsetParentRect = offsetParent.getBoundingClientRect()
+
+  return {
+    top: elRect.top - offsetParentRect.top,
+    left: elRect.left - offsetParentRect.left,
+  }
+}
+
+export const moveChildren = (sourceParent, targetParent) => {
+  while (sourceParent.childNodes.length > 0) {
+    targetParent.appendChild(sourceParent.childNodes[0])
+  }
+}

package/components/tooltip/popover.ts

@@ -0,0 +1,208 @@
+import { getViewportDimensions } from './viewport'
+import { getOffsetParentPosition } from './dom'
+
+export type Placement =
+  | 'top-right'
+  | 'top-left'
+  | 'top-center'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'bottom-center'
+export interface PopoverPositionParams {
+  placement?: Placement
+  offset?: number
+  viewportPadding?: number
+}
+
+export interface PopoverPosition {
+  top: number
+  left: number
+  topCorrection: number
+  leftCorrection: number
+}
+
+const defaultOptions = {
+  offset: 0,
+  viewportPadding: 0,
+  placement: 'top-left',
+}
+
+/**
+ * This simply calculates the desired position of the popover and returns the coordinates.
+ * It won't change the DOM.
+ *
+ * @param {Element} refEl
+ * @param {Element} popoverEl
+ * @param {Object} opts - Options object
+ * @param {number} opts.offset - offset to refEl in px
+ * @param {number} opts.viewportPadding - Padding to viewport in px
+ * @param {string} opts.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ */
+export const getPopoverPosition = (
+  refEl: HTMLElement,
+  popoverEl: HTMLElement,
+  opts: PopoverPositionParams,
+) => {
+  const options = Object.assign({}, defaultOptions, opts)
+
+  const refRect = refEl.getBoundingClientRect()
+  let popoverRect = popoverEl.getBoundingClientRect()
+
+  const { top: offsetTop, left: offsetLeft } = getOffsetParentPosition(refEl)
+
+  let top = 0
+  let left = 0
+  const { vpWidth } = getViewportDimensions()
+  const docHeight = document.documentElement.scrollHeight
+  const scrollY = window.scrollY
+
+  if (popoverRect.width === 0 && popoverRect.height === 0) {
+    // Popover probably has display:none.
+    // Make it visible for a frame to get the correct dimensions.
+    popoverEl.style.display = 'block'
+    popoverRect = popoverEl.getBoundingClientRect()
+    popoverEl.style.display = ''
+  }
+
+  switch (options.placement) {
+    case 'top-right':
+      top = offsetTop - popoverRect.height - options.offset
+      left = offsetLeft + refRect.width - popoverRect.width
+      break
+
+    case 'top-left':
+      top = offsetTop - popoverRect.height - options.offset
+      left = offsetLeft
+      break
+
+    case 'bottom-right':
+      top = offsetTop + refRect.height + options.offset
+      left = offsetLeft + refRect.width - popoverRect.width
+      break
+
+    case 'bottom-left':
+      top = offsetTop + refRect.height + options.offset
+      left = offsetLeft
+      break
+
+    // TODO: add remaining placement options
+    case 'bottom-center':
+      break
+
+    case 'top-center':
+  }
+
+  // Add corrections to position if necessary
+
+  // Check left or right overflow
+  const leftDiff = refRect.left - offsetLeft
+  if (left + leftDiff < options.viewportPadding) {
+    left = 0 - leftDiff + options.viewportPadding
+  } else if (left + leftDiff + popoverRect.width > vpWidth - options.viewportPadding) {
+    left = vpWidth - leftDiff - popoverRect.width - options.viewportPadding
+  }
+
+  // Check top or bottom overflow
+  const topDiff = refRect.top - offsetTop
+  if (top + topDiff + scrollY < options.viewportPadding) {
+    // popover is too high.
+    // Switch position to bottom
+    top = offsetTop + refRect.height + options.offset
+  } else if (top + topDiff + scrollY + popoverRect.height > docHeight - options.viewportPadding) {
+    // popover is too low.
+    // Swith position to top.
+    top = offsetTop - popoverRect.height - options.offset
+  }
+
+  return { top, left }
+}
+
+/**
+ * Calculates the desired position of the popover relative to <body>.
+ *
+ * @param {Element} refEl
+ * @param {Element} popoverEl
+ * @param {Object} opts - Options object
+ * @param {number} opts.offset - offset to refEl in px
+ * @param {number} opts.viewportPadding - Padding to viewport in px
+ * @param {string} opts.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ */
+export function getPopoverPositionBody(
+  refEl: HTMLElement,
+  popoverEl: HTMLElement,
+  opts: PopoverPositionParams,
+): PopoverPosition {
+  const options = Object.assign({}, defaultOptions, opts)
+
+  const refRect = refEl.getBoundingClientRect()
+  let popoverRect = popoverEl.getBoundingClientRect()
+
+  let top = 0
+  let left = 0
+  const topCorrection = 0
+  let leftCorrection = 0
+
+  const scrollY = window.scrollY
+  const scrollX = window.scrollX
+  const { vpWidth } = getViewportDimensions()
+  // const docHeight = document.documentElement.scrollHeight
+  const refTop = refRect.top + scrollY
+  const refLeft = refRect.left + scrollX
+
+  if (popoverRect.width === 0 && popoverRect.height === 0) {
+    // Popover probably has display:none.
+    // Make it visible for a frame to get the correct dimensions.
+    popoverEl.style.display = 'block'
+    popoverRect = popoverEl.getBoundingClientRect()
+    popoverEl.style.display = ''
+  }
+
+  switch (options.placement) {
+    case 'top-right':
+      // top = offsetTop - popoverRect.height - options.offset
+      // left = offsetLeft + refRect.width - popoverRect.width
+      break
+
+    case 'top-left':
+      // top = offsetTop - popoverRect.height - options.offset
+      // left = offsetLeft
+      break
+
+    case 'bottom-right':
+      // top = offsetTop + refRect.height + options.offset
+      // left = offsetLeft + refRect.width - popoverRect.width
+      break
+
+    case 'bottom-left':
+      // top = offsetTop + refRect.height + options.offset
+      // left = offsetLeft
+      break
+
+    case 'bottom-center':
+      top = refTop + refRect.height + options.offset
+      left = refLeft + refRect.width / 2 - popoverRect.width / 2
+      break
+
+    case 'top-center':
+      top = refTop - options.offset - popoverRect.height
+      left = refLeft + refRect.width / 2 - popoverRect.width / 2
+  }
+
+  // Add corrections to position if necessary
+
+  // Check left or right overflow
+  if (left < options.viewportPadding) {
+    // too left
+    leftCorrection = Math.abs(left) + options.viewportPadding
+    left = options.viewportPadding
+  } else if (left + popoverRect.width > vpWidth - options.viewportPadding) {
+    // too right
+    leftCorrection = vpWidth - options.viewportPadding - popoverRect.width - left
+    left = vpWidth - options.viewportPadding - popoverRect.width
+  }
+
+  // Check top or bottom overflow
+  // TODO: Add these corrections
+
+  return { top, left, leftCorrection, topCorrection }
+}

package/components/tooltip/tooltip.scss

@@ -0,0 +1,75 @@
+@use '../../base/abstracts/' as a;
+
+.tooltip {
+  pointer-events: none;
+  z-index: a.$layer-tooltip;
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: a.rem(360);
+  min-width: a.rem(84);
+  opacity: 0;
+  transform: translateY(-5px);
+  transition:
+    opacity a.$trs-default,
+    transform a.$trs-default;
+
+  @include a.bp(lg) {
+    max-width: a.rem(280);
+  }
+
+  .tooltip__content {
+    @include a.type(100);
+
+    // This nesting here is only to make the new sass compiler happy.
+    & {
+      z-index: 0;
+      position: relative;
+      padding: var(--e-space-2);
+      background-color: var(--e-c-mono-00);
+      box-shadow: var(--e-elevation-sm);
+      border: 1px solid var(--e-c-mono-100);
+      border-radius: var(--e-brd-radius-1);
+    }
+
+    @include a.bp(lg) {
+      @include a.type(50);
+
+      padding: var(--e-space-3);
+    }
+  }
+
+  .tooltip__pointer {
+    position: absolute;
+    bottom: -4px;
+    left: calc(50% - 6px);
+
+    &::before {
+      content: '';
+      display: block;
+      width: 10px;
+      height: 9.6px;
+      transform: rotate(53.13deg) skewX(15.36deg);
+      box-shadow: var(--e-elevation-sm);
+      background-color: var(--e-c-mono-00);
+      border-right: 1px solid var(--e-c-mono-100);
+      border-bottom: 1px solid var(--e-c-mono-100);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 5px;
+      left: -2px;
+      width: 14px;
+      height: 7px;
+      background: var(--e-c-mono-00);
+    }
+  }
+
+  // States
+  &.tooltip--open {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/components/tooltip/u-tooltip.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getPopoverPositionBody } from './popover'
+import type { PopoverPositionParams } from './popover'
+
+interface Props extends PopoverPositionParams {
+  title: string
+}
+
+const { placement = 'top-center', offset = 12, viewportPadding = 20 } = defineProps<Props>()
+
+const tooltip = ref<HTMLDivElement | null>(null)
+const root = ref<HTMLSpanElement | null>(null)
+const pointer = ref<HTMLSpanElement | null>(null)
+const isTooltipVisible = ref<boolean>(false)
+
+// On desktop (or non-touch devices) mouse events will be fired before the pointer events.
+// For mobile and touch devices it's th opposite, pointer events will be fired first.
+// This way we can detect on what device we are and handle the behaviour accordingly.
+function hideTooltip() {
+  isTooltipVisible.value = false
+}
+
+function showTooltip() {
+  updatePositions()
+  isTooltipVisible.value = true
+}
+
+function onTransitionend() {
+  if (isTooltipVisible.value) return
+  updatePositions(true)
+  isTooltipVisible.value = false
+}
+
+function updatePositions(resetPositions = false) {
+  const { top, left, leftCorrection } = getPopoverPositionBody(root.value!, tooltip.value!, {
+    offset,
+    placement,
+    viewportPadding,
+  })
+
+  tooltip.value!.style.top = resetPositions ? '' : `${top}px`
+  tooltip.value!.style.left = resetPositions ? '' : `${left}px`
+  // Fix pointer position if necessary
+  pointer.value!.style.transform =
+    !resetPositions && leftCorrection ? `translateX(${leftCorrection * -1}px)` : ''
+}
+</script>
+
+<template>
+  <span ref="root" @mouseenter="showTooltip" @mouseleave="hideTooltip">
+    <slot />
+  </span>
+
+  <Teleport to="body">
+    <div
+      ref="tooltip"
+      :class="['tooltip', { 'tooltip--open': isTooltipVisible }]"
+      :aria-hidden="!isTooltipVisible"
+      @transitionend="onTransitionend"
+    >
+      <div class="tooltip__content">
+        {{ title }}
+      </div>
+      <span ref="pointer" class="tooltip__pointer" />
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+@use './tooltip.scss';
+</style>

package/components/tooltip/viewport.js

@@ -0,0 +1,21 @@
+/**
+ * Get element offset relative to document.
+ *
+ * @param {Element} el
+ * @returns {{top: *, left: *, width, height}}
+ */
+export const getElOffset = (el) => {
+  const rect = el.getBoundingClientRect()
+
+  return {
+    top: window.scrollY + rect.top,
+    left: window.scrollX + rect.left,
+    width: rect.width,
+    height: rect.height,
+  }
+}
+
+export const getViewportDimensions = () => ({
+  vpWidth: window.innerWidth,
+  vpHeight: window.innerHeight,
+})

package/custom-elements.js

@@ -0,0 +1 @@
+export * from './elements/elements'