@energie360/ui-library 0.1.9 → 0.1.10

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/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

@@ -39,4 +39,9 @@ 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'

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>

package/components/text-block/text-block.scss

@@ -0,0 +1,58 @@
+@use '../../base/abstracts/' as a;
+
+.wizard-text-block {
+  .wizard-text-block__title {
+    @include a.type(800, strong);
+
+    + .wizard-text-block__text {
+      margin-top: var(--e-space-4);
+    }
+  }
+
+  .wizard-text-block__title--small {
+    @include a.type(500, strong);
+  }
+
+  .wizard-text-block__text {
+    @include a.type(300);
+  }
+
+  @include a.bp(lg) {
+    .wizard-text-block__title {
+      @include a.type(700, strong);
+
+      + .wizard-text-block__text {
+        margin-top: var(--e-space-3);
+      }
+    }
+  }
+
+  // Modifiers
+  &.wizard-text-block--sub {
+    .wizard-text-block__title {
+      @include a.type(300, strong);
+
+      + .wizard-text-block__text {
+        margin-top: var(--e-space-2);
+      }
+    }
+
+    .wizard-text-block__text {
+      @include a.type(300);
+    }
+
+    @include a.bp(lg) {
+      .wizard-text-block__title {
+        @include a.type(200, strong);
+
+        + .wizard-text-block__text {
+          margin-top: var(--e-space-2);
+        }
+      }
+
+      .wizard-text-block__text {
+        @include a.type(200);
+      }
+    }
+  }
+}

package/components/text-block/u-text-block.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  variant: 'lead' | 'sub'
+  title?: string
+  text?: string
+  centered?: boolean
+}
+
+const { centered = false } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['wizard-text-block', `wizard-text-block--${variant}`, { centered }]">
+    <h2 v-if="title" class="wizard-text-block__title" v-html="title" />
+
+    <div v-if="text" class="wizard-text-block__text richtext" v-html="text" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './text-block.scss';
+
+.centered {
+  text-align: center;
+}
+</style>