@energie360/ui-library 0.1.31 → 0.1.33

package/components/navigation-panel-tile/u-navigation-panel-tile.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIcon } from '../../elements'
-
-type IconBadge = 'inactive'
+import UBadge from '../../components/badge/u-badge.vue'
+import type { Badge } from '../badge/u-badge.vue'
 
 interface Props {
   active?: boolean
@@ -11,7 +11,7 @@ interface Props {
   greyed?: boolean
   href?: string
   icon?: string
-  iconBadge?: IconBadge
+  badge?: Badge
   target?: string
   title?: string
 }
@@ -19,7 +19,7 @@ interface Props {
 const {
   description = '',
   icon = '',
-  iconBadge = undefined,
+  badge = undefined,
   title = '',
   href = '',
   target = '_self',
@@ -53,9 +53,10 @@ const tag = computed(() => (href ? 'a' : 'div'))
 
     <div class="navigation-panel-tile__icon-column">
       <div v-if="icon" class="navigation-panel-tile__icon-wrapper">
-        <span v-if="iconBadge" :class="['badge', iconBadge]" />
-
-        <UIcon :name="icon" />
+        <UBadge v-if="badge" v-bind="badge">
+          <UIcon :name="icon" />
+        </UBadge>
+        <UIcon v-else :name="icon" />
       </div>
     </div>
   </component>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed, useTemplateRef } from 'vue'
-import { UIcon } from '../../elements'
-import { UBadge } from '../../components'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UBadge from '../../components/badge/u-badge.vue'
 import { Badge } from '../badge/u-badge.vue'
 
 // TODO: Label animation when collapsed is a mess. Refactor it as soon as possbile!

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, useTemplateRef, ref } from 'vue'
 import { Image } from '../../elements/types'
-import { UCircularProgress } from '../'
+import UCircularProgress from '../circular-progress/u-circular-progress.vue'
 
 interface Props {
   image: Image

package/components/slider/u-slider.vue

@@ -2,7 +2,7 @@
 import { watch, useId, useTemplateRef, onMounted, ref } from 'vue'
 import { scaleValue } from '../../utils/math/scale-value'
 import { clamp } from '../../utils/math/clamp'
-import { UTooltip } from '../'
+import UTooltip from '../tooltip/u-tooltip.vue'
 
 interface SliderDot {
   value: number

package/components/slider-progress-animation/u-slider-progress-animation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 import '@lottiefiles/lottie-player'
-import { USlider } from '../'
+import USlider from '../slider/u-slider.vue'
 import { Slider } from '../slider/u-slider.vue'
 import { Image } from '../../elements/types'
 

package/components/table/table-cell.scss

@@ -27,3 +27,12 @@
   vertical-align: middle;
   color: var(--e-c-secondary-05-500);
 }
+
+.table-cell__dot {
+  align-self: center;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: transparent;
+}

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIcon from '../../elements/icon/u-icon.vue'
 import UTooltip from '../tooltip/u-tooltip.vue'
-import { UBadge } from '../'
+import UBadge from '../badge/u-badge.vue'
 import { Badge } from '../badge/u-badge.vue'
 import { TableCellIconColor } from './table.type'
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UProgressBar } from '../'
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
 
 interface Props {
   label?: string

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

@@ -7,6 +7,7 @@ interface Props extends TableCellBase {
   infoText?: string
   textStyle?: TableCellTextStyle
   nowrap?: boolean
+  dotColor?: string
 }
 
 const {
@@ -15,6 +16,7 @@ const {
   hAlign = TableCellHAlign.left,
   vAlign = TableCellVAlign.center,
   nowrap = false,
+  dotColor = '',
 } = defineProps<Props>()
 </script>
 
@@ -24,6 +26,7 @@ const {
     :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
   >
     <div :class="['cell-content', `text-${textStyle}`, { nowrap }]">
+      <span v-if="dotColor" class="table-cell__dot" :style="{ backgroundColor: dotColor }"></span>
       <slot><span v-html="text" /></slot>
     </div>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { URichtext } from '../'
+import URichtext from '../richtext/u-richtext.vue'
 
 interface Props {
   variant: 'lead' | 'sub'

package/dist/base-style.css

@@ -317,8 +317,8 @@ body {
   --e-c-signal-02-700-rgb: 204, 122, 0;
   --e-c-signal-02-900: #703600;
   --e-c-signal-02-900-rgb: 112, 54, 0;
-  --e-c-signal-03-100: #ffb5c4;
-  --e-c-signal-03-100-rgb: 255, 181, 196;
+  --e-c-signal-03-100: #ffccd7;
+  --e-c-signal-03-100-rgb: 255, 204, 215;
   --e-c-signal-03-500: #ff0c3e;
   --e-c-signal-03-500-rgb: 255, 12, 62;
   --e-c-signal-03-700: #b90d31;

package/elements/button/u-button.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { UIcon, ULoader } from '../'
+import ULoader from '../loader/u-loader.vue'
+import UIcon from '../icon/u-icon.vue'
 import { computed } from 'vue'
 
 // TODO: use enums for variant prop.

package/layout/portal-block/portal-block.scss

@@ -1,8 +1,41 @@
 .portal-block {
-  // default 'small'
-  margin-bottom: var(--e-space-6);
+  &.bottom-space-0 {
+    margin-bottom: 0;
+  }
+
+  &.bottom-space-100 {
+    margin-bottom: var(--e-space-6);
+  }
 
-  &.big {
+  &.bottom-space-300 {
     margin-bottom: var(--e-space-10);
   }
+
+  &.bottom-space-500 {
+    margin-bottom: var(--e-space-16);
+  }
+
+  &.bottom-space-700 {
+    margin-bottom: var(--e-space-28);
+  }
+
+  &.top-space-0 {
+    margin-top: 0;
+  }
+
+  &.top-space-100 {
+    margin-top: var(--e-space-6);
+  }
+
+  &.top-space-300 {
+    margin-top: var(--e-space-10);
+  }
+
+  &.top-space-500 {
+    margin-top: var(--e-space-16);
+  }
+
+  &.top-space-700 {
+    margin-top: var(--e-space-28);
+  }
 }

package/layout/portal-block/u-portal-block.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
+/*
+Preferably only use `bottom-space`.
+`top-space` can make sense for last portal-block for example.
+This works because parent container is `display: block`, meaning that the vertical margins will collapse.
+ */
 interface Props {
   big?: boolean
-  space?: 'small' | 'big'
+  bottomSpace?: '0' | '100' | '300' | '500' | '700'
+  topSpace?: '0' | '100' | '300' | '500' | '700'
 }
 
-const { space = 'small' } = defineProps<Props>()
+const { bottomSpace = '100', topSpace = '0' } = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="['portal-block', space]">
+  <div :class="['portal-block', `bottom-space-${bottomSpace}`, `top-space-${topSpace}`]">
     <slot />
   </div>
 </template>

package/modules/dialog/dialog.scss

@@ -4,6 +4,7 @@
 
 .dialog-container {
   --overflow-gradient-height: var(--e-space-10);
+  --dialog-max-width: #{a.rem(540)};
 
   padding: 0;
   border: 0;
@@ -26,18 +27,6 @@
     opacity: 0.4;
     animation: fade-in-backdrop var(--e-trs-duration-faster) var(--e-trs-easing-default);
   }
-
-  &.has-header-image {
-    .dialog__header-image-container {
-      display: flex;
-    }
-  }
-
-  &.has-content-image {
-    .dialog__content-image {
-      display: block;
-    }
-  }
 }
 
 .dialog {
@@ -47,14 +36,22 @@
   overflow: auto;
   scrollbar-width: none;
   border-radius: var(--e-brd-radius-3);
-  padding: var(--e-space-7) var(--e-space-7) 0;
+  padding: var(--e-space-8) var(--e-space-8) 0;
   height: a.rem(670);
   max-height: 80vh;
-  max-width: a.rem(540);
+  max-width: var(--dialog-max-width);
   min-width: a.rem(480);
 
-  &.auto-height {
+  &.fit-height {
     height: auto;
+
+    .cta-container {
+      margin-top: 0;
+
+      &::after {
+        content: none;
+      }
+    }
   }
 
   * + .dialog__content-image {
@@ -67,13 +64,14 @@
     min-width: 0;
     height: auto;
     min-height: a.rem(440);
+    padding-top: var(--e-space-6);
     padding-left: var(--e-space-5);
     padding-right: var(--e-space-5);
   }
 }
 
 .dialog__header-image-container {
-  display: none;
+  display: flex;
   justify-content: center;
   height: a.rem(184);
   margin-bottom: var(--e-space-8);
@@ -105,8 +103,6 @@
 }
 
 .dialog__content-image {
-  display: none;
-
   img {
     width: 100%;
   }
@@ -116,10 +112,10 @@
   position: sticky;
   display: flex;
   flex-direction: column;
-  row-gap: var(--e-space-4);
+  gap: var(--e-space-4) var(--e-space-3);
   bottom: 0;
   margin-top: var(--overflow-gradient-height);
-  padding: var(--e-space-8) var(--e-space-1) var(--e-space-7);
+  padding: var(--e-space-8) var(--e-space-1) var(--e-space-8);
   background-color: var(--e-c-mono-00);
 
   &::after {
@@ -132,13 +128,22 @@
     background-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
   }
 
+  &.cta-inline {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
   @include a.bp(m) {
-    padding: var(--e-space-8) 0 var(--e-space-7);
+    padding: var(--e-space-8) 0 var(--e-space-6);
+
+    &.cta-inline {
+      display: flex;
+    }
   }
 }
 
 // MOBILE "MODAL" Variant
-.dialog-container.modal {
+.dialog-container.variant-modal {
   @include a.bp(m) {
     padding-left: a.rem(a.$container-edge-m);
     padding-right: a.rem(a.$container-edge-m);
@@ -151,7 +156,7 @@
 }
 
 // MOBILE "SLIDE-OUT" Variant
-.dialog-container.slideout {
+.dialog-container.variant-slideout {
   @include a.bp(m) {
     align-items: flex-end;
 

package/modules/dialog/u-dialog.vue

@@ -11,9 +11,10 @@ interface Props {
   headerImage?: Image
   contentImage?: Image
   closeBtnLabel?: string
-  autoHeight?: boolean
   modal?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
+  ctaInline?: boolean
+  fitHeight?: boolean
 }
 
 const {
@@ -24,6 +25,8 @@ const {
   contentImage = undefined,
   mobileDialogStyle = 'modal',
   closeBtnLabel = getTranslation('close'),
+  ctaInline = false,
+  fitHeight = false,
 } = defineProps<Props>()
 
 const visible = defineModel<boolean>('visible')
@@ -84,18 +87,11 @@ watch(visible, (newV) => {
   <dialog
     ref="dialog"
     closedby="none"
-    :class="[
-      'dialog-container',
-      mobileDialogStyle,
-      {
-        'has-header-image': !!slots['header-image'] || (headerImage?.src && headerImage?.alt),
-        'has-content-image': !!slots['content-image'] || contentImage,
-      },
-    ]"
+    :class="['dialog-container', `variant-${mobileDialogStyle}`]"
   >
-    <div :class="['dialog', { 'auto-height': autoHeight }]">
-      <div class="dialog__header-image-container">
-        <slot name="header-image">
+    <div :class="['dialog', { 'fit-height': fitHeight }]">
+      <div v-if="!!slots.headerImage || headerImage" class="dialog__header-image-container">
+        <slot name="headerImage">
           <img v-bind="headerImage" />
         </slot>
       </div>
@@ -119,16 +115,17 @@ watch(visible, (newV) => {
           <slot name="custom"></slot>
         </div>
 
-        <div class="dialog__content-image">
-          <slot name="content-image">
+        <div v-if="!!slots.contentImage || contentImage" class="dialog__content-image">
+          <slot name="contentImage">
             <img v-bind="contentImage" />
           </slot>
         </div>
       </div>
 
-      <div class="cta-container">
-        <slot name="cta"></slot>
-        <UButton @click="visible = false">{{ closeBtnLabel || getTranslation('close') }}</UButton>
+      <div :class="['cta-container', { 'cta-inline': ctaInline }]">
+        <slot name="cta">
+          <UButton @click="visible = false">{{ closeBtnLabel || getTranslation('close') }}</UButton>
+        </slot>
       </div>
     </div>
   </dialog>

package/modules/index.js

@@ -9,3 +9,4 @@ export { default as UToast, toast } from './toast/u-toast.vue'
 export { default as UDialog } from './dialog/u-dialog.vue'
 export { default as USearchFilter } from './search-filter/u-search-filter.vue'
 export { default as UContentTitle } from './content-title/u-content-title.vue'
+export { default as ULoginAnimation } from './login-animation/u-login-animation.vue'

package/modules/login-animation/butterfly-sprite.json

@@ -0,0 +1,9 @@
+[
+  [0,0],
+  [202, 0],
+  [404, 0],
+  [606, 0],
+  [808, 0],
+  [1010, 0],
+  [1212, 0]
+]

package/modules/login-animation/login-animation.scss

@@ -0,0 +1,65 @@
+@use '../../base/abstracts' as a;
+
+$sprite-width: 52px;
+$sprite-height: 77px;
+$sprite-width-mobile: 40px;
+$sprite-height-mobile: 59px;
+
+@keyframes island-image {
+  0% {
+    transform: translateY(-10px);
+  }
+
+  100% {
+    transform: translateY(10px);
+  }
+}
+
+.login-animation {
+  background-color: var(--e-c-secondary-01-1000);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-animation__image {
+  position: relative;
+  max-width: 680px;
+  margin: 0 60px;
+
+  img {
+    user-select: none;
+    pointer-events: none;
+    display: block;
+    width: 100%;
+    animation-name: island-image;
+    animation-iteration-count: infinite;
+    animation-duration: 1.6s;
+    animation-direction: alternate;
+    animation-timing-function: ease-in-out;
+  }
+
+  @include a.bp(lg) {
+    margin: 0 40px;
+  }
+
+  @include a.bp(m) {
+    margin: 0 20px;
+  }
+}
+
+.login-animation__sprite {
+  position: absolute;
+  z-index: 1;
+  top: calc(50% - (#{$sprite-height} / 2) + 10%);
+  left: calc(50% - (#{$sprite-width} / 2) + 10%);
+
+  @include a.bp(m) {
+    width: $sprite-width-mobile;
+    height: $sprite-height-mobile;
+  }
+
+  &.flip {
+  }
+}

package/modules/login-animation/u-login-animation.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { USpriteAnimation } from '../../components'
+import { useTemplateRef, ref } from 'vue'
+import butterflySpritePositions from './butterfly-sprite.json'
+import butterflySprite from './butterfly-sprite.png'
+import { gsap } from 'gsap'
+
+const butterfly = useTemplateRef('butterfly')
+const butterflyWrapper = useTemplateRef('butterflyWrapper')
+const container = useTemplateRef('container')
+const mouseRightSide = ref(true)
+
+const onSpriteReady = () => {
+  butterfly.value.playLoop()
+}
+
+const onMouseleave = () => {
+  gsap.to(butterflyWrapper.value, {
+    x: 0,
+    y: 0,
+    ease: 'power2',
+    duration: 4,
+    overwrite: true,
+  })
+}
+
+const onMousemove = (e) => {
+  const { left, top, width, height } = container.value.getBoundingClientRect()
+
+  const halfW = width / 2
+  const halfH = height / 2
+  const mouseX = e.x - left
+  const mouseY = e.y - top
+
+  mouseRightSide.value = mouseX > halfW
+
+  const x = gsap.utils.interpolate(-halfW, halfW, mouseX / width)
+  const y = gsap.utils.interpolate(-halfH, halfH, mouseY / height)
+
+  gsap.to(butterflyWrapper.value, {
+    x: x,
+    y: y,
+    duration: 4,
+    ease: 'power1',
+    overwrite: true,
+  })
+}
+</script>
+
+<template>
+  <div ref="container" class="login-animation" @mousemove="onMousemove" @mouseleave="onMouseleave">
+    <div class="login-animation__image">
+      <div ref="butterflyWrapper" :class="['login-animation__sprite', { flip: !mouseRightSide }]">
+        <USpriteAnimation
+          ref="butterfly"
+          :style="{
+            transform: mouseRightSide ? 'scaleX(1)' : 'scaleX(-1)',
+          }"
+          :spritesheet-path="butterflySprite"
+          :frame-positions="butterflySpritePositions"
+          :frame-width="202"
+          :frame-height="300"
+          :width="52"
+          :height="77"
+          :duration="1000"
+          @ready="onSpriteReady"
+        />
+      </div>
+      <img src="/static/ui-assets/images/forest.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./login-animation.scss"></style>

package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue

@@ -23,24 +23,38 @@ interface Props {
 
 defineProps<Props>()
 
+const model = defineModel<boolean>({ default: false })
+
 const mobilePanelEl = useTemplateRef('mobile-panel')
 const mobileOpen = ref(false)
 const isMobilePanelOpening = ref(false)
 const isMobilePanelClosing = ref(false)
 
-const onToggleMenu = () => {
+const openPanel = () => {
   mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
 
   document.documentElement.classList.toggle('navigation-toolbar-mobile-open', true)
   isMobilePanelOpening.value = true
 }
 
-const onNavClose = () => {
+const closePanel = () => {
   mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
 
   isMobilePanelClosing.value = true
 }
 
+const onToggleMenu = () => {
+  openPanel()
+
+  model.value = true
+}
+
+const onNavClose = () => {
+  closePanel()
+
+  model.value = false
+}
+
 const onMobilePanelTransitionEnd = (e) => {
   if (e.target !== mobilePanelEl.value) {
     return
@@ -58,6 +72,14 @@ const onMobilePanelTransitionEnd = (e) => {
 watch(mobileOpen, (newV) => {
   document.documentElement.classList.toggle('navigation-toolbar-mobile-open', newV)
 })
+
+watch(model, (newV) => {
+  if (newV === true) {
+    openPanel()
+  } else {
+    closePanel()
+  }
+})
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,20 +24,20 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@lottiefiles/dotlottie-web": "^0.60.0",
     "@tsconfig/node22": "^22.0.5",
-    "@types/node": "^22.19.2",
-    "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.22",
-    "chokidar": "^4.0.3",
+    "@types/node": "^25.0.3",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.23",
+    "chokidar": "^5.0.0",
     "postcss": "^8.5.6",
-    "sass": "^1.96.0",
+    "sass": "^1.97.1",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-vue": "^0.10.10",
-    "@lottiefiles/dotlottie-web": "^0.58.1",
+    "@lottiefiles/dotlottie-vue": "^0.10.12",
     "@lottiefiles/lottie-player": "^2.0.12",
-    "gsap": "^3.14.1",
+    "gsap": "^3.14.2",
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {