@energie360/ui-library 0.1.23 → 0.1.25

package/components/slider-progress-animation/slider-progress-animation.scss

@@ -0,0 +1,25 @@
+@use '../../base/abstracts' as a;
+
+.slider-progress-animation {
+  &.lottie-ready {
+    .slider-progress-animation__lottie {
+      visibility: visible;
+    }
+  }
+}
+
+.slider-progress-animation__lottie {
+  position: relative;
+  visibility: hidden;
+  margin: 0 auto var(--e-space-6);
+  max-width: a.rem(460);
+}
+
+.slider-progress-animation__max-amount-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  aspect-ratio: 5/2;
+  width: 85px;
+  z-index: 1;
+}

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
+import '@lottiefiles/lottie-player'
+import { USlider } from '../'
+import { Slider } from '../slider/u-slider.vue'
+import { Image } from '../../elements/types'
+
+interface Props {
+  lottieSrc: string
+  slider: Slider
+  maxAmountImage: Image
+}
+
+const { lottieSrc } = defineProps<Props>()
+const model = defineModel<number>()
+
+const lottieWrapperRef = useTemplateRef('lottie-wrapper')
+let lottieEl
+let lottie
+const lottieReady = ref(false)
+
+const onChange = (value) => {
+  lottie.goToAndStop(value, true)
+}
+
+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()
+
+    // Set initial state of animation
+    lottieReady.value = true
+    lottie.playSegments([0, model.value], true)
+  })
+})
+
+onUnmounted(() => {
+  if (lottieEl) {
+    lottieEl.remove()
+  }
+})
+</script>
+
+<template>
+  <div :class="['slider-progress-animation', { 'lottie-ready': lottieReady }]">
+    <div ref="lottie-wrapper" class="slider-progress-animation__lottie">
+      <div
+        v-if="maxAmountImage && model === 100"
+        class="slider-progress-animation__max-amount-image"
+      >
+        <slot name="maxAmountImage">
+          <img :src="maxAmountImage.src" :alt="maxAmountImage.alt" />
+        </slot>
+      </div>
+    </div>
+    <USlider v-model="model" v-bind="slider" @change="onChange" />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./slider-progress-animation.scss"></style>

package/components/sprite-animation/sprite-animation.scss

@@ -0,0 +1,7 @@
+.sprite-animation {
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, onMounted, useTemplateRef } from 'vue'
+import { animateValue } from '../../utils/functions/animate.js'
+import { clamp } from '../../utils/math/clamp'
+
+export interface SpriteAnimation {
+  spritesheetPath: string
+  framePositions: [number, number][]
+  frameWidth: number
+  frameHeight: number
+  width?: number
+  height?: number
+  initialFrame?: number
+  duration?: number
+  fps?: number
+  easing?: (x: number) => number
+}
+
+const {
+  spritesheetPath,
+  framePositions,
+  frameWidth,
+  frameHeight,
+  width = undefined,
+  height = undefined,
+  initialFrame = 0,
+  duration = 300,
+  fps = undefined,
+  easing = (x) => x, // linear easing
+} = defineProps<SpriteAnimation>()
+
+const emits = defineEmits(['ready', 'pause'])
+
+const canvasEl = useTemplateRef('canvas')
+const canvasWidth = computed(() => width || frameWidth)
+const canvasHeight = computed(() => height || frameHeight)
+const devicePixelRatio = window.devicePixelRatio || 1
+let currentFrame = initialFrame
+let ctx: CanvasRenderingContext2D
+let spritesheet: HTMLImageElement
+let isAnimating = false
+let animation
+
+const loadImage = (path: string) =>
+  new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = document.createElement('img')
+    img.addEventListener('load', () => {
+      resolve(img)
+    })
+
+    img.addEventListener('error', () => {
+      reject(img)
+    })
+
+    // Load image
+    img.src = path
+  })
+
+const draw = () => {
+  // If context was not created just avoid drawing anything
+  if (!ctx) return
+
+  const [x, y] = framePositions[currentFrame]
+
+  ctx.save()
+  ctx.scale(devicePixelRatio, devicePixelRatio)
+  ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
+  ctx.drawImage(
+    spritesheet,
+    x,
+    y,
+    frameWidth,
+    frameHeight,
+    0,
+    0,
+    canvasWidth.value,
+    canvasHeight.value,
+  )
+  ctx.restore()
+}
+
+const durationFromFps = () => (1000 / fps) * framePositions.length
+
+const durationFromFrames = (start, end) =>
+  (Math.abs(end - start) / framePositions.length) * duration
+
+const animate = (start, end) => {
+  isAnimating = true
+
+  animation = animateValue({
+    duration: fps ? durationFromFps() : durationFromFrames(start, end),
+    start,
+    easing: fps ? undefined : easing,
+    end,
+    onUpdate(value) {
+      toFrame(value)
+    },
+    onComplete(value) {
+      isAnimating = false
+      emits('pause', getFrameFromProgress(value))
+    },
+    onAbort(value) {
+      emits('pause', getFrameFromProgress(value))
+      isAnimating = false
+    },
+  })
+}
+
+const play = (start = 0, end = framePositions.length - 1) => {
+  animate(start, end)
+}
+
+const playReverse = (start = framePositions.length - 1, end = 0) => {
+  if (isAnimating) {
+    animation.abort()
+  }
+
+  animate(start, end)
+}
+
+const pause = () => {
+  if (isAnimating && animation) {
+    animation.abort()
+  }
+}
+
+const getFrameFromProgress = (progress: number) =>
+  clamp(Math.trunc(progress), 0, framePositions.length - 1)
+
+const toFrame = (frame: number) => {
+  currentFrame = getFrameFromProgress(frame)
+  draw()
+}
+
+onMounted(async () => {
+  ctx = canvasEl.value.getContext('2d')
+  spritesheet = await loadImage(spritesheetPath)
+
+  emits('ready')
+
+  // Show initial frame
+  draw()
+})
+
+defineExpose({
+  play,
+  playReverse,
+  pause,
+  toFrame,
+})
+</script>
+
+<template>
+  <div
+    class="sprite-animation"
+    :style="{
+      width: `${width}px` || 'auto',
+      height: `${height}px` || 'auto',
+    }"
+  >
+    <canvas
+      ref="canvas"
+      :width="canvasWidth * devicePixelRatio"
+      :height="canvasHeight * devicePixelRatio"
+    ></canvas>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./sprite-animation.scss"></style>

package/components/table/cell-progress-bar.scss

@@ -21,3 +21,7 @@
 .progress-bar-label {
   @include a.type(100);
 }
+
+.cell-progress-bar__progress-bar {
+  max-width: a.rem(78);
+}

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>