@energie360/ui-library 0.1.15 → 0.1.16

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

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