@energie360/ui-library 0.1.22 → 0.1.24

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import UIcon from '../../elements/icon/u-icon.vue'
 import UTooltip from '../tooltip/u-tooltip.vue'
+import { UBadge } from '../'
+import { Badge } from '../badge/u-badge.vue'
 import { TableCellIconColor } from './table.type'
 
 interface IconItem {
   icon: string
   title: string
   color: TableCellIconColor
+  badge: Badge
 }
 
 interface Props {
@@ -22,13 +25,15 @@ const isColorKeyword = (str) => Object.values(TableCellIconColor).includes(str)
   <div class="cell-icon-group">
     <template v-for="(item, idx) in icons" :key="idx">
       <UTooltip :title="item.title">
-        <UIcon
-          :name="item.icon"
-          :class="{ [`icon-color-${item.color}`]: isColorKeyword(item.color) }"
-          :style="{
-            color: !isColorKeyword(item.color) ? item.color : false,
-          }"
-        ></UIcon>
+        <UBadge :show="!!item.badge" v-bind="item.badge">
+          <UIcon
+            :name="item.icon"
+            :class="{ [`icon-color-${item.color}`]: isColorKeyword(item.color) }"
+            :style="{
+              color: !isColorKeyword(item.color) ? item.color : false,
+            }"
+          ></UIcon>
+        </UBadge>
       </UTooltip>
     </template>
   </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import UProgressBar from '../progress-bar/u-progress-bar.vue'
