@energie360/ui-library 0.1.23 → 0.1.24

package/components/badge/u-badge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface Props {
+export interface Badge {
   color?: string
   dot?: boolean
   type?: 'default' | 'success' | 'error' | 'warning' | 'info'
@@ -19,7 +19,7 @@ const {
   color = 'var(--e-c-mono-900)',
   type = 'default',
   show = true,
-} = defineProps<Props>()
+} = defineProps<Badge>()
 </script>
 
 <template>

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

@@ -0,0 +1,7 @@
+@use '../../base/abstracts' as a;
+
+.card-amount__text {
+  @include a.type(700, strong);
+
+  margin-bottom: var(--e-space-2);
+}

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { UProgressBar } from '../'
+
+interface Props {
+  progress: number
+  text: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-amount">
+    <div class="card-amount__text">
+      {{ text }}
+    </div>
+    <UProgressBar :value="progress"></UProgressBar>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-amount.scss"></style>

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

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+
+.card-amount-illustrated {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-3);
+}
+
+.card-amount-illustrated__title {
+  @include a.type(300, strong);
+}
+
+.card-amount-illustrated__amount {
+  padding: a.rem(22) 0;
+}
+
+.card-amount-illustrated__illustration {
+  position: relative;
+  width: a.rem(200);
+  height: a.rem(200);
+  align-self: center;
+}
+
+.card-amount-illustrated__max-amount-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  aspect-ratio: 5/2;
+  width: 85px;
+}
+
+.card-amount-illustrated__slider {
+  margin-top: -2px;
+  margin-bottom: -2px;
+}

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { SpriteAnimation } from '../sprite-animation/u-sprite-animation.vue'
+import { UProgressBar, USpriteAnimation } from '../'
+import { useTemplateRef } from 'vue'
+import { Image } from '../../elements/types'
+
+interface Props {
+  title?: string
+  amount?: number
+  maxAmountImage: Image
+  spriteAnimation?: Pick<
+    SpriteAnimation,
+    'spritesheetPath' | 'framePositions' | 'frameHeight' | 'frameWidth'
+  >
+}
+
+defineProps<Props>()
+defineEmits(['amount'])
+
+const spriteAnimRef = useTemplateRef('spriteAnim')
+let pausedFrame: number
+
+const onPause = (frame: number) => {
+  pausedFrame = frame
+}
+
+const onMouseenter = () => {
+  spriteAnimRef.value.play()
+}
+
+const onMouseleave = () => {
+  spriteAnimRef.value.pause()
+  spriteAnimRef.value.playReverse(pausedFrame)
+}
+</script>
+
+<template>
+  <div class="card-amount-illustrated">
+    <h3 class="card-amount-illustrated__title">
+      <slot name="title">{{ title }}</slot>
+    </h3>
+
+    <div
+      v-if="$slots.illustration || spriteAnimation"
+      class="card-amount-illustrated__illustration"
+    >
+      <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"
+      >
+        <slot name="maxAmountImage">
+          <img :src="maxAmountImage.src" :alt="maxAmountImage.alt" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="amount && !$slots.slider" class="card-amount-illustrated__amount">
+      <UProgressBar :value="amount"></UProgressBar>
+    </div>
+
+    <div v-if="$slots.slider" class="card-amount-illustrated__slider">
+      <slot name="slider"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-amount-illustrated.scss"></style>

package/components/card-contact/card-contact.scss

@@ -21,11 +21,13 @@
   @include a.type(200);
 
   margin-top: var(--e-space-1);
-}
 
-.card-contact__tel {
-  @include t.text-link;
+  &:has(+ .card-contact__contacts) {
+    margin-bottom: var(--e-space-4);
+  }
+}
 
+.card-contact__contacts {
   margin-top: auto;
 }
 

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

@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import { Image, Cta } from '../../elements/types'
-
-type Tel = Omit<Cta, 'target'>
+import { Image } from '../../elements/types'
+import { URichtext } from '../'
 
 interface Props {
   name?: string
   role?: string
-  tel?: Tel
   image?: Image
+  contacts?: string
 }
 
 defineProps<Props>()
+defineSlots<{
+  name()
+  role()
+  contacts()
+  image()
+}>()
 </script>
 
 <template>
@@ -24,12 +29,12 @@ defineProps<Props>()
         <slot name="role">{{ role }}</slot>
       </p>
 
-      <div v-if="$slots.tel || tel" class="card-contact__tel">
-        <slot name="tel">
-          <a :href="tel.href">
-            {{ tel.label }}
-          </a>
-        </slot>
+      <div v-if="$slots.contacts || contacts" class="card-contact__contacts">
+        <URichtext>
+          <slot name="contacts">
+            <div v-html="contacts"></div>
+          </slot>
+        </URichtext>
       </div>
     </div>
 

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

@@ -13,6 +13,7 @@ interface Radio {
   label: string
   name?: string
   value?: string
+  disabled?: boolean
 }
 
 interface Props {
@@ -21,21 +22,24 @@ interface Props {
 
 const { cta = undefined } = defineProps<Props>()
 
+const emits = defineEmits(['change'])
+
 const { toggleActiveCard } = inject('card')
 const { currentValue } = inject('card-group', {})
 
 const onChange = () => {
   toggleActiveCard(true)
+  emits('change', cta.value)
 }
 
 if (currentValue) {
   watch(currentValue, (newV) => {
-    toggleActiveCard(newV === cta.value)
+    toggleActiveCard(newV === cta.value && !cta.disabled)
   })
 
   onMounted(() => {
     if (currentValue?.value) {
-      toggleActiveCard(currentValue.value === cta.value)
+      toggleActiveCard(currentValue.value === cta.value && !cta.disabled)
     }
   })
 }

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

@@ -1,25 +1,39 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .card-group {
   display: grid;
   gap: var(--e-space-5);
 
-  // >= 3 card items
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 1fr;
-
-  // 1 card item
-  &:has(> :last-child:nth-child(1)) {
-    grid-template-columns: repeat(1, 1fr);
+  // Column behaviours
+  &.columns-auto {
+    // >= 3 card items
+    grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 1fr;
+
+    // 1 card item
+    &:has(> :last-child:nth-child(1)) {
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: 1fr;
+    }
+
+    // 2 card items
+    &:has(> :last-child:nth-child(2)) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: 1fr;
+    }
   }
 
-  // 2 card items
-  &:has(> :last-child:nth-child(2)) {
-    grid-template-columns: repeat(2, 1fr);
+  &.columns-4 {
+    grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr;
   }
 
+  &.use-carousel {
+    display: block;
+
+    // touch-action: pan-y;
+  }
+
   @include a.bp(lg) {
     &:has(> :last-child:nth-child(n)) {
       grid-template-columns: repeat(1, 1fr);

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

@@ -1,13 +1,48 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+import { register } from 'swiper/element/bundle'
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
 import { debounceRaf } from '../../utils/functions/debounce'
 import { isLarge } from '../../utils/functions/breakpoint'
 import { useRadioGroup } from '../../elements/radio-group/radio-group-composables'
 
-const model = defineModel<string>()
+// Register swiper custom elements.
+register()
+
+interface Props {
+  columns?: 1 | 2 | 3 | 4 | 'auto'
+  useCarousel?: boolean
+}
 
+const { columns = 'auto', useCarousel = false } = 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'))
 
@@ -45,6 +80,8 @@ onMounted(() => {
     // Initial state
     onResize()
   })
+
+  initSwiper()
 })
 
 onUnmounted(() => {
@@ -55,11 +92,29 @@ useRadioGroup({
   model,
   provideKey: 'card-group',
 })
+
+watch(
+  () => useCarousel,
+  () => {
+    initSwiper()
+  },
+)
 </script>
 
 <template>
-  <div ref="group" class="card-group">
-    <slot></slot>
+  <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>
 </template>
 

package/components/chip/chip.scss

@@ -1,25 +1,52 @@
 @use '../../base/abstracts' as a;
 
 .chip {
-  background-color: var(--e-c-mono-50);
-  border: 1px solid var(--e-c-mono-200);
+  --chip-background-color: var(--e-c-mono-50);
+  --chip-font-color: var(--e-c-mono-900);
+  --chip-caption-color: var(--e-c-mono-700);
+  --chip-border-color: var(--e-c-mono-200);
+  --chip-icon-color: var(--e-c-mono-700);
+
+  background-color: var(--chip-background-color);
+  border: 1px solid var(--chip-border-color);
   border-radius: var(--e-brd-radius-2);
   padding: var(--e-space-1_5) var(--e-space-3);
   display: inline-flex;
   align-items: center;
+  justify-content: space-between;
   column-gap: var(--e-space-1);
+
+  &.chip--icon-right {
+    .chip__icon {
+      order: 2;
+    }
+
+    .chip__label {
+      order: 1;
+    }
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &.big {
+    padding: a.rem(16);
+  }
 }
 
 .chip__icon {
-  color: var(--e-c-mono-700);
+  color: var(--chip-icon-color);
 }
 
 .chip__label {
   @include a.type(200, strong);
+
+  color: var(--chip-font-color);
 }
 
 .chip__caption {
   @include a.type(50, strong);
 
-  color: var(--e-c-mono-700);
+  color: var(--chip-caption-color);
 }

package/components/chip/u-chip.vue

@@ -5,13 +5,16 @@ export interface Chip {
   caption?: string
   label?: string
   icon?: string
+  iconPosition?: 'left' | 'right'
+  fullWidth?: boolean
+  big?: boolean
 }
 
-defineProps<Chip>()
+const { caption = '', label = '', icon = undefined, iconPosition = 'left' } = defineProps<Chip>()
 </script>
 
 <template>
-  <div class="chip">
+  <div :class="['chip', `chip--icon-${iconPosition}`, { 'full-width': fullWidth, big }]">
     <span v-if="icon" class="chip__icon">
       <UIcon :name="icon"></UIcon>
     </span>

package/components/index.js

@@ -14,6 +14,8 @@ export { default as UCardCtaHeader } from './card-cta-header/u-card-cta-header.v
 export { default as UCardCtaBar } from './card-cta-bar/u-card-cta-bar.vue'
 export { default as UCardContact } from './card-contact/u-card-contact.vue'
 export { default as UCardPriceList } from './card-price-list/u-card-price-list.vue'
+export { default as UCardAmountIllustrated } from './card-amount-illustrated/u-card-amount-illustrated.vue'
+export { default as UCardAmount } from './card-amount/u-card-amount.vue'
 
 // Collapsible
 export { default as UCollapsible } from './collapsible/u-collapsible.vue'
@@ -63,3 +65,5 @@ export { default as UCardHighlight } from './card-highlight/u-card-highlight.vue
 export { default as URating } from './rating/u-rating.vue'
 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'

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

@@ -5,22 +5,18 @@
   align-items: center;
   column-gap: a.rem(4);
   height: a.rem(10);
-  width: #{a.rem(64 + 4 + 10)}; // progress-track + space + icon
+  width: 100%;
 
-  &.full-width {
-    width: 100%;
-
-    .progress-track {
-      width: calc(100% - #{a.rem(4 + 10)});
-    }
+  .progress-track {
+    width: calc(100% - #{a.rem(4 + 10)});
   }
 }
 
 .progress-track {
-  width: a.rem(64);
+  width: calc(100% - #{a.rem(4 + 10)});
   min-width: a.rem(64);
   height: a.rem(4);
-  background-color: var(--e-c-mono-100);
+  background-color: var(--e-c-primary-01-100);
   border-radius: a.rem(4);
   overflow: hidden;
 }

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

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 interface Props {
   value: number
-  fullWidth?: boolean
 }
 
-const { fullWidth = false } = defineProps<Props>()
+defineProps<Props>()
 </script>
 
 <template>
-  <div :class="['progress-bar', { 'full-width': fullWidth }]">
+  <div class="progress-bar">
     <div class="progress-track">
       <div class="progress-position" :style="{ width: `${value}%` }"></div>
     </div>
@@ -16,6 +15,4 @@ const { fullWidth = false } = defineProps<Props>()
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './progress-bar.scss';
-</style>
+<style scoped lang="scss" src="./progress-bar.scss"></style>

package/components/richtext/richtext.scss

@@ -88,6 +88,8 @@
     transition:
       text-decoration-color a.$trs-default,
       color a.$trs-default;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
     &:hover {
       text-decoration-color: var(--e-c-primary-01-50);

package/components/skeleton-loader/u-skeleton-loader.vue

@@ -21,7 +21,7 @@ const { type = SkeletonType.fit } = defineProps<Props>()
   </template>
 
   <template v-if="type === SkeletonType.fit">
-    <div class="skeleton-loader fit"></div>
+    <div class="skeleton-loader fit" v-bind="$attrs"></div>
   </template>
 </template>
 

package/components/slider/slider.scss

@@ -188,6 +188,7 @@
   width: a.rem(16);
   height: a.rem(16);
   transform: translateX(-50%);
+  box-sizing: border-box;
 }
 
 .slider__tooltip-placeholder {

package/components/slider/u-slider.vue

@@ -9,8 +9,7 @@ interface SliderDot {
   isHighlighted?: boolean
 }
 
-// TODO: I get an error with importing interface RangeSlider and extending it here. No idea why this happens...
-interface Props {
+export interface Slider {
   name: string
   dots?: SliderDot[]
   label: string
@@ -29,7 +28,7 @@ const {
   step = 1,
   valuePrefix = '',
   valueSuffix = '',
-} = defineProps<Props>()
+} = defineProps<Slider>()
 
 const model = defineModel<number>()
 const emits = defineEmits(['change'])
@@ -42,6 +41,9 @@ const controlEl = useTemplateRef('control')
 
 const getValueString = (v) => `${valuePrefix}${v}${valueSuffix}`
 
+const snapNumberToGrid = (n: number, grid: number, offset: number = 0) =>
+  Math.round(n / grid) * grid + offset
+
 const getLeftPosition = (v) => scaleValue(Number(v), Number(min), Number(max), 0, 100, 2)
 const setThumbPosition = () => {
   const position = getLeftPosition(model.value)
@@ -50,10 +52,6 @@ const setThumbPosition = () => {
   lowerFillEl.value.style.width = `${position}%`
 }
 
-const setModelValueFromLeftPosition = (leftPos) => {
-  model.value = scaleValue(leftPos, 0, 100, min, max, 0)
-}
-
 onMounted(() => {
   setThumbPosition()
 })
@@ -68,32 +66,45 @@ const onPointerdown = (e: PointerEvent) => {
     return
   }
 
+  e.preventDefault()
+  e.stopPropagation()
+
   isSliding.value = true
 
-  // Get correct left position
-  const leftPos = Math.round(
+  const leftPos = clamp(
     ((e.clientX - controlEl.value.getBoundingClientRect().left) / controlEl.value.offsetWidth) *
       100,
+    0,
+    100,
+  )
+
+  model.value = clamp(
+    snapNumberToGrid(scaleValue(leftPos, 0, 100, min, max, 2), step, min % step),
+    min,
+    max,
   )
 
   isTouch.value = e.pointerType !== 'mouse'
 
-  setModelValueFromLeftPosition(leftPos)
   controlEl.value.addEventListener('pointermove', onPointermove)
   document.addEventListener('pointerup', onPointerup)
 }
 const onPointermove = (e: PointerEvent) => {
   e.preventDefault()
+  e.stopPropagation()
 
-  // Get correct left position
-  let leftPos = Math.round(
+  const leftPos = clamp(
     ((e.clientX - controlEl.value.getBoundingClientRect().left) / controlEl.value.offsetWidth) *
       100,
+    0,
+    100,
   )
 
-  leftPos = clamp(leftPos, 0, 100)
-
-  setModelValueFromLeftPosition(leftPos)
+  model.value = clamp(
+    snapNumberToGrid(scaleValue(leftPos, 0, 100, min, max, 2), step, min % step),
+    min,
+    max,
+  )
 }
 const onPointerup = () => {
   isSliding.value = false