@energie360/ui-library 0.0.4 → 0.1.1

package/components/table/u-cell-progress-bar.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
+
+interface Props {
+  label?: string
+  value: number
+  labelPosition?: 'top' | 'right'
+}
+
+const { labelPosition = 'top' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['cell-progress-bar', `label-position-${labelPosition}`]">
+    <p class="progress-bar-label" v-if="label">{{ label }}</p>
+    <UProgressBar :value="value"></UProgressBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './cell-progress-bar.scss';
+</style>

package/components/table/u-table-cell.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {
+  TableCellBase,
+  TableCellHAlign,
+  TableCellTextStyle,
+  TableCellVAlign,
+} from './table.type'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UTooltip from '../tooltip/u-tooltip.vue'
+
+interface Props extends TableCellBase {
+  infoText?: string
+  textStyle?: TableCellTextStyle
+}
+
+const {
+  textStyle = TableCellTextStyle.normal,
+  hAlign = TableCellHAlign.left,
+  vAlign = TableCellVAlign.center,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    role="cell"
+    :class="[
+      'table-cell',
+      `h-align-${hAlign}`,
+      `v-align-${vAlign}`,
+      { 'has-tooltip': infoText },
+    ]"
+  >
+    <div :class="['cell-content', `text-${textStyle}`]">
+      <slot>{{ text }}</slot>
+    </div>
+
+    <div class="info-tooltip" v-if="infoText">
+      <UTooltip :title="infoText">
+        <UIcon name="info"></UIcon>
+      </UTooltip>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-cell.scss';
+</style>

package/components/table/u-table-header.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="table-header">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-header.scss';
+</style>

package/components/table/u-table-heading.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  text?: string
+  hAlign?: 'left' | 'center' | 'right'
+  vAlign?: 'top' | 'center' | 'bottom'
+}
+
+const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    role="cell"
+    :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]"
+  >
+    <div class="cell-content">
+      <slot :text="text">{{ text }}</slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-heading.scss';
+</style>

package/components/table/u-table-row.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+  highlight?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div role="row" :class="['table-row', { highlight }]">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-row.scss';
+</style>

package/components/table/u-table.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="table-scroll-wrapper">
+    <div role="table" class="table">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table.scss';
+</style>

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.js

@@ -0,0 +1,200 @@
+import { getViewportDimensions } from './viewport'
+import { getOffsetParentPosition } from './dom'
+
+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} options - Options object
+ * @param {number} options.offset - offset to refEl in px
+ * @param {number} options.viewportPadding - Padding to viewport in px
+ * @param {string} options.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ */
+export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
+  options = Object.assign({}, defaultOptions, options)
+
+  const refRect = refEl.getBoundingClientRect()
+  let popoverRect = popoverEl.getBoundingClientRect()
+
+  const offsetParent = getOffsetParentPosition(refEl)
+
+  let top
+  let left
+  const offsetTop = offsetParent.top
+  const offsetLeft = offsetParent.left
+  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
+      // console.log(left)
+      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.
+    // console.log('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.
+    // console.log('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} options - Options object
+ * @param {number} options.offset - offset to refEl in px
+ * @param {number} options.viewportPadding - Padding to viewport in px
+ * @param {string} options.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ */
+export const getPopoverPositionBody = (refEl, popoverEl, options = {}) => {
+  options = Object.assign({}, defaultOptions, options)
+
+  const refRect = refEl.getBoundingClientRect()
+  let popoverRect = popoverEl.getBoundingClientRect()
+
+  let top
+  let left
+  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
+      // console.log(left)
+      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,92 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getPopoverPositionBody } from './popover'
+
+interface Props {
+  title: string
+  placement?:
+    | 'top-right'
+    | 'top-left'
+    | 'top-center'
+    | 'bottom-right'
+    | 'bottom-left'
+    | 'bottom-center'
+  offset?: number
+  viewportPadding?: number
+}
+
+const {
+  placement = 'top-center',
+  offset = 12,
+  viewportPadding = 20,
+} = defineProps<Props>()
+
+const tooltip = ref(null)
+const root = ref(null)
+const pointer = ref(null)
+
+const showTooltip = () => {
+  const popoverPosition = getPopoverPositionBody(root.value, tooltip.value, {
+    offset,
+    placement,
+    viewportPadding,
+  })
+
+  // Set position
+  tooltip.value.style.top = `${popoverPosition.top}px`
+  tooltip.value.style.left = `${popoverPosition.left}px`
+
+  // Fix pointer position if necessary
+  if (popoverPosition.leftCorrection) {
+    pointer.value.style.transform = `translateX(${popoverPosition.leftCorrection * -1}px)`
+  }
+
+  tooltip.value.ariaHidden = 'false'
+  tooltip.value.classList.toggle('tooltip--open', true)
+}
+
+const hideTooltip = () => {
+  const onTransitionend = () => {
+    tooltip.value.removeEventListener('transitionend', onTransitionend)
+
+    tooltip.value.style.top = ''
+    tooltip.value.style.left = ''
+    pointer.value.style.transform = ''
+  }
+
+  tooltip.value.addEventListener('transitionend', onTransitionend)
+
+  tooltip.value.ariaHidden = 'true'
+  tooltip.value.classList.toggle('tooltip--open', 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.
+const onMouseenter = () => {
+  showTooltip()
+}
+
+const onMouseleave = () => {
+  hideTooltip()
+}
+</script>
+
+<template>
+  <span @mouseenter="onMouseenter" @mouseleave="onMouseleave" ref="root">
+    <slot></slot>
+  </span>
+
+  <Teleport to="body">
+    <div ref="tooltip" class="tooltip">
+      <div class="tooltip__content">
+        {{ title }}
+      </div>
+      <span class="tooltip__pointer" ref="pointer"></span>
+    </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'