+import { UProgressBar } from '../'
 
 interface Props {
   label?: string
@@ -13,10 +13,10 @@ const { label = '', labelPosition = 'top' } = defineProps<Props>()
 <template>
   <div :class="['cell-progress-bar', `label-position-${labelPosition}`]">
     <p v-if="label" class="progress-bar-label">{{ label }}</p>
-    <UProgressBar :value="value"></UProgressBar>
+    <div class="cell-progress-bar__progress-bar">
+      <UProgressBar :value="value"></UProgressBar>
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './cell-progress-bar.scss';
-</style>
+<style scoped lang="scss" src="./cell-progress-bar.scss"></style>

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

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

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { URichtext } from '../'
+
 interface Props {
   variant: 'lead' | 'sub'
   title?: string
@@ -6,21 +8,25 @@ interface Props {
   centered?: boolean
 }
 
-const { title = '', text = '', centered = false } = defineProps<Props>()
+const { title = '', text = '' } = 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 :class="['text-block', `text-block--${variant}`, { centered }]">
+    <h2 v-if="$slots.title || title" class="text-block__title">
+      <slot name="title">
+        <span v-html="title"></span>
+      </slot>
+    </h2>
 
-    <div v-if="text" class="wizard-text-block__text richtext" v-html="text" />
+    <div v-if="$slots.text || text" class="text-block__text">
+      <URichtext>
+        <slot name="text">
+          <div v-html="text" />
+        </slot>
+      </URichtext>
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './text-block.scss';
-
-.centered {
-  text-align: center;
-}
-</style>
+<style scoped lang="scss" src="./text-block.scss"></style>

package/components/tooltip/tooltip.scss

@@ -1,13 +1,15 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .tooltip {
+  --tooltip-min-width: 84px;
+
   pointer-events: none;
   z-index: a.$layer-tooltip;
   position: absolute;
   top: 0;
   left: 0;
   max-width: a.rem(360);
-  min-width: a.rem(84);
+  min-width: var(--tooltip-min-width);
   opacity: 0;
   transform: translateY(-5px);
   transition:

package/components/tooltip/u-tooltip.vue

@@ -5,9 +5,18 @@ import type { PopoverPositionParams } from './popover'
 
 interface Props extends PopoverPositionParams {
   title: string
+  disabled?: boolean
+  offsetX?: number
 }
 
-const { placement = 'top-center', offset = 12, viewportPadding = 20 } = defineProps<Props>()
+const {
+  placement = 'top-center',
+  offset = 12,
+  viewportPadding = 20,
+  disabled = false,
+  // This optional prop is to potentially fix some slightly off calculations.
+  offsetX = 0,
+} = defineProps<Props>()
 
 const tooltip = ref<HTMLDivElement | null>(null)
 const root = ref<HTMLSpanElement | null>(null)
@@ -18,10 +27,18 @@ const isTooltipVisible = ref<boolean>(false)
 // For mobile and touch devices it's th opposite, pointer events will be fired first.
 // This way we can detect on what device we are and handle the behaviour accordingly.
 function hideTooltip() {
+  if (disabled) {
+    return
+  }
+
   isTooltipVisible.value = false
 }
 
 function showTooltip() {
+  if (disabled) {
+    return
+  }
+
   updatePositions()
   isTooltipVisible.value = true
 }
@@ -40,7 +57,7 @@ function updatePositions(resetPositions = false) {
   })
 
   tooltip.value!.style.top = resetPositions ? '' : `${top}px`
-  tooltip.value!.style.left = resetPositions ? '' : `${left}px`
+  tooltip.value!.style.left = resetPositions ? '' : `${left + offsetX}px`
   // Fix pointer position if necessary
   pointer.value!.style.transform =
     !resetPositions && leftCorrection ? `translateX(${leftCorrection * -1}px)` : ''
@@ -57,6 +74,7 @@ function updatePositions(resetPositions = false) {
       ref="tooltip"
       :class="['tooltip', { 'tooltip--open': isTooltipVisible }]"
       :aria-hidden="!isTooltipVisible"
+      v-bind="$attrs"
       @transitionend="onTransitionend"
     >
       <div class="tooltip__content">

package/elements/select-chip/select-chip.scss

@@ -13,7 +13,7 @@
     // So that the focus works nicely.
     position: absolute;
     inset: 0;
-    cursor: pointer;
+    z-index: -1;
     border-radius: 24px;
   }
 }

package/elements/select-chip/u-select-chip.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
 import { useRadio } from '../radio-group/radio-group-composables'
-import { computed } from 'vue'
 
 interface Props {
   name: string
@@ -21,15 +20,17 @@ const {
 const model = defineModel<string>()
 
 const { onChange } = useRadio({ model, provideKey })
-
-const classes = computed(() =>
-  disabled ? 'disabled' : model.value === value ? 'filled' : 'outlined',
-)
 </script>
 
 <template>
   <div class="select-chip">
-    <label :class="classes" class="select-chip__button button">
+    <label
+      :class="[
+        'select-chip__button',
+        'button',
+        { filled: model === value && !disabled, outlined: model !== value || disabled, disabled },
+      ]"
+    >
       <UIcon v-if="model === value" name="mini-check" />
       <slot name="label">
         {{ label }}

package/modules/dialog/u-dialog.vue

@@ -88,7 +88,7 @@ watch(visible, (newV) => {
       'dialog-container',
       mobileDialogStyle,
       {
-        'has-header-image': !!slots['header-image'] || headerImage,
+        'has-header-image': !!slots['header-image'] || (headerImage?.src && headerImage?.alt),
         'has-content-image': !!slots['content-image'] || contentImage,
       },
     ]"
@@ -128,7 +128,7 @@ watch(visible, (newV) => {
 
       <div class="cta-container">
         <slot name="cta"></slot>
-        <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
+        <UButton @click="visible = false">{{ closeBtnLabel || getTranslation('close') }}</UButton>
       </div>
     </div>
   </dialog>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -34,6 +34,8 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "@lottiefiles/lottie-player": "^2.0.12",
+    "swiper": "^11.2.10",
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {

package/utils/functions/animate.js

@@ -0,0 +1,258 @@
+/*
+NOTE: This is old code, but it still works for very simple animation stuff.
+Maybe refactor it (and use ts probably...).
+*/
+
+import { scaleValue } from '../math/scale-value.js'
+
+// /**
+//  * Animate multiple props on an element
+//  * (Heavily inspired by GSAPs TweenLite.to method.)
+//  *
+//  * @param el
+//  * @param duration
+//  * @param props
+//  * @param easing
+//  * @param delay
+//  * @param settle
+//  * @param stagger
+//  * @param onAbort
+//  * @param onStart
+//  * @param onComplete
+//  * @param onUpdate
+//  */
+// export const animateProps = ({
+//   el,
+//   duration,
+//   props,
+//   easing,
+//   delay,
+//   settle,
+//   stagger,
+//   onAbort,
+//   onStart,
+//   onComplete,
+//   onUpdate,
+// }) => {
+//   if (el === undefined || duration === undefined || props === undefined) {
+//     throw new Error('Required arguments (el, props, duration) not set.')
+//   }
+//
+//   if (el instanceof window.HTMLElement || el instanceof window.SVGElement) {
+//     el = [el]
+//   }
+//
+//   let startTime
+//   let value
+//   let renderId
+//   let started = false
+//   let posTotal
+//   let pos
+//   let currentTimeDiff
+//   let paused = false
+//   let pauseTime
+//
+//   onAbort = onAbort || function () {}
+//   onStart = onStart || function () {}
+//   onComplete = onComplete || function () {}
+//   onUpdate = onUpdate || function () {}
+//   easing =
+//     easing ||
+//     function (x) {
+//       return x
+//     }
+//   delay = delay || 0
+//   settle = settle || 0
+//   stagger = stagger || 0
+//
+//   const additionalDuration = stagger * (el.length - 1)
+//
+//   const set = ({ element, props, pos }) => {
+//     for (let i = 0; i < props.length; i++) {
+//       value =
+//         (props[i].prefix || '') +
+//         translateValue(easing(pos), 0, 1, props[i].start, props[i].end, 3) +
+//         (props[i].suffix || '')
+//
+//       element.style[props[i].propName] = value
+//     }
+//   }
+//
+//   const setProps = (ts) => {
+//     currentTimeDiff = ts - startTime
+//     posTotal = currentTimeDiff / (duration + additionalDuration)
+//
+//     for (let i = 0; i < el.length; i++) {
+//       if (currentTimeDiff < i * stagger + duration && currentTimeDiff >= i * stagger) {
+//         pos = (currentTimeDiff - i * stagger) / duration
+//
+//         set({ element: el[i], props, pos })
+//       } else if (currentTimeDiff >= i * stagger + duration) {
+//         set({ element: el[i], props, pos: 1 })
+//       }
+//     }
+//
+//     onUpdate({
+//       progress: posTotal,
+//       time: currentTimeDiff,
+//     })
+//   }
+//
+//   const anim = (ts) => {
+//     if (ts - startTime < 0) {
+//       // Don't animate when startTime is not reached (i.e. a delay has been set)
+//       renderId = window.requestAnimationFrame(anim)
+//       return
+//     }
+//
+//     // Animation is finished.
+//     // Set all props to their defined end values.
+//     if (ts - startTime >= duration + additionalDuration) {
+//       setProps(startTime + duration + additionalDuration)
+//
+//       // Fire callback
+//       setTimeout(function () {
+//         onComplete()
+//       }, settle)
+//
+//       return
+//     }
+//
+//     if (!started) {
+//       onStart()
+//
+//       started = true
+//     }
+//
+//     // animation
+//     setProps(ts)
+//     renderId = window.requestAnimationFrame(anim)
+//   }
+//
+//   startTime = window.performance.now() + delay
+//   renderId = window.requestAnimationFrame(anim)
+//
+//   return {
+//     pause: () => {
+//       window.cancelAnimationFrame(renderId)
+//       pauseTime = window.performance.now()
+//       paused = true
+//     },
+//     resume: () => {
+//       if (paused) {
+//         // start anim again
+//         startTime += window.performance.now() - pauseTime
+//         window.requestAnimationFrame(anim)
+//         paused = false
+//       }
+//     },
+//     abort: () => {
+//       window.cancelAnimationFrame(renderId)
+//
+//       // Fire callback
+//       onAbort()
+//     },
+//   }
+// }
+
+/**
+ *
+ * @param duration
+ * @param start
+ * @param end
+ * @param easing
+ * @param delay
+ * @param onAbort
+ * @param onStart
+ * @param onComplete
+ * @param onUpdate
+ * @returns {{abort: *}}
+ */
+export const animateValue = (
+  { duration, start, end, easing, delay, onAbort, onStart, onComplete, onUpdate } = {
+    duration: 200,
+    start: 0,
+    end: 0,
+    delay: 0,
+    easing: (x) => x,
+  },
+) => {
+  onAbort = onAbort || function () {}
+  onStart = onStart || function () {}
+  onComplete = onComplete || function () {}
+  onUpdate = onUpdate || function () {}
+
+  let startTime
+  let pos
+  let value
+  let renderId
+
+  delay = delay || 0
+
+  easing =
+    easing ||
+    function (x) {
+      return x
+    }
+
+  const anim = (ts) => {
+    if (startTime === undefined) {
+      startTime = ts
+    }
+
+    if (ts - startTime >= duration) {
+      onUpdate.call(null, end)
+      onComplete.call(null, end)
+      return
+    }
+
+    // animation
+    pos = (ts - startTime) / duration
+
+    value = scaleValue(easing(pos), 0, 1, start, end, 3)
+    onUpdate.call(null, value)
+
+    renderId = requestAnimationFrame(anim)
+  }
+
+  if (delay) {
+    setTimeout(() => {
+      onStart()
+      renderId = requestAnimationFrame(anim)
+    }, delay)
+  } else {
+    onStart()
+    renderId = requestAnimationFrame(anim)
+  }
+
+  return {
+    abort: () => {
+      window.cancelAnimationFrame(renderId)
+
+      // Fire callback
+      onAbort.call(null, value)
+    },
+  }
+}
+
+// export const timer = (cb, delay) => {
+//   let instance = {};
+//   let timerId;
+//   let startTime;
+//   let remaining = delay;
+//
+//   instance.resume = () => {
+//     startTime = window.performance.now();
+//     clearTimeout(timerId);
+//     timerId = setTimeout(cb, remaining);
+//   };
+//
+//   instance.pause = () => {
+//     clearTimeout(timerId);
+//     remaining -= window.performance.now() - startTime;
+//   };
+//
+//   instance.resume();
+//
+//   return instance;
+// };

package/utils/math/scale-value.js

@@ -0,0 +1,13 @@
+export const scaleValue = (
+  srcValue,
+  srcRangeMin,
+  srcRangeMax,
+  targetRangeMin,
+  targetRangeMax,
+  round = 0,
+) => {
+  const dec = Math.pow(10, round)
+  const scale = (targetRangeMax - targetRangeMin) / (srcRangeMax - srcRangeMin)
+
+  return Math.round((targetRangeMin + (srcValue - srcRangeMin) * scale) * dec) / dec
+}

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 interface Props {
-  columns: string | number
+  columns?: string | number
 }
 
-defineProps<Props>()
+const { columns = 6 } = defineProps<Props>()
 </script>
 
 <template>

package/wizard/wizard-top-bar/u-wizard-top-bar.vue

@@ -1,11 +1,3 @@
-<!--<script setup lang="ts">-->
-<!--import { UIcon } from '../../elements'-->
-
-<!--interface Props {-->
-<!--  objectAddress?: string-->
-<!--}-->
-<!--</script>-->
-
 <template>
   <div class="wizard-top-bar">
     <div class="container">