@energie360/ui-library 0.1.24 → 0.1.26

package/components/card/u-card.vue

@@ -12,7 +12,16 @@ const toggleActiveCard = (v: boolean) => {
   isActive.value = v
 }
 
-provide('card', { toggleActiveCard })
+const isHovering = ref(false)
+
+const onMouseenter = () => {
+  isHovering.value = true
+}
+const onMouseleave = () => {
+  isHovering.value = false
+}
+
+provide('card', { toggleActiveCard, isHovering })
 
 watch(
   () => active,
@@ -23,7 +32,11 @@ watch(
 </script>
 
 <template>
-  <section :class="['card', { 'is-active': isActive }]">
+  <section
+    :class="['card', { 'is-active': isActive }]"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
     <slot></slot>
   </section>
 </template>

package/components/card-amount-illustrated/card-amount-illustrated.scss

@@ -27,9 +27,10 @@
   right: 0;
   aspect-ratio: 5/2;
   width: 85px;
+  z-index: 1;
 }
 
 .card-amount-illustrated__slider {
-  margin-top: -2px;
-  margin-bottom: -2px;
+  margin-top: -3px;
+  margin-bottom: -3px;
 }

package/components/card-amount-illustrated/u-card-amount-illustrated.vue

@@ -1,36 +1,73 @@
 <script setup lang="ts">
-import { SpriteAnimation } from '../sprite-animation/u-sprite-animation.vue'
-import { UProgressBar, USpriteAnimation } from '../'
-import { useTemplateRef } from 'vue'
+import { UProgressBar } from '../'
+import { useTemplateRef, inject, watch, ref, onMounted, onUnmounted } from 'vue'
 import { Image } from '../../elements/types'
+import '@lottiefiles/lottie-player'
 
 interface Props {
   title?: string
   amount?: number
   maxAmountImage: Image
-  spriteAnimation?: Pick<
-    SpriteAnimation,
-    'spritesheetPath' | 'framePositions' | 'frameHeight' | 'frameWidth'
-  >
+  lottieSrc: string
 }
 
-defineProps<Props>()
+const { lottieSrc, title = '', amount = -1 } = defineProps<Props>()
 defineEmits(['amount'])
+const { isHovering: cardIsHovering } = inject('card', {})
 
-const spriteAnimRef = useTemplateRef('spriteAnim')
-let pausedFrame: number
-
-const onPause = (frame: number) => {
-  pausedFrame = frame
-}
+const lottieWrapperRef = useTemplateRef('lottie-wrapper')
+let lottieEl
+let lottie
+const lottieReady = ref(false)
+const isHovering = ref(false)
 
 const onMouseenter = () => {
-  spriteAnimRef.value.play()
+  if (isHovering.value === true || lottieReady.value === false) {
+    return
+  }
+
+  lottie.setDirection(1)
+  lottie.play()
+  isHovering.value = true
 }
 
 const onMouseleave = () => {
-  spriteAnimRef.value.pause()
-  spriteAnimRef.value.playReverse(pausedFrame)
+  if (cardIsHovering?.value === true || lottieReady.value === false) {
+    return
+  }
+
+  lottie.setDirection(-1)
+  lottie.play()
+  isHovering.value = false
+}
+
+onMounted(() => {
+  // lottie-player web-component will be ready in this callback.
+  const tmp = document.createElement('lottie-player')
+  tmp.setAttribute('src', lottieSrc)
+  tmp.setAttribute('speed', '2.5')
+  lottieEl = lottieWrapperRef.value.appendChild(tmp)
+
+  lottieEl.addEventListener('load', () => {
+    lottie = lottieEl.getLottie()
+    lottieReady.value = true
+  })
+})
+
+onUnmounted(() => {
+  if (lottieEl) {
+    lottieEl.remove()
+  }
+})
+
+if (cardIsHovering) {
+  watch(cardIsHovering, (v) => {
+    if (v) {
+      onMouseenter()
+    } else {
+      onMouseleave()
+    }
+  })
 }
 </script>
 
@@ -41,22 +78,11 @@ const onMouseleave = () => {
     </h3>
 
     <div
-      v-if="$slots.illustration || spriteAnimation"
+      ref="lottie-wrapper"
       class="card-amount-illustrated__illustration"
+      @mouseenter="onMouseenter"
+      @mouseleave="onMouseleave"
     >
-      <slot name="illustration">
-        <USpriteAnimation
-          ref="spriteAnim"
-          v-bind="spriteAnimation"
-          :duration="200"
-          :width="200"
-          :height="200"
-          @mouseenter="onMouseenter"
-          @mouseleave="onMouseleave"
-          @pause="onPause"
-        ></USpriteAnimation>
-      </slot>
-
       <div
         v-if="($slots.maxAmountImage || maxAmountImage) && amount === 100"
         class="card-amount-illustrated__max-amount-image"

package/components/card-group/card-group.scss

@@ -26,16 +26,18 @@
   &.columns-4 {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr;
-  }
 
-  &.use-carousel {
-    display: block;
+    @include a.bp(xl) {
+      grid-template-columns: repeat(2, 1fr);
+    }
 
-    // touch-action: pan-y;
+    @include a.bp(m) {
+      grid-template-columns: repeat(1, 1fr);
+    }
   }
 
   @include a.bp(lg) {
-    &:has(> :last-child:nth-child(n)) {
+    &:has(> :last-child:nth-child(n)):not(.columns-4) {
       grid-template-columns: repeat(1, 1fr);
       grid-template-rows: 1fr;
     }

package/components/card-group/u-card-group.vue

@@ -1,48 +1,17 @@
 <script setup lang="ts">
-import { register } from 'swiper/element/bundle'
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 import { debounceRaf } from '../../utils/functions/debounce'
 import { isLarge } from '../../utils/functions/breakpoint'
 import { useRadioGroup } from '../../elements/radio-group/radio-group-composables'
 
-// Register swiper custom elements.
-register()
-
 interface Props {
   columns?: 1 | 2 | 3 | 4 | 'auto'
-  useCarousel?: boolean
 }
 
-const { columns = 'auto', useCarousel = false } = defineProps<Props>()
+const { columns = 'auto' } = defineProps<Props>()
 const model = defineModel<string>()
 const group = useTemplateRef('group')
 
-const initSwiper = () => {
-  if (!useCarousel) {
-    return
-  }
-
-  const swiperEl = group.value.querySelector('swiper-container')
-  const swiperParams = {
-    spaceBetween: 20,
-    breakpoints: {
-      1240: {
-        slidesPerView: 4,
-      },
-      1020: {
-        slidesPerView: 3,
-      },
-      740: {
-        slidesPerView: 2,
-      },
-    },
-  }
-
-  Object.assign(swiperEl, swiperParams)
-
-  swiperEl.initialize()
-}
-
 const onResize = debounceRaf(() => {
   const headers = Array.from(group.value.querySelectorAll('.card-header'))
 
@@ -80,8 +49,6 @@ onMounted(() => {
     // Initial state
     onResize()
   })
-
-  initSwiper()
 })
 
 onUnmounted(() => {
@@ -92,29 +59,11 @@ useRadioGroup({
   model,
   provideKey: 'card-group',
 })
-
-watch(
-  () => useCarousel,
-  () => {
-    initSwiper()
-  },
-)
 </script>
 
 <template>
-  <div ref="group" :class="['card-group', `columns-${columns}`, { 'use-carousel': useCarousel }]">
-    <template v-if="useCarousel">
-      <swiper-container init="false">
-        <template v-for="(vnode, idx) in $slots.default()[0].children" :key="idx">
-          <swiper-slide>
-            <component :is="vnode" />
-          </swiper-slide>
-        </template>
-      </swiper-container>
-    </template>
-    <template v-else>
-      <slot />
-    </template>
+  <div ref="group" :class="['card-group', `columns-${columns}`]">
+    <slot />
   </div>
 </template>
 

package/components/index.js

@@ -67,3 +67,4 @@ export { default as UChip } from './chip/u-chip.vue'
 export { default as USlider } from './slider/u-slider.vue'
 export { default as USpriteAnimation } from './sprite-animation/u-sprite-animation.vue'
 export { default as USliderProgressAnimation } from './slider-progress-animation/u-slider-progress-animation.vue'
+export { default as UStickyCta } from './sticky-cta/u-sticky-cta.vue'

package/components/richtext/_wizard.scss

@@ -3,7 +3,7 @@
 .richtext.richtext--wizard {
   // Spacing rules
   * + * {
-    margin-top: var(--e-spac-2);
+    margin-top: var(--e-space-2);
   }
 
   * + h2,

package/components/sprite-animation/u-sprite-animation.vue

@@ -84,7 +84,7 @@ const durationFromFps = () => (1000 / fps) * framePositions.length
 const durationFromFrames = (start, end) =>
   (Math.abs(end - start) / framePositions.length) * duration
 
-const animate = (start, end) => {
+const animate = (start, end, loop = false) => {
   isAnimating = true
 
   animation = animateValue({
@@ -96,6 +96,11 @@ const animate = (start, end) => {
       toFrame(value)
     },
     onComplete(value) {
+      if (loop) {
+        animate(start, end, loop)
+        return
+      }
+
       isAnimating = false
       emits('pause', getFrameFromProgress(value))
     },
@@ -110,6 +115,10 @@ const play = (start = 0, end = framePositions.length - 1) => {
   animate(start, end)
 }
 
+const playLoop = () => {
+  animate(0, framePositions.length - 1, true)
+}
+
 const playReverse = (start = framePositions.length - 1, end = 0) => {
   if (isAnimating) {
     animation.abort()
@@ -145,6 +154,7 @@ onMounted(async () => {
 defineExpose({
   play,
   playReverse,
+  playLoop,
   pause,
   toFrame,
 })

package/components/sticky-cta/u-sticky-cta.scss

@@ -0,0 +1,20 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.sticky-cta {
+  position: sticky;
+  bottom: 0;
+  padding: var(--e-space-6) 0;
+  background-color: var(--e-c-mono-00);
+  border-top: 1px solid var(--e-c-mono-200);
+  z-index: 1000;
+}
+
+.sticky-cta__inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.container {
+  @include c.grid-container;
+}

package/components/sticky-cta/u-sticky-cta.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="sticky-cta">
+    <div class="container">
+      <div class="sticky-cta__inner">
+        <div>
+          <slot name="info"></slot>
+        </div>
+
+        <slot name="cta"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./u-sticky-cta.scss"></style>

package/components/table/table-row.scss

@@ -1,20 +1,18 @@
 @use '../../base/abstracts' as a;
 
-.table-row {
+@mixin table-row {
   display: table-row;
   border-bottom: 1px solid var(--e-c-mono-100);
+}
+
+.table-row {
+  @include table-row;
 
   &.highlight {
     background-color: var(--e-c-mono-50);
   }
 
-  &.mobile-layout-card {
-    @include a.bp(m) {
-      display: grid;
-      gap: var(--e-space-2);
-      padding: var(--e-space-4);
-      border: 1px solid var(--e-c-mono-200);
-      border-radius: var(--e-brd-radius-2);
-    }
+  &.dark {
+    background-color: var(--e-c-mono-100);
   }
 }

package/components/table/table.scss

@@ -1,5 +1,11 @@
 @use '../../base/abstracts' as a;
 
+.table-title {
+  @include a.type(200, strong);
+
+  padding-left: var(--e-space-4);
+}
+
 .table {
   display: table;
   border-collapse: collapse;

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

@@ -24,7 +24,7 @@ const {
     :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
   >
     <div :class="['cell-content', `text-${textStyle}`, { nowrap }]">
-      <slot>{{ text }}</slot>
+      <slot><span v-html="text" /></slot>
     </div>
 
     <div v-if="infoText" class="info-tooltip">

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 interface Props {
   highlight?: boolean
+  dark?: boolean
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <div role="row" :class="['table-row', { highlight }]">
+  <div role="row" :class="['table-row', { highlight, dark }]">
     <slot></slot>
   </div>
 </template>
@@ -15,3 +16,17 @@ defineProps<Props>()
 <style scoped lang="scss">
 @use './table-row.scss';
 </style>
+
+<style lang="scss">
+@use './table-row.scss' as tr;
+
+.table-row-linked {
+  @include tr.table-row;
+
+  transition: background var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  &:hover {
+    background-color: var(--e-c-primary-01-50);
+  }
+}
+</style>

package/components/table/u-table.vue

@@ -1,6 +1,16 @@
+<script lang="ts" setup>
+interface Props {
+  role?: string
+  title?: string
+}
+
+const { role = 'table', title = '' } = defineProps<Props>()
+</script>
+
 <template>
   <div class="table-scroll-wrapper">
-    <div role="table" class="table">
+    <p v-if="title" class="table-title">{{ title }}</p>
+    <div :role="role" class="table">
       <slot></slot>
     </div>
   </div>