@energie360/ui-library 0.1.22 → 0.1.24

package/components/slider/slider.scss

@@ -0,0 +1,249 @@
+@use '../../base/abstracts' as a;
+
+@mixin thumb-reset {
+  appearance: none;
+  border: none;
+  height: var(--slider-thumb-height);
+  width: var(--slider-thumb-width);
+  border-radius: 100%;
+}
+
+.slider {
+  --slider-height: 60px;
+  --slider-width: 100%;
+  --slider-track-height: 4px;
+  --slider-upper-fill-color: rgb(150 150 150);
+  --slider-lower-fill-color: rgb(0 150 0);
+  --slider-thumb-height: 60px;
+  --slider-thumb-width: 60px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  column-gap: var(--e-space-4);
+  width: var(--slider-width);
+  height: var(--slider-height);
+
+  // Style native input
+  input::-moz-range-thumb {
+    @include thumb-reset;
+  }
+
+  input::-webkit-slider-thumb {
+    @include thumb-reset;
+  }
+
+  // States
+  &.is-sliding {
+    .slider__dot,
+    .slider__dot-wrapper {
+      pointer-events: none;
+    }
+  }
+
+  &.is-sliding.is-touch {
+    .slider__thumb {
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+}
+
+.slider__min-value,
+.slider__max-value {
+  @include a.type(200);
+
+  flex: 0 0 auto;
+}
+
+.slider__slider {
+  flex: 1 0 auto;
+  position: relative;
+  height: 100%;
+}
+
+.slider__input {
+  position: absolute;
+  top: 0;
+  left: calc(var(--slider-thumb-width) / -2);
+  right: calc(var(--slider-thumb-width) / -2);
+  height: 100%;
+  pointer-events: none;
+
+  input {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.slider__control {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: calc(50% - var(--slider-track-height) / 2);
+    height: var(--slider-track-height);
+    width: 100%;
+    background-color: var(--e-c-primary-01-100);
+    border-radius: var(--e-brd-radius-1);
+  }
+}
+
+.slider__dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background-color: var(--e-c-mono-00);
+  border: 2px solid var(--e-c-primary-01-500);
+  pointer-events: auto;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: a.rem(8);
+    height: a.rem(8);
+    border-radius: 100%;
+    background-color: var(--e-c-primary-01-500);
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--e-c-primary-01-700);
+    }
+  }
+
+  &:active {
+    border-color: var(--e-c-primary-01-700);
+  }
+
+  // Dot variants
+  &.upper {
+    border-color: var(--e-c-mono-200);
+
+    &::before {
+      width: a.rem(4);
+      height: a.rem(4);
+    }
+
+    &:hover {
+      &::before {
+        width: a.rem(8);
+        height: a.rem(8);
+      }
+    }
+
+    &:active {
+      border-color: var(--e-c-primary-01-700);
+    }
+  }
+
+  &.highlight {
+    border-color: var(--e-c-mono-700);
+
+    &::before {
+      background-color: var(--e-c-mono-700);
+      width: a.rem(8);
+      height: a.rem(8);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath fill='%236B6B6B' d='M6.79 7.985a1 1 0 0 1-1.58 0L.256 1.614A1 1 0 0 1 1.045 0h9.91a1 1 0 0 1 .79 1.614L6.789 7.985Z'/%3E%3C/svg%3E");
+      width: 12px;
+      height: 9px;
+      left: 2px;
+      top: -12px;
+    }
+
+    &:active,
+    &:hover {
+      border-color: var(--e-c-primary-01-500);
+
+      &::before {
+        background-color: var(--e-c-primary-01-500);
+        width: a.rem(8);
+        height: a.rem(8);
+      }
+
+      &::after {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath fill='%234BA528' d='M6.79 7.985a1 1 0 0 1-1.58 0L.256 1.614A1 1 0 0 1 1.045 0h9.91a1 1 0 0 1 .79 1.614L6.789 7.985Z'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}
+
+.slider__dot-wrapper {
+  position: absolute;
+  display: block;
+  top: -6px;
+  width: a.rem(16);
+  height: a.rem(16);
+  transform: translateX(-50%);
+  box-sizing: border-box;
+}
+
+.slider__tooltip-placeholder {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
+
+.slider__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--slider-thumb-height);
+  width: var(--slider-thumb-width);
+  background-color: rgba(var(--e-c-primary-01-200-rgb), 0.5);
+  border-radius: 100%;
+  top: calc(var(--slider-thumb-height) / -2 + (var(--slider-track-height) / 2));
+  transform: translateX(-50%);
+  transition: transform var(--e-trs-duration-fastest) var(--e-trs-easing-default);
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--e-c-primary-01-700);
+    inset: 6px;
+    border-radius: 100%;
+  }
+}
+
+.slider__thumb-value {
+  @include a.type(200, strong);
+
+  position: relative;
+  white-space: nowrap;
+  color: var(--e-c-mono-00);
+  user-select: none;
+}
+
+.slider__track {
+  top: calc(50% - var(--slider-track-height) / 2);
+  position: relative;
+  height: var(--slider-track-height);
+}
+
+.slider__lower-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 4px;
+  border-top-left-radius: var(--e-brd-radius-1);
+  border-bottom-left-radius: var(--e-brd-radius-1);
+  background-color: var(--e-c-primary-01-500);
+}
+
+.visually-hidden {
+  @include a.visually-hidden;
+}

package/components/slider/u-slider.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { watch, useId, useTemplateRef, onMounted, ref } from 'vue'
+import { scaleValue } from '../../utils/math/scale-value'
+import { clamp } from '../../utils/math/clamp'
+import { UTooltip } from '../'
+
+interface SliderDot {
+  value: number
+  isHighlighted?: boolean
+}
+
+export interface Slider {
+  name: string
+  dots?: SliderDot[]
+  label: string
+  min?: number
+  max?: number
+  step?: number
+  valuePrefix?: string
+  valueSuffix?: string
+  hideMinMax?: boolean
+}
+
+const {
+  dots = [],
+  min = 0,
+  max = 100,
+  step = 1,
+  valuePrefix = '',
+  valueSuffix = '',
+} = defineProps<Slider>()
+
+const model = defineModel<number>()
+const emits = defineEmits(['change'])
+const id = useId()
+const isSliding = ref(false)
+const isTouch = ref(false)
+const thumbEl = useTemplateRef('thumb')
+const lowerFillEl = useTemplateRef('lower-fill')
+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)
+
+  thumbEl.value.style.left = `${position}%`
+  lowerFillEl.value.style.width = `${position}%`
+}
+
+onMounted(() => {
+  setThumbPosition()
+})
+
+watch(model, () => {
+  setThumbPosition()
+  emits('change', model.value)
+})
+
+const onPointerdown = (e: PointerEvent) => {
+  if (e.target.closest('.slider__dot')) {
+    return
+  }
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  isSliding.value = true
+
+  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'
+
+  controlEl.value.addEventListener('pointermove', onPointermove)
+  document.addEventListener('pointerup', onPointerup)
+}
+const onPointermove = (e: PointerEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+
+  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,
+  )
+}
+const onPointerup = () => {
+  isSliding.value = false
+
+  controlEl.value.removeEventListener('pointermove', onPointermove)
+  document.removeEventListener('pointerup', onPointerup)
+}
+</script>
+
+<template>
+  <div :class="['slider', { 'is-sliding': isSliding, 'is-touch': isTouch }]">
+    <label class="visually-hidden" :for="id">{{ label }}</label>
+
+    <div v-if="!hideMinMax" class="slider__min-value">
+      {{ getValueString(min) }}
+    </div>
+
+    <div class="slider__slider">
+      <div class="slider__input">
+        <input :id v-model="model" :name type="range" :min :max :step @change="setThumbPosition" />
+      </div>
+
+      <div ref="control" class="slider__control" @pointerdown.prevent="onPointerdown">
+        <div class="slider__track">
+          <div ref="lower-fill" class="slider__lower-fill"></div>
+
+          <div
+            v-for="(dot, idx) in dots"
+            :key="idx"
+            class="slider__dot-wrapper"
+            :style="{ left: `${getLeftPosition(dot.value)}%` }"
+          >
+            <UTooltip
+              :title="getValueString(dot.value)"
+              style="--tooltip-min-width: 0"
+              :disabled="isSliding"
+              :offset="10"
+              :offset-x="1"
+            >
+              <button
+                :class="[
+                  'slider__dot',
+                  `${dot.value < model ? 'lower' : 'upper'}`,
+                  { highlight: dot.isHighlighted },
+                ]"
+                type="button"
+                @click="model = dot.value"
+              >
+                <span class="visually-hidden">{{ getValueString(dot.value) }}</span>
+              </button>
+            </UTooltip>
+          </div>
+
+          <button ref="thumb" type="button" class="slider__thumb" tabindex="-1">
+            <span class="slider__thumb-value">{{ getValueString(model) }} </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!hideMinMax" class="slider__max-value">
+      {{ getValueString(max) }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./slider.scss"></style>

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);
+}