@energie360/ui-library 0.1.22 → 0.1.23

package/components/index.js

@@ -62,3 +62,4 @@ export { default as USkeletonLoader } from './skeleton-loader/u-skeleton-loader.
 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'

package/components/slider/slider.scss

@@ -0,0 +1,248 @@
+@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%);
+}
+
+.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,163 @@
+<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
+}
+
+// TODO: I get an error with importing interface RangeSlider and extending it here. No idea why this happens...
+interface Props {
+  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<Props>()
+
+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 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}%`
+}
+
+const setModelValueFromLeftPosition = (leftPos) => {
+  model.value = scaleValue(leftPos, 0, 100, min, max, 0)
+}
+
+onMounted(() => {
+  setThumbPosition()
+})
+
+watch(model, () => {
+  setThumbPosition()
+  emits('change', model.value)
+})
+
+const onPointerdown = (e: PointerEvent) => {
+  if (e.target.closest('.slider__dot')) {
+    return
+  }
+
+  isSliding.value = true
+
+  // Get correct left position
+  const leftPos = Math.round(
+    ((e.clientX - controlEl.value.getBoundingClientRect().left) / controlEl.value.offsetWidth) *
+      100,
+  )
+
+  isTouch.value = e.pointerType !== 'mouse'
+
+  setModelValueFromLeftPosition(leftPos)
+  controlEl.value.addEventListener('pointermove', onPointermove)
+  document.addEventListener('pointerup', onPointerup)
+}
+const onPointermove = (e: PointerEvent) => {
+  e.preventDefault()
+
+  // Get correct left position
+  let leftPos = Math.round(
+    ((e.clientX - controlEl.value.getBoundingClientRect().left) / controlEl.value.offsetWidth) *
+      100,
+  )
+
+  leftPos = clamp(leftPos, 0, 100)
+
+  setModelValueFromLeftPosition(leftPos)
+}
+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/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/index.js

@@ -22,3 +22,4 @@ export { default as UToggleSwitch } from './toggle-switch/u-toggle-switch.vue'
 export { default as UCheckbox } from './checkbox/u-checkbox.vue'
 export { default as USelectTile } from './select-tile/u-select-tile.vue'
 export { default as USelectTiles } from './select-tiles/u-select-tiles.vue'
+// export { default as URangeSlider } from './range-slider/u-range-slider.vue'

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

@@ -0,0 +1,138 @@
+<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>

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.23",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

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