@energie360/ui-library 0.1.23 → 0.1.24

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/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">

package/elements/range-slider/u-range-slider.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-// NOTE: URangeSlider as a base widget was a good idea.
-// But at the moment not really usable.
-// Maybe deprecate it.
-
-import { useTemplateRef, onMounted, useId, watch } from 'vue'
-import { scaleValue } from '../../utils/math/scale-value'
-
-export interface RangeSlider {
-  label: string
-  min?: number
-  max?: number
-}
-
-const { min = 0, max = 100 } = defineProps<RangeSlider>()
-
-const id = useId()
-const model = defineModel<number>()
-const thumbEl = useTemplateRef('thumb')
-const lowerFillEl = useTemplateRef('lower-fill')
-let thumbWidth
-
-const setThumbPosition = () => {
-  const position = scaleValue(Number(model.value), Number(min), Number(max), 0, 100, 2)
-  thumbEl.value.style.left = `${position}%`
-
-  lowerFillEl.value.style.width = `calc(${position}% + ${thumbWidth / 2}px)`
-}
-
-onMounted(() => {
-  // Store thumb width. We'll judt assume that this won't change during runtime.
-  thumbWidth = thumbEl.value.getBoundingClientRect().width
-
-  setThumbPosition()
-})
-
-watch(model, () => {
-  setThumbPosition()
-})
-</script>
-
-<template>
-  <div class="range-slider">
-    <label class="visually-hidden" :for="id">{{ label }}</label>
-    <div class="range-slider__input">
-      <input
-        :id
-        v-model="model"
-        type="range"
-        :min
-        :max
-        @input="setThumbPosition"
-        @change="setThumbPosition"
-      />
-    </div>
-    <div class="range-slider__slider">
-      <div class="range-slider__track">
-        <div ref="lower-fill" class="range-slider__lower-fill"></div>
-        <div ref="thumb" class="range-slider__thumb"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@use '../../base/abstracts' as a;
-
-.range-slider {
-  --range-height: 24px;
-  --range-width: 100%;
-  --range-border-radius: 0;
-  --range-upper-fill-color: rgba(150, 150, 150);
-  --range-lower-fill-color: rgb(0, 150, 0);
-  --range-thumb-height: 24px;
-  --range-thumb-width: 12px;
-  --range-thumb-border-radius: 0;
-  --range-thumb-background-color: rgb(0, 0, 0);
-  --range-thumb-transform: none;
-  --range-thumb-transition: none;
-
-  /* "display: contents" would be better, but it still has some accessiblity issues -> https://ericwbailey.website/published/display-contents-considered-harmful/ */
-  position: relative;
-  display: inline-flex;
-  width: var(--range-width);
-  height: var(--range-height);
-}
-
-.range-slider__input {
-  display: flex;
-  width: 100%;
-
-  input {
-    width: 100%;
-  }
-}
-
-.range-slider__slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  background-color: var(--range-upper-fill-color);
-  border-radius: var(--range-border-radius);
-}
-
-.range-slider__thumb {
-  position: relative;
-  height: var(--range-thumb-height);
-  width: var(--range-thumb-width);
-  background-color: var(--range-thumb-background-color);
-  border-radius: var(--range-thumb-border-radius);
-  transform: var(--range-thumb-transform);
-  transition: var(--range-thumb-transition);
-}
-
-.range-slider__track {
-  position: relative;
-  width: calc(100% - var(--range-thumb-width));
-  height: 100%;
-}
-
-.range-slider__lower-fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  border-top-left-radius: var(--range-border-radius);
-  border-bottom-left-radius: var(--range-border-radius);
-  background-color: var(--range-lower-fill-color);
-  min-width: var(--range-thumb-width);
-}
-
-.visually-hidden {
-  @include a.visually-hidden;
-}
-</style>