@energie360/ui-library 0.1.14 → 0.1.16

package/modules/progress-indicator/progress-indicator.scss

@@ -0,0 +1,84 @@
+@use '../../base/abstracts/' as a;
+
+.progress-indicator {
+  progress[value]::-webkit-progress-bar {
+    width: 100%;
+    height: 6px;
+    background-color: var(--e-c-mono-100);
+    transition: width 300ms ease;
+  }
+
+  progress[value]::-webkit-progress-value {
+    width: 0;
+    background-color: var(--e-c-primary-01-500);
+    transition: width a.$trs-default;
+  }
+
+  &.rounded {
+    border-radius: 3px;
+    overflow: hidden;
+
+    .progress-indicator__segment {
+      position: relative;
+      border: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 6px;
+        left: 3px;
+        box-shadow: -6px 0 0 0 var(--e-c-mono-00);
+        border-radius: 3px;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 6px;
+        right: 3px;
+        box-shadow: 6px 0 0 0 var(--e-c-mono-00);
+        border-radius: 3px;
+      }
+
+      &:first-of-type::before {
+        content: none;
+      }
+
+      &:last-of-type {
+        content: none;
+      }
+    }
+  }
+}
+
+.progress-indicator__main-track {
+  position: relative;
+  display: flex;
+  height: 6px;
+  width: 100%;
+}
+
+.progress-indicator__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  appearance: none;
+}
+
+.progress-indicator__segment {
+  position: relative;
+  flex: 1 0 auto;
+  border-right: 4px solid var(--e-c-mono-00);
+  border-left: 4px solid var(--e-c-mono-00);
+
+  &:first-of-type {
+    border-left: 0;
+  }
+
+  &:last-of-type {
+    border-right: 0;
+  }
+}

package/modules/progress-indicator/u-progress-indicator.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  index: number
+  steps: number[]
+  rounded?: boolean
+}
+
+const { steps, rounded = false } = defineProps<Props>()
+
+const totalSteps = computed(() => steps.reduce((acc, val) => (acc += val), 0))
+
+const getSegmentWidth = (steps: number) => (100 / totalSteps.value) * steps
+</script>
+
+<template>
+  <div :class="['progress-indicator', { rounded }]">
+    <div class="progress-indicator__main-track">
+      <progress class="progress-indicator__progress" :max="totalSteps" :value="index"></progress>
+
+      <div
+        v-for="(segment, idx) in steps"
+        :key="idx"
+        class="progress-indicator__segment"
+        :style="{
+          width: `${getSegmentWidth(segment)}%`,
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./progress-indicator.scss"></style>

package/modules/toast/toast-message.scss

@@ -0,0 +1,67 @@
+@use '../../base/abstracts' as a;
+
+.toast-message {
+  pointer-events: auto;
+
+  .toast-message__inner {
+    @include a.type(100, strong);
+
+    position: relative;
+    max-width: a.rem(405);
+    padding: var(--e-space-4) var(--e-space-14);
+    border-radius: var(--e-space-2);
+    color: var(--e-c-mono-00);
+  }
+
+  .toast-message__icon {
+    position: absolute;
+    top: 50%;
+    left: var(--e-space-4);
+    transform: translateY(-50%);
+  }
+
+  .toast-message__close-button {
+    position: absolute;
+    color: var(--e-c-mono-00);
+    right: var(--e-space-4);
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  // Modifiers
+  &.success {
+    .toast-message__icon {
+      color: var(--e-c-signal-01-500);
+    }
+
+    .toast-message__inner {
+      background-color: var(--e-c-signal-01-700);
+    }
+  }
+
+  &.error {
+    .toast-message__icon {
+      color: var(--e-c-signal-03-500);
+    }
+
+    .toast-message__inner {
+      background-color: var(--e-c-signal-03-700);
+    }
+  }
+
+  // Animations
+  &.fade-in {
+    animation-name: fade-in-message;
+    animation-duration: var(--e-trs-duration-faster);
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+  }
+
+  &.toast-message--fade-out {
+    animation-name: fade-out-message;
+    animation-duration: var(--e-trs-duration-faster);
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+  }
+}

package/modules/toast/toast.scss

@@ -0,0 +1,14 @@
+@use '../../base/abstracts' as a;
+
+.toast {
+  z-index: a.$layer-message;
+  position: fixed;
+  bottom: var(--e-space-6);
+  left: 0;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  width: 100%;
+  grid-gap: var(--e-space-4);
+  pointer-events: none;
+}

package/modules/toast/u-toast-message.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { UIcon } from '../../elements'
+import { dismiss } from './useToast'
+import { ref } from 'vue'
+
+interface Props {
+  id: number
+  type: 'success' | 'error'
+  message: string
+}
+
+const { id } = defineProps<Props>()
+
+enum MessageType {
+  success = 'check-circle',
+  error = 'report',
+}
+
+const fadeIn = ref(false)
+const close = () => dismiss(id)
+</script>
+
+<template>
+  <div :class="['toast-message', type, { 'fade-in': fadeIn }]">
+    <div class="container">
+      <div class="toast-message__inner">
+        <div class="toast-message__icon">
+          <UIcon :name="MessageType[type]"></UIcon>
+        </div>
+        <div ref="message" class="toast-message__message">
+          {{ message }}
+        </div>
+        <button
+          class="toast-message__close-button"
+          type="button"
+          aria-label="Close message"
+          @click="close"
+        >
+          <UIcon name="close"></UIcon>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./toast-message.scss"></style>

package/modules/toast/u-toast.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import UToastMessage from './u-toast-message.vue'
+import { toasts } from './useToast'
+</script>
+
+<template>
+  <div class="toast">
+    <TransitionGroup name="list">
+      <UToastMessage v-for="(item, idx) in toasts" :key="idx" v-bind="item" />
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+.list-enter-active,
+.list-leave-active {
+  transition: all var(--e-trs-duration-faster) ease-in;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+</style>
+
+<style scoped lang="scss" src="./toast.scss"></style>

package/modules/toast/useToast.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+
+let messageId = 0
+const defaultTimeout = 3000
+
+type ToastMessage = {
+  id: number
+  type: 'success' | 'error'
+  message: string
+  timeout?: number
+}
+
+const toasts = ref<ToastMessage[]>([])
+
+type Toast = Omit<ToastMessage, 'id'>
+
+const toast = (args: Toast) => {
+  messageId++
+
+  const toastObj = {
+    ...args,
+    id: messageId,
+  }
+
+  toasts.value.push(toastObj)
+
+  if (args.timeout === 0) {
+    return
+  }
+
+  setTimeout(() => {
+    dismiss(toastObj.id)
+  }, args.timeout || defaultTimeout)
+}
+
+const dismiss = (messageId: number) => {
+  toasts.value = toasts.value.filter((item) => item.id !== messageId)
+}
+
+export { toast, toasts, dismiss }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

package/utils/translations/translate.js

@@ -1,17 +1,7 @@
-import { deepGetByPath } from '../object/deep-get.js'
 import translations from '../../i18n/i18n.ts'
 
 const DEFAULT_LANGUAGE = 'DE'
 
-/**
- *
- * @param {string} translationKeyPath
- * @param {string} defaultValue
- * @returns {string}
- */
-export const translate = (translationKeyPath, defaultValue = '') =>
-  deepGetByPath(window._EC.translations, translationKeyPath) || defaultValue
-
 const getLanguage = () => {
   const langAttr = document.documentElement.lang.split('-')[0].toUpperCase()
 

package/wizard/index.js

@@ -1,4 +1,5 @@
 export { default as UWizardIntro } from './wizard-intro/u-wizard-intro.vue'
+export { default as UWizardOutro } from './wizard-outro/u-wizard-outro.vue'
 export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
 export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
 export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'

package/wizard/wizard-outro/u-wizard-outro.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Image, Cta } from '../../elements/types'
+import { UButton } from '../../elements'
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  title?: string
+  text?: string
+  image?: Image
+  cta?: Cta
+}
+
+const { text, cta } = defineProps<Props>()
+
+const slots = useSlots()
+const hasCta = computed(() => !!slots.cta || cta)
+const hasText = computed(() => !!slots.text || text)
+</script>
+
+<template>
+  <div class="wizard-outro">
+    <div class="row wizard-outro__row">
+      <div class="wizard-outro__image-col">
+        <slot name="image">
+          <img v-if="image" :src="image.src" :alt="image.alt" />
+        </slot>
+      </div>
+      <div class="wizard-outro__content-col">
+        <h1 class="wizard-outro__title">
+          <slot name="title">{{ title }}</slot>
+        </h1>
+
+        <div v-if="hasText" class="wizard-outro__text">
+          <div class="richtext richtext--wizard">
+            <slot name="text"><div v-html="text"></div></slot>
+          </div>
+        </div>
+
+        <div v-if="hasCta" class="wizard-outro__cta">
+          <slot name="cta">
+            <UButton v-bind="cta" />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./wizard-outro.scss"></style>

package/wizard/wizard-outro/wizard-outro.scss

@@ -0,0 +1,56 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/grid/grid.mixin' as g;
+@use '../../layout/grid/grid-row';
+
+.wizard-outro {
+  .wizard-outro__row {
+    @include a.bp(lg) {
+      row-gap: var(--e-space-10);
+    }
+
+    @include a.bp(m) {
+      row-gap: var(--e-space-8);
+    }
+  }
+
+  .wizard-outro__image-col {
+    @include g.grid-col(4, 10);
+
+    @include a.bp(lg) {
+      @include g.grid-col(10, 10);
+    }
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .wizard-outro__content-col {
+    @include g.grid-col(6, 10);
+
+    @include a.bp(lg) {
+      @include g.grid-col(10, 10);
+    }
+  }
+
+  .wizard-outro__title {
+    @include a.type(1000, strong);
+
+    @include a.bp(m) {
+      @include a.type(800, strong);
+    }
+  }
+
+  .wizard-outro__text {
+    margin-top: var(--e-space-6);
+  }
+
+  .wizard-outro__cta {
+    margin-top: var(--e-space-16);
+
+    @include a.bp(lg) {
+      margin-top: var(--e-space-12);
+    }
+  }
+}

package/elements/button/button.js

@@ -1,12 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Button from './u-button.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import styles from './button.scss?inline'
-
-Button.styles = [customElementBaseStyle, styles]
-
-export const ButtonElement = {
-  register: () => {
-    customElements.define('u-button', defineCustomElement(Button))
-  },
-}

package/elements/elements.js

@@ -1,35 +0,0 @@
-// All `elements` Custom Elements. Needs some refactoring.
-
-import { ButtonElement as Button } from './button/button.js'
-import { IconButtonElement as IconButton } from './icon-button/icon-button.js'
-import { IconElement as Icon } from './icon/icon.js'
-import { LoaderElement as Loader } from './loader/loader.js'
-
-/**
- * These exports allow best tree-shaking behaviour.
- * Obviously you'll have to import 'manually' all the elements you need.
- *
- * @example
- * import { IconButton } from '@energie360/ui-library'
- * IconButton.register()
- */
-export { Button, IconButton, Icon, Loader }
-
-/**
- * With this export you get all the elements. Meaning all the elements will be inlcuded in your bundle, even if you register only one element.
- *
- * @example
- * import { Elements } from '@energie360/ui-library'
- * Elements.Button.register()
- */
-
-/**
- *
- * @type {{IconButton: {register: function(): void}, Button: {register: function(): void}, Loader: {register: function(): void}, Icon: {register: function(): void}}}
- */
-export const Elements = {
-  Button,
-  IconButton,
-  Icon,
-  Loader,
-}

package/elements/icon/icon.js

@@ -1,13 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Icon from './u-icon.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import ceStyles from './icon.ce.scss?inline'
-import styles from './icon.scss?inline'
-
-Icon.styles = [customElementBaseStyle, ceStyles, styles]
-
-export const IconElement = {
-  register: () => {
-    customElements.define('u-icon', defineCustomElement(Icon))
-  },
-}

package/elements/icon-button/icon-button.js

@@ -1,12 +0,0 @@
-import { defineCustomElement } from 'vue'
-import IconButton from './u-icon-button.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import styles from './icon-button.scss?inline'
-
-IconButton.styles = [customElementBaseStyle, styles]
-
-export const IconButtonElement = {
-  register: () => {
-    customElements.define('u-icon-button', defineCustomElement(IconButton))
-  },
-}

package/elements/loader/loader.js

@@ -1,13 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Loader from './u-loader.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import ceStyles from './loader.ce.scss?inline'
-import styles from './loader.scss?inline'
-
-Loader.styles = [customElementBaseStyle, ceStyles, styles]
-
-export const LoaderElement = {
-  register: () => {
-    customElements.define('u-loader', defineCustomElement(Loader))
-  },
-}

package/modules/feedback/index.js

@@ -1 +0,0 @@
-export { default as UFeedback } from './u-feedback.vue'

package/modules/inline-edit-group/index.js

@@ -1 +0,0 @@
-export { default as UInlineEditGroup } from './u-inline-edit-group.vue'