@energie360/ui-library 0.1.15 → 0.1.17

package/modules/dialog/u-dialog.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { useTemplateRef, watch, useSlots } from 'vue'
+import { UButton } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+import { focusTrap } from '../../utils/a11y/focus-trap'
+
+interface Props {
+  title?: string
+  text?: string
+  headerImage?: Image
+  contentImage?: Image
+  closeBtnLabel?: string
+  mobileDialogStyle?: 'modal' | 'slideout'
+}
+
+const { mobileDialogStyle = 'modal', closeBtnLabel = getTranslation('close') } =
+  defineProps<Props>()
+
+const visible = defineModel<boolean>('visible')
+const dialogEl = useTemplateRef('dialog')
+const slots = useSlots()
+let focusTrapInstance
+
+// TODO: Key codes should be defined globally
+const ESC = 'Escape'
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.code === ESC) {
+    visible.value = false
+  }
+}
+
+const onDocumentClick = (e: Event) => {
+  if (e.target.closest('.dialog')) {
+    return
+  }
+
+  e.stopPropagation()
+  e.preventDefault()
+
+  visible.value = false
+}
+watch(visible, (newV) => {
+  if (newV) {
+    // Open Dialog
+    dialogEl.value.showModal()
+
+    focusTrapInstance = focusTrap(dialogEl.value, {
+      focusFirstElement: true,
+      allowArrowUpDown: true,
+      allowArrowLeftRight: true,
+    })
+
+    requestAnimationFrame(() => {
+      window.addEventListener('keydown', onKeydown)
+      document.addEventListener('click', onDocumentClick)
+    })
+  } else {
+    focusTrapInstance.release()
+
+    // Close Dialog
+    // The trigger element automatically gets the focus when the dialog is closed. yay native :)
+    dialogEl.value.close()
+
+    window.removeEventListener('keydown', onKeydown)
+    document.removeEventListener('click', onDocumentClick)
+  }
+})
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    closedby="none"
+    :class="[
+      'dialog-container',
+      mobileDialogStyle,
+      {
+        'has-header-image': !!slots['header-image'] || headerImage,
+        'has-content-image': !!slots['content-image'] || contentImage,
+      },
+    ]"
+  >
+    <div class="dialog">
+      <div class="dialog__header-image-container">
+        <slot name="header-image">
+          <img v-bind="headerImage" />
+        </slot>
+      </div>
+
+      <div class="dialog__content-container">
+        <div class="content-title">
+          <h3>
+            <slot name="title">{{ title }}</slot>
+          </h3>
+        </div>
+
+        <div class="content-text">
+          <div class="richtext">
+            <slot name="text">
+              <div v-html="text"></div>
+            </slot>
+          </div>
+        </div>
+
+        <div class="dialog__content-image">
+          <slot name="content-image">
+            <img v-bind="contentImage" />
+          </slot>
+        </div>
+      </div>
+
+      <div class="cta-container">
+        <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped lang="scss" src="./dialog.scss"></style>
+<style scoped lang="scss">
+.dialog__header-image-container {
+  :slotted(img) {
+    object-fit: contain;
+  }
+}
+
+.dialog__content-image {
+  :slotted(img) {
+    width: 100%;
+  }
+}
+</style>

package/modules/index.js

@@ -4,3 +4,7 @@ export { default as UInlineEditGroup } from './inline-edit-group/u-inline-edit-g
 export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-navigation-toolbar-top.vue'
 export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'
 export { default as UNavigationPanel } from './navigation-panel/u-navigation-panel.vue'
+export { default as UProgressIndicator } from './progress-indicator/u-progress-indicator.vue'
+export { default as UToast } from './toast/u-toast.vue'
+export { toast } from './toast/useToast.ts'
+export { default as UDialog } from './dialog/u-dialog.vue'

package/modules/inline-edit-group/u-inline-edit-group.vue

@@ -7,6 +7,8 @@ const update = (id) => {
 
 const activeEdit = ref('')
 
+defineExpose({ update })
+
 provide('inline-edit-group', {
   update,
   activeEdit,

package/modules/navigation-panel/navigation-panel.scss

@@ -59,6 +59,7 @@
 
   @include a.bp(lg) {
     @include a.type(200, strong);
+
     margin-bottom: var(--e-space-4);
   }
 }

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.15",
+  "version": "0.1.17",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -11,6 +11,7 @@
     "./elements": "./elements/index.js",
     "./components": "./components/index.js",
     "./modules": "./modules/index.js",
+    "./layout": "./layout/index.js",
     "./wizard": "./wizard/index.js",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",

package/utility/elements/form.scss

@@ -0,0 +1 @@
+@use '../../elements/form/form';

package/utility/layout/form-grid.scss

@@ -0,0 +1 @@
+@use '../../layout/form-grid/form-grid';

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