@energie360/ui-library 0.1.32 → 0.1.34

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 {
@@ -129,16 +125,30 @@
     left: 0;
     width: 100%;
     height: var(--overflow-gradient-height);
-    background-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
+    background-image: linear-gradient(
+      0deg,
+      rgb(255 255 255 / 100%) 0%,
+      rgb(255 255 255 / 80%) 50%,
+      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 +161,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/footer/footer.scss

@@ -28,9 +28,35 @@
   }
 
   &.portal {
+    container-type: inline-size;
+
     .footer__container {
       @include l.portal-content-container;
     }
+
+    @container (width < 820px) {
+      // Mobile Layout
+      .footer__bottom-row {
+        flex-direction: column;
+      }
+
+      .footer__meta-navigation {
+        flex-direction: column;
+        gap: var(--e-space-4);
+        margin-bottom: var(--e-space-8);
+      }
+
+      .footer__copyright {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+
+      .footer__language-nav {
+        position: relative;
+        margin-bottom: calc(var(--e-space-8) + #{a.rem(18)});
+      }
+    }
   }
 }
 
@@ -48,7 +74,7 @@
 .footer__top-row {
   display: flex;
   flex-wrap: wrap;
-  grid-gap: var(--e-space-12);
+  gap: var(--e-space-12);
 }
 
 .footer__addresses-column {
@@ -87,7 +113,7 @@
 
 .footer__social-links {
   display: flex;
-  grid-gap: var(--e-space-6);
+  gap: var(--e-space-6);
 }
 
 .footer__bottom {
@@ -126,7 +152,7 @@
   @include a.type(100);
 
   display: flex;
-  grid-gap: var(--e-space-6);
+  gap: var(--e-space-6);
   margin-bottom: var(--e-space-3);
 
   a {
@@ -139,7 +165,7 @@
 
   @include a.bp(m) {
     flex-direction: column;
-    grid-gap: var(--e-space-4);
+    gap: var(--e-space-4);
     margin-bottom: var(--e-space-8);
   }
 }

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

@@ -27,6 +27,7 @@ $sprite-height-mobile: 59px;
   position: relative;
   max-width: 680px;
   margin: 0 60px;
+  padding: 5%;
 
   img {
     user-select: none;
@@ -59,7 +60,4 @@ $sprite-height-mobile: 59px;
     width: $sprite-width-mobile;
     height: $sprite-height-mobile;
   }
-
-  &.flip {
-  }
 }

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

@@ -15,6 +15,8 @@ const onSpriteReady = () => {
 }
 
 const onMouseleave = () => {
+  mouseRightSide.value = Number(gsap.getProperty(butterflyWrapper.value, 'x')) < 0
+
   gsap.to(butterflyWrapper.value, {
     x: 0,
     y: 0,
@@ -24,7 +26,7 @@ const onMouseleave = () => {
   })
 }
 
-const onMousemove = (e) => {
+const onMousemove = (e: MouseEvent) => {
   const { left, top, width, height } = container.value.getBoundingClientRect()
 
   const halfW = width / 2
@@ -32,30 +34,27 @@ const onMousemove = (e) => {
   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,
+    duration: 3.5,
     ease: 'power1',
     overwrite: true,
+    onUpdate() {
+      mouseRightSide.value =
+        Number(gsap.getProperty(butterflyWrapper.value, 'x')) < mouseX - width / 2
+    },
   })
 }
 </script>
 
 <template>
-  <div class="login-animation">
-    <div
-      ref="container"
-      class="login-animation__image"
-      @mousemove="onMousemove"
-      @mouseleave="onMouseleave"
-    >
-      <div ref="butterflyWrapper" :class="['login-animation__sprite', { flip: !mouseRightSide }]">
+  <div ref="container" class="login-animation" @mousemove="onMousemove" @mouseleave="onMouseleave">
+    <div class="login-animation__image">
+      <div ref="butterflyWrapper" class="login-animation__sprite">
         <USpriteAnimation
           ref="butterfly"
           :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.32",
+  "version": "0.1.34",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -25,19 +25,19 @@
   "license": "MIT",
   "devDependencies": {
     "@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.10",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.23",
+    "chokidar": "^5.0.0",
     "postcss": "^8.5.6",
-    "sass": "^1.96.0",
+    "sass": "^1.97.3",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-vue": "^0.10.10",
-    "@lottiefiles/dotlottie-web": "^0.58.1",
+    "@lottiefiles/dotlottie-vue": "^0.10.13",
+    "@lottiefiles/dotlottie-web": "^0.61.0",
     "@lottiefiles/lottie-player": "^2.0.12",
-    "gsap": "^3.14.1",
+    "gsap": "^3.14.2",
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {

package/utils/http/url.js

@@ -0,0 +1,25 @@
+/**
+ * Create query parameter for an url with an object or an array
+ * INFO: Use an array as parameter if you have multiple values for a key
+ *
+ * @param url {string} - url to append the query parameters
+ * @param params {(object | Array)} - object with key, value as query parameter
+ * e.q object => random/testing, data = {'test': 1, 'hello': 'world'} => random/testing?test=1&hello=world
+ * e.q array => random/testing, data = [['test', 2], ['hello', 'earth']] => random/testing?test=2&hello=earth
+ *
+ * @returns {string}
+ */
+export function addQueryParameter(url, params) {
+  const queryParams = []
+
+  if (Array.isArray(params)) {
+    queryParams.push(params.map((param) => param.map(encodeURIComponent)))
+  } else {
+    queryParams.push(Object.keys(params).map((key) => [key, params[key]].map(encodeURIComponent)))
+  }
+
+  const queryString = queryParams.map((param) =>
+    param.map((keyValue) => keyValue.join('=')).join('&'),
+  )
+  return `${url}?${queryString}`
+}

package/utils/vue/helpers.ts

@@ -0,0 +1,27 @@
+// From https://github.com/vuejs/core/issues/4733
+
+import { Comment, Text, Fragment, type Slot, type VNode } from 'vue'
+
+export function hasSlotContent(slot: Slot | undefined | null, props: any = {}) {
+  return !isSlotEmpty(slot, props)
+}
+
+export function isSlotEmpty(slot: Slot | undefined | null, props: any = {}) {
+  return isVNodeEmpty(slot?.(props))
+}
+
+export function isVNodeEmpty(vnode: VNode | VNode[] | undefined | null) {
+  return (
+    !vnode ||
+    asArray(vnode).every(
+      (vnode) =>
+        vnode.type === Comment ||
+        (vnode.type === Text && !vnode.children?.length) ||
+        (vnode.type === Fragment && !vnode.children?.length),
+    )
+  )
+}
+
+export function asArray<T>(arg: T | T[] | null) {
+  return Array.isArray(arg) ? arg : arg !== null ? [arg] : []
+}

package/wizard/wizard-outro/u-wizard-outro.vue

@@ -7,13 +7,16 @@ interface Props {
   title?: string
   text?: string
   image?: Image
+
   cta?: Cta
 }
 
 const { text = '', image = undefined, cta = undefined, title = '' } = defineProps<Props>()
 
 const slots = useSlots()
+
 const hasCta = computed(() => !!slots.cta || cta)
+
 const hasText = computed(() => !!slots.text || text)
 </script>