@energie360/ui-library 0.1.9 → 0.1.11

package/base/abstracts/_variables.scss

@@ -35,6 +35,7 @@ $grid-gutter-s: math.div(dt.$space-5, $container-inner-s) * 100%;
 
 // Transition
 $trs-default: var(--e-trs-duration-faster) var(--e-trs-easing-default);
+$trs-ease-out: var(--e-trs-duration-faster) cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
 
 // CMS-Section
 $section-default-padding-2xl: dt.$space-28;

package/components/card/u-card.vue

@@ -1,18 +1,25 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, watch } from 'vue'
 
 interface Props {
   active?: boolean
 }
 
-defineProps<Props>()
+const { active = false } = defineProps<Props>()
 
-const isActive = ref(false)
+const isActive = ref(active)
 const toggleActiveCard = (v: boolean) => {
   isActive.value = v
 }
 
 provide('card', { toggleActiveCard })
+
+watch(
+  () => active,
+  (newV) => {
+    isActive.value = newV
+  },
+)
 </script>
 
 <template>

package/components/card-cta-header/u-card-cta-header.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  subtitle: string
+  disabled?: boolean
+}
+
+const { disabled = false } = defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-cta-header" :class="{ disabled }">
+    <slot></slot>
+    <div class="card-cta-header__header">
+      <div class="card-cta-header__image">
+        <slot name="image"></slot>
+      </div>
+
+      <div>
+        <h2 class="card-cta-header__title">{{ title }}</h2>
+        <p class="card-cta-header__subtitle">{{ subtitle }}</p>
+      </div>
+    </div>
+
+    <div class="card-cta-header__cta">
+      <slot name="cta"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+// We add the styles directly in the component
+// because the :slotted selector won't work when styles are added via `src`.
+
+@use '../../base/abstracts/' as a;
+
+.card-cta-header {
+  display: flex;
+  align-items: center;
+  gap: var(--e-space-4);
+
+  @include a.bp(m) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.card-cta-header__header {
+  display: flex;
+  align-items: center;
+  column-gap: var(--e-space-6);
+}
+
+.card-cta-header__title {
+  @include a.type(300, strong);
+
+  color: var(--e-c-mono-900);
+
+  .disabled & {
+    color: var(--e-c-mono-500);
+  }
+}
+
+.card-cta-header__subtitle {
+  @include a.type(300);
+
+  color: var(--e-c-mono-700);
+}
+
+.card-cta-header__cta {
+  margin-left: auto;
+
+  @include a.bp(m) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-left: 0;
+
+    // This is used mostly because <nuxt-link> is probably used to wrap a button component.
+    // And <nuxt-link> always renders to <a>.
+    :slotted(a) {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+</style>

package/components/circular-progress/circular-progress.scss

@@ -0,0 +1,34 @@
+// From https://www.30secondsofcode.org/css/s/circular-progress-bar/
+.circular-progress {
+  --stroke-width: 4px;
+  --half-size: calc(var(--size) / 2);
+  --radius: calc((var(--size) - var(--stroke-width)) / 2);
+  --circumference: calc(var(--radius) * pi * 2);
+  --dash: calc((var(--progress) * var(--circumference)) / 100);
+
+  width: var(--size);
+  height: var(--size);
+  pointer-events: none;
+}
+
+.circular-progress__background,
+.circular-progress__foreground {
+  cx: var(--half-size);
+  cy: var(--half-size);
+  r: var(--radius);
+  stroke-width: var(--stroke-width);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.circular-progress__background {
+  stroke: var(--e-c-primary-01-100);
+}
+
+.circular-progress__foreground {
+  transform: rotate(-90deg);
+  transform-origin: var(--half-size) var(--half-size);
+  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+  transition: stroke-dasharray var(--e-trs-duration-fast) ease-out 0.1s;
+  stroke: var(--e-c-primary-01-500);
+}

package/components/circular-progress/u-circular-progress.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number
+  progress: number
+}
+
+const { size = 100 } = defineProps<Props>()
+
+const viewBox = computed(() => `0 0 ${size} ${size}`)
+</script>
+
+<template>
+  <svg
+    class="circular-progress"
+    :viewBox
+    :style="{ '--size': `${size}px`, '--progress': progress }"
+  >
+    <circle class="circular-progress__background"></circle>
+    <circle class="circular-progress__foreground"></circle>
+  </svg>
+</template>
+
+<style scoped lang="scss" src="./circular-progress.scss"></style>

package/components/context-menu/context-menu.scss

@@ -0,0 +1,28 @@
+@use '../../base/abstracts/' as a;
+
+// .context-menu {
+//   // position: relative;
+// }
+
+.context-menu__menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+  padding: var(--e-space-2);
+  border-radius: var(--e-brd-radius-2);
+  border: 1px solid var(--e-c-mono-200);
+  box-shadow: var(--e-elevation-md);
+  background-color: var(--e-c-mono-00);
+  min-width: a.rem(240);
+}
+
+.menu-enter-active,
+.menu-leave-active {
+  transition: opacity a.$trs-default;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+}

package/components/context-menu/u-context-menu.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, useTemplateRef, watch } from 'vue'
+import { PopoverPositionParams, getPopoverPosition } from '../tooltip/popover'
+import { debounceRaf } from '../../utils/functions/debounce'
+import { focusTrap } from '../../utils/a11y/focus-trap'
+
+const {
+  placement = 'top-center',
+  offset = 8,
+  viewportPadding = 20,
+} = defineProps<PopoverPositionParams>()
+
+// TODO: Key codes should be defined globally
+const ESC = 'Escape'
+
+const triggerEl = useTemplateRef('trigger')
+const menuEl = useTemplateRef('menu')
+const isOpen = ref(false)
+let focusTrapInstance
+
+const onToggleMenu = (e: Event) => {
+  e.stopPropagation()
+  e.preventDefault()
+
+  isOpen.value = !isOpen.value
+}
+
+const onResize = () => {
+  // Clear right position value, so we can get actual width of popover.
+  menuEl.value!.style.right = ''
+
+  const popoverPosition = getPopoverPosition(
+    triggerEl.value as HTMLElement,
+    menuEl.value as HTMLElement,
+    {
+      placement,
+      offset,
+      viewportPadding,
+    },
+  )
+
+  menuEl.value!.style.top = `${popoverPosition.top}px`
+  menuEl.value!.style.left = `${popoverPosition.left}px`
+  if (popoverPosition.right) {
+    menuEl.value!.style.right = `${popoverPosition.right}px`
+  }
+}
+
+const onResizeDebounced = debounceRaf(onResize)
+
+const onEnter = () => {
+  // 1. Position context-menu
+  onResize()
+
+  // 2. Set focus to first focusable element in menu
+  focusTrapInstance = focusTrap(menuEl.value, {
+    focusFirstElement: true,
+    allowArrowUpDown: true,
+    allowArrowLeftRight: true,
+  })
+
+  // 3. Bind events
+  menuEl.value.addEventListener('keydown', onEsc)
+  document.addEventListener('click', onDocumentClick)
+  window.addEventListener('resize', onResizeDebounced)
+}
+
+const onAfterLeave = () => {
+  focusTrapInstance.release()
+  window.removeEventListener('resize', onResizeDebounced)
+  document.removeEventListener('click', onDocumentClick)
+  menuEl.value?.removeEventListener('keydown', onEsc)
+}
+
+const onEsc = (e) => {
+  if (e.code === ESC) {
+    isOpen.value = false
+
+    // Set focus back to the trigger element
+    triggerEl.value.focus()
+  }
+}
+
+const onDocumentClick = (e: Event) => {
+  e.stopPropagation()
+  e.preventDefault()
+
+  // Close context menu when any click happens.
+  isOpen.value = false
+}
+
+watch([() => placement, () => offset, () => viewportPadding], () => {
+  if (isOpen.value) {
+    onResize()
+  }
+})
+</script>
+
+<template>
+  <div class="context-menu" :class="{ 'is-open': isOpen, 'is-closed': !isOpen }">
+    <div ref="trigger" class="context-menu__trigger" @click="onToggleMenu">
+      <slot name="trigger"></slot>
+    </div>
+
+    <Transition name="menu" @enter="onEnter" @after-leave="onAfterLeave">
+      <div v-if="isOpen" ref="menu" class="context-menu__menu">
+        <slot></slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./context-menu.scss"></style>

package/components/context-menu-divider/context-menu-divider.scss

@@ -0,0 +1,6 @@
+.context-menu-divider {
+  height: 1px;
+  margin: 0;
+  border: 0;
+  background-color: var(--e-c-mono-200);
+}

package/components/context-menu-divider/u-context-menu-divider.vue

@@ -0,0 +1,5 @@
+<template>
+  <hr class="context-menu-divider" />
+</template>
+
+<style scoped lang="scss" src="./context-menu-divider.scss"></style>

package/components/context-menu-link/context-menu-link.scss

@@ -0,0 +1,26 @@
+@use '../../base/abstracts/' as a;
+
+.context-menu-link {
+  @include a.type(200, strong);
+
+  display: flex;
+  column-gap: var(--e-space-2);
+  padding: var(--e-space-1_5) var(--e-space-3);
+  color: var(--e-c-mono-700);
+  border-radius: var(--e-brd-radius-2);
+  text-wrap: nowrap;
+  transition:
+    background-color a.$trs-ease-out,
+    color a.$trs-ease-out;
+
+  &:hover,
+  &:active {
+    background-color: var(--e-c-primary-01-50);
+    color: var(--e-c-primary-01-700);
+  }
+
+  &.active {
+    background-color: var(--e-c-primary-01-100);
+    color: var(--e-c-primary-01-900);
+  }
+}

package/components/context-menu-link/u-context-menu-link.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIcon } from '../../elements'
+
+interface Props {
+  icon: string
+  label?: string
+  href?: string
+  target?: string
+  active?: boolean
+}
+
+const { href, active = false } = defineProps<Props>()
+
+const tag = computed(() => {
+  return href ? 'a' : 'span'
+})
+</script>
+
+<template>
+  <component :is="tag" class="context-menu-link" :class="{ active }">
+    <UIcon :name="icon" />
+    <slot>{{ label }}</slot>
+  </component>
+</template>
+
+<style scoped lang="scss" src="./context-menu-link.scss"></style>

package/components/index.js

@@ -14,6 +14,7 @@ export { default as UCardPrice } from './card-price/u-card-price.vue'
 export { default as UCardSection } from './card-section/u-card-section.vue'
 export { default as UCardTable } from './card-table/u-card-table.vue'
 export { default as UCardToggleSwitches } from './card-toggle-switches/u-card-toggle-switches.vue'
+export { default as UCardCtaHeader } from './card-cta-header/u-card-cta-header.vue'
 
 // Collapsible
 export { default as UCollapsible } from './collapsible/u-collapsible.vue'
@@ -39,4 +40,11 @@ export { default as UTableRow } from './table/u-table-row.vue'
 export { default as UTable } from './table/u-table.vue'
 
 export { default as UTabs } from './tabs/u-tabs.vue'
+export { default as UTextBlock } from './text-block/u-text-block.vue'
 export { default as UTooltip } from './tooltip/u-tooltip.vue'
+export { default as UNavigationToolbarLink } from './navigation-toolbar-link/u-navigation-toolbar-link.vue'
+export { default as UContextMenu } from './context-menu/u-context-menu.vue'
+export { default as UContextMenuLink } from './context-menu-link/u-context-menu-link.vue'
+export { default as UContextMenuDivider } from './context-menu-divider/u-context-menu-divider.vue'
+export { default as UCircularProgress } from './circular-progress/u-circular-progress.vue'
+export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.vue'

package/components/navigation-toolbar-link/navigation-toolbar-link.scss

@@ -0,0 +1,177 @@
+// TODO: How to handle text overflow?
+
+@use '../../base/abstracts/' as a;
+
+@keyframes fadeInLabel {
+  0% {
+    opacity: 0;
+    transform: translateX(calc(100% + #{a.rem(8)}));
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fadeOutLabel {
+  0% {
+    opacity: 1;
+    transform: translateX(100%);
+    width: auto;
+    height: auto;
+    padding: var(--e-space-1_5) var(--e-space-2);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(calc(100% + #{a.rem(8)}));
+    width: auto;
+    height: auto;
+    padding: var(--e-space-1_5) var(--e-space-2);
+  }
+}
+
+@keyframes collapse {
+  0% {
+    overflow: hidden;
+    padding: var(--e-space-1_5) var(--e-space-3);
+    width: 100%;
+  }
+
+  100% {
+    overflow: hidden;
+    padding: var(--e-space-1_5);
+    width: a.rem(36);
+  }
+}
+
+@keyframes expand {
+  0% {
+    overflow: hidden;
+    padding: var(--e-space-1_5);
+    width: a.rem(36);
+  }
+
+  100% {
+    overflow: hidden;
+    padding: var(--e-space-1_5) var(--e-space-3);
+    width: 100%;
+  }
+}
+
+.navigation-toolbar-link {
+  --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
+
+  position: relative;
+  padding: var(--e-space-1_5) var(--e-space-3);
+  height: a.rem(36);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  width: 100%;
+  column-gap: var(--e-space-2);
+  background-color: var(--e-c-secondary-01-1000);
+  color: var(--e-c-mono-00);
+  border-radius: var(--e-brd-radius-2);
+  cursor: pointer;
+  transition:
+    background-color a.$trs-default,
+    color a.$trs-default;
+
+  @include a.type(200, strong);
+
+  > * {
+    flex: 0 0 auto;
+  }
+
+  &:active,
+  &:hover:not(.is-collapsing, .is-expanding) {
+    background-color: var(--e-c-secondary-01-950);
+    color: var(--e-c-primary-01-100);
+  }
+
+  // Active Page
+  &.active {
+    background-color: var(--e-c-secondary-01-900);
+    color: var(--e-c-primary-01-50);
+  }
+
+  // Collapsed
+  &.collapsed {
+    padding: var(--e-space-1_5);
+    width: a.rem(36);
+
+    .navigation-toolbar-link__label {
+      position: absolute;
+      top: 0;
+      right: calc(var(--e-space-2) * -1);
+      transform: translateX(calc(100% + #{a.rem(8)}));
+      border-radius: var(--e-brd-radius-2);
+      background-color: var(--e-c-mono-900);
+      color: var(--e-c-mono-00);
+
+      // Hide visually
+      width: 0;
+      height: 0;
+      opacity: 0;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
+    &.hover-out:not(.is-expanding, .is-collapsing, .label-hidden) {
+      .navigation-toolbar-link__label {
+        // TODO: Maybe just use transitions instead of keyframe animations
+        animation-name: fadeOutLabel;
+        animation-duration: var(--e-trs-duration-faster);
+        animation-timing-function: ease-out;
+      }
+    }
+
+    &:hover:not(.is-expanding, .is-collapsing, .label-hidden) {
+      .navigation-toolbar-link__label {
+        animation-name: fadeInLabel;
+        animation-duration: var(--e-trs-duration-faster);
+        animation-timing-function: ease-out;
+
+        padding: var(--e-space-1_5) var(--e-space-2);
+        transform: translateX(100%);
+        width: auto;
+        height: auto;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Animation
+.navigation-toolbar-link {
+  &.is-collapsing,
+  &.is-expanding {
+    animation-duration: var(--e-trs-duration-faster);
+
+    .navigation-toolbar-link__label {
+      animation: none;
+      position: static;
+      width: auto;
+      height: auto;
+      opacity: 1;
+      background-color: transparent;
+      transform: none;
+    }
+  }
+
+  &.is-collapsing {
+    // TODO: Maybe just use transitions instead of keyframe animations
+    animation-name: collapse;
+    animation-timing-function: var(--transition-ease-out);
+  }
+
+  &.is-expanding {
+    // TODO: Maybe just use transitions instead of keyframe animations
+    animation-name: expand;
+    animation-timing-function: var(--transition-ease-out);
+  }
+}

package/components/navigation-toolbar-link/u-navigation-toolbar-link.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, watch, computed, useTemplateRef } from 'vue'
+import { UIcon } from '../../elements'
+
+// TODO: Label animation when collapsed is a mess. Refactor it as soon as possbile!
+
+interface Props {
+  label?: string
+  icon: string
+  href?: string
+  target?: string
+  active?: boolean
+  collapsed?: boolean
+  labelHidden?: boolean
+}
+
+const {
+  active = false,
+  collapsed = false,
+  labelHidden = false,
+  href = '',
+  target = '_self',
+} = defineProps<Props>()
+
+const isCollapsed = ref(collapsed)
+const isCollapsing = ref(false)
+const isExpanding = ref(false)
+const isHovering = ref(false)
+const isHoverout = ref(false)
+const labelEl = useTemplateRef('label')
+
+const onWrapperAnimationEnd = (e: Event) => {
+  if (e.target === labelEl.value) {
+    isHoverout.value = false
+    return
+  }
+
+  isCollapsing.value = false
+  isExpanding.value = false
+  isHoverout.value = false
+
+  isCollapsed.value = !isCollapsed.value
+}
+
+const onHover = () => {
+  isHovering.value = true
+}
+
+const onHoverOut = () => {
+  isHovering.value = false
+}
+
+watch(
+  () => collapsed,
+  (newV) => {
+    if (newV) {
+      // Start collapsing animation
+      isCollapsing.value = true
+    } else {
+      // Start expanding animation
+      isExpanding.value = true
+    }
+  },
+)
+
+watch(isHovering, (newV) => {
+  if (!newV) {
+    isHoverout.value = true
+  }
+})
+
+const tag = computed(() => {
+  if (href) {
+    return 'a'
+  } else {
+    return 'span'
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :href="tag === 'a' ? href : null"
+    :target="tag === 'a' ? target : null"
+    :class="[
+      'navigation-toolbar-link',
+      {
+        active,
+        collapsed: isCollapsed,
+        'hover-out': isHoverout,
+        'is-collapsing': isCollapsing,
+        'is-expanding': isExpanding,
+        'label-hidden': labelHidden,
+      },
+    ]"
+    @animationend="onWrapperAnimationEnd"
+    @mouseenter="onHover"
+    @mouseleave="onHoverOut"
+  >
+    <UIcon :name="icon" />
+    <span ref="label" class="navigation-toolbar-link__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </component>
+</template>
+
+<style lang="scss" src="./navigation-toolbar-link.scss" scoped></style>