@energie360/ui-library 1.0.0 → 1.1.0

package/components/context-menu-link/u-context-menu-link.vue

@@ -3,14 +3,14 @@ import { computed } from 'vue'
 import { UIcon } from '../../elements'
 
 interface Props {
-  icon: string
+  icon?: string
   label?: string
   href?: string
   target?: string
   active?: boolean
 }
 
-const { label = '', href = '', target = '', active = false } = defineProps<Props>()
+const { icon = null, label = '', href = '', target = '', active = false } = defineProps<Props>()
 
 const tag = computed(() => {
   return href ? 'a' : 'span'
@@ -19,7 +19,7 @@ const tag = computed(() => {
 
 <template>
   <component :is="tag" class="context-menu-link" :class="{ active }" :href :target>
-    <UIcon :name="icon" />
+    <UIcon v-if="icon" :name="icon" />
     <slot>{{ label }}</slot>
   </component>
 </template>

package/components/data-card/data-card.scss

@@ -18,6 +18,10 @@
   }
 }
 
+.data-card__main {
+  position: relative;
+}
+
 .data-card__aside-column {
   float: right;
   margin-left: var(--e-space-2);

package/components/data-card/u-data-card.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 // TODO: add possibility to add items via slot
+import { hasSlotContent } from '../../utils/vue/helpers'
+
 interface dataItem {
   heading: string
   value: string
@@ -16,7 +18,7 @@ defineProps<Props>()
 <template>
   <div class="data-card">
     <div class="data-card__main">
-      <div v-if="$slots.aside" class="data-card__aside-column">
+      <div v-if="hasSlotContent($slots.aside)" class="data-card__aside-column">
         <slot name="aside" />
       </div>
 
@@ -34,7 +36,7 @@ defineProps<Props>()
       </dl>
     </div>
 
-    <div v-if="$slots.ctas" class="data-card__ctas">
+    <div v-if="hasSlotContent($slots.ctas)" class="data-card__ctas">
       <slot name="ctas" />
     </div>
   </div>

package/components/empty/u-empty.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { hasSlotContent } from '../../utils/vue/helpers'
 import { Image } from '../../elements/types'
+import { assetsPath } from '../../globals'
 
 interface Props {
   title?: string
@@ -8,7 +9,7 @@ interface Props {
   image?: Image
 }
 
-const { image = { src: '/static/ui-assets/images/search.svg', alt: '' } } = defineProps<Props>()
+const { image = { src: `${assetsPath}images/search.svg`, alt: '' } } = defineProps<Props>()
 </script>
 
 <template>

package/components/file-upload/u-file-upload.vue

@@ -6,6 +6,7 @@ import { getTranslation } from '../../utils/translations/translate'
 import { mimeTypes } from '../../utils/global/mime-types'
 import { intersect } from '../../utils/array/intersect'
 import { ref, computed, useTemplateRef, useId } from 'vue'
+import { assetsPath } from '../../globals'
 
 interface Props {
   accept?: string[]
@@ -171,17 +172,17 @@ const onRemoveError = (filename: string, lastModified: number) => {
       />
 
       <div v-if="dragover" class="file-upload__drop-zone-inner-drag">
-        <img src="/static/ui-assets/images/doc-upload-inverted.svg" alt="" />
+        <img :src="`${assetsPath}images/doc-upload-inverted.svg`" alt="" />
       </div>
 
       <div class="file-upload__drop-zone-inner">
         <img
           v-if="uploadDisabled"
           class="no-select"
-          src="/static/ui-assets/images/doc-upload-disabled.svg"
+          :src="`${assetsPath}images/doc-upload-disabled.svg`"
           alt=""
         />
-        <img v-else class="no-select" src="/static/ui-assets/images/doc-upload.svg" alt="" />
+        <img v-else class="no-select" :src="`${assetsPath}images/doc-upload.svg`" alt="" />
         <p class="no-select type-300-strong label">
           {{ getTranslation('dragFileHereOr') }}
         </p>

package/components/index.js

@@ -76,3 +76,4 @@ export { default as UCardStatistic } from './card-statistic/u-card-statistic.vue
 export { default as UEmpty } from './empty/u-empty.vue'
 export { default as UButtonGroup } from './button-group/u-button-group.vue'
 export { default as UPortalLogo } from './portal-logo/u-portal-logo.vue'
+export { default as UTeaserCard } from './teaser-card/u-teaser-card.vue'

package/components/index.ts

@@ -76,3 +76,4 @@ export { default as UCardStatistic } from './card-statistic/u-card-statistic.vue
 export { default as UEmpty } from './empty/u-empty.vue'
 export { default as UButtonGroup } from './button-group/u-button-group.vue'
 export { default as UPortalLogo } from './portal-logo/u-portal-logo.vue'
+export { default as UTeaserCard } from './teaser-card/u-teaser-card.vue'

package/components/notification-list/u-notification-list.vue

@@ -2,6 +2,7 @@
 import { DotLottieVue, setWasmUrl } from '@lottiefiles/dotlottie-vue'
 import wasmUrl from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url'
 import { ref, onMounted, useTemplateRef } from 'vue'
+import { assetsPath } from '../../globals'
 
 interface Props {
   emptyText: string
@@ -41,7 +42,7 @@ onMounted(() => {
         <DotLottieVue
           autoplay
           loop
-          src="/static/ui-assets/lottie/notification-empty.lottie"
+          :src="`${assetsPath}lottie/notification-empty.lottie`"
           style="height: 100%; width: 100%"
         />
       </div>

package/components/portal-logo/u-portal-logo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Image } from '../../elements/types'
+import { assetsPath } from '../../globals'
 
 interface Props {
   logoImage?: Image
@@ -12,11 +13,11 @@ interface Props {
 
 const {
   logoImage = {
-    src: '/static/ui-assets/images/logo-white.svg',
+    src: `${assetsPath}images/logo-white.svg`,
     alt: 'Logo Energie 360°',
   },
   logoMinifiedImage = {
-    src: '/static/ui-assets/images/logo-short-inverted.svg',
+    src: `${assetsPath}images/logo-short-inverted.svg`,
     alt: 'Logo Energie 360°',
   },
 } = defineProps<Props>()

package/components/teaser-card/teaser-card.scss

@@ -0,0 +1,34 @@
+@use '../../base/abstracts' as a;
+
+.teaser-card {
+  padding: var(--e-space-4);
+  background-color: var(--e-c-mono-50);
+  border-radius: var(--e-brd-radius-3);
+}
+
+.teaser-card__image {
+  width: 100%;
+  border-radius: var(--e-brd-radius-2);
+  overflow: hidden;
+  margin-bottom: var(--e-space-4);
+
+  > * {
+    object-fit: cover;
+    width: 100%;
+  }
+}
+
+.teaser-card__title {
+  @include a.type(300, strong);
+
+  margin-bottom: var(--e-space-3);
+}
+
+.teaser-card__text {
+  @include a.type(200);
+}
+
+.teaser-card__cta {
+  margin-top: var(--e-space-6);
+  display: grid;
+}

package/components/teaser-card/u-teaser-card.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Cta, Image } from '../../elements/types'
+import { hasSlotContent } from '../../utils/vue/helpers'
+import { UButton } from '../../elements'
+
+interface Props {
+  image?: Image
+  text?: string
+  title?: string
+  cta?: Cta
+}
+
+const { image = null, title = '', text = '', cta = null } = defineProps<Props>()
+</script>
+
+<template>
+  <div class="teaser-card">
+    <div v-if="hasSlotContent($slots.image) || image" class="teaser-card__image">
+      <slot name="image">
+        <img :src="image.src" :alt="image.alt" />
+      </slot>
+    </div>
+
+    <div v-if="hasSlotContent($slots.title) || title" class="teaser-card__title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+
+    <div v-if="hasSlotContent($slots.text) || text" class="teaser-card__text">
+      <slot name="text">
+        {{ text }}
+      </slot>
+    </div>
+
+    <div v-if="hasSlotContent($slots.cta) || cta" class="teaser-card__cta">
+      <slot name="cta">
+        <UButton variant="outlined" :href="cta.href" :target="cta.target">
+          {{ cta.label }}
+        </UButton>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./teaser-card.scss"></style>

package/elements/button-tile/button-tile.scss

@@ -0,0 +1,32 @@
+@use '../../base/abstracts' as a;
+@use '../button/button-base' as b;
+
+.button-tile {
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--e-space-2);
+  line-height: 0;
+  width: 100%;
+  padding: var(--e-space-4);
+  border-radius: var(--e-brd-radius-2);
+  border-width: 2px;
+  border-style: solid;
+  min-height: a.rem(60);
+
+  &.valign-center {
+    align-items: center;
+  }
+}
+
+.button-tile__label {
+  @include a.type(100, strong);
+}
+
+.button-tile__text {
+  @include a.type(100);
+}
+
+.button-tile__left {
+  display: flex;
+  flex-direction: column;
+}

package/elements/button-tile/u-button-tile.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { hasSlotContent } from '../../utils/vue/helpers'
+import { UIcon } from '../'
+
+interface Props {
+  label?: string
+  text?: string
+  href?: string
+  target?: string
+  icon?: string
+  backgroundColor?: string
+  borderColor?: string
+  color?: string
+  vAlign?: 'top' | 'center'
+}
+
+const {
+  label = null,
+  text = '',
+  href = '',
+  target = '_blank',
+  icon = '',
+  backgroundColor = 'var(--e-c-mono-00)',
+  color = 'var(--e-c-mono-900)',
+  borderColor = 'var(--e-c-mono-500)',
+  vAlign = 'top',
+} = defineProps<Props>()
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :class="['button-tile', `valign-${vAlign}`]"
+    :style="{ color, backgroundColor, borderColor }"
+    :href
+    :target
+  >
+    <span class="button-tile__left">
+      <span v-if="hasSlotContent($slots.label) || label" class="button-tile__label">
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </span>
+
+      <span v-if="hasSlotContent($slots.text) || label" class="button-tile__text">
+        <slot name="text">
+          {{ text }}
+        </slot>
+      </span>
+    </span>
+
+    <span v-if="icon" class="button-tile__right">
+      <UIcon :name="icon" />
+    </span>
+  </component>
+</template>
+
+<style scoped lang="scss" src="./button-tile.scss"></style>

package/elements/button-tiles/button-tiles.scss

@@ -0,0 +1,18 @@
+@use '../../base/abstracts' as a;
+
+.button-tiles {
+  container-type: inline-size;
+
+  @container (width > 342px) {
+    .button-tiles__inner {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+
+.button-tiles__inner {
+  display: grid;
+  column-gap: var(--e-space-3);
+  row-gap: var(--e-space-4);
+  grid-template-columns: 1fr;
+}

package/elements/button-tiles/u-button-tiles.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="button-tiles">
+    <div class="button-tiles__inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./button-tiles.scss"></style>

package/elements/index.js

@@ -22,3 +22,5 @@ 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 UButtonTile } from './button-tile/u-button-tile.vue'
+export { default as UButtonTiles } from './button-tiles/u-button-tiles.vue'

package/elements/index.ts

@@ -22,3 +22,5 @@ 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 UButtonTile } from './button-tile/u-button-tile.vue'
+export { default as UButtonTiles } from './button-tiles/u-button-tiles.vue'

package/elements/spectro/u-spectro.vue

@@ -1,7 +1,11 @@
+<script setup lang="ts">
+import { assetsPath } from '../../globals'
+</script>
+
 <template>
   <div class="spectro">
     <div class="inner">
-      <img src="/static/ui-assets/images/spectro.svg" alt="" aria-hidden="true" />
+      <img :src="`${assetsPath}images/spectro.svg`" alt="" aria-hidden="true" />
     </div>
   </div>
 </template>

package/elements/text-field/text-field.scss

@@ -55,4 +55,77 @@
       top: 0;
     }
   }
+
+  // Modifiers
+
+  // This is currently a 'quick' solution for the sicherheit-webapp.
+  // Will probably need some refinement if we want to use this for general usage.
+  &.inverted {
+    .suffix-action,
+    .prefix-icon {
+      color: var(--e-c-mono-00);
+    }
+
+    .control {
+      input {
+        color: var(--e-c-mono-00);
+        background-color: var(--e-c-primary-01-900);
+
+        &::placeholder {
+          color: var(--e-c-mono-500);
+        }
+
+        &:disabled::placeholder {
+          color: var(--e-c-mono-500);
+        }
+      }
+    }
+
+    .label {
+      background-color: var(--e-c-primary-01-900);
+      color: var(--e-c-mono-00);
+    }
+
+    .help-text {
+      color: var(--e-c-mono-00);
+    }
+
+    &.focus.float-label .label {
+      color: var(--e-c-mono-00);
+    }
+
+    &.float-label .label {
+      background-color: transparent;
+      background-image: linear-gradient(
+        0deg,
+        var(--e-c-primary-01-900) 55%,
+        rgb(255 255 255 / 0%) 45%
+      );
+    }
+
+    .cancel-search {
+      color: var(--e-c-mono-00);
+    }
+
+    .control-border {
+      border-color: var(--e-c-primary-01-900);
+    }
+
+    &.hover,
+    &.focus {
+      .control-border {
+        border-color: var(--e-c-mono-00);
+      }
+    }
+  }
+
+  // This is currently a 'quick' solution for the sicherheit-webapp.
+  // Will probably need some refinement if we want to use this for general usage.
+  &.larger {
+    .control {
+      input {
+        height: a.rem(64);
+      }
+    }
+  }
 }

package/elements/text-field/u-text-field.vue

@@ -12,6 +12,8 @@ interface Props extends FormFieldBase {
   placeholder?: string
   readonly?: boolean
   unit?: string
+  inverted?: boolean
+  larger?: boolean
 }
 
 const inputId = useId()
@@ -133,6 +135,8 @@ watch(model, () => {
         'has-error': error,
         'show-help-text': hasHelpText,
         'has-cta': hasSlotContent($slots.cta),
+        inverted,
+        larger,
       },
       type,
     ]"

package/globals.js

@@ -5,4 +5,7 @@
 // The library shouldn't rely on any specific build tools, like vite. That's why we shouldn't use `import.meta.env.DEV`.
 // TODO: Find a more 'generic' way to set an environment variable when using/developing the library.
 // In the meantime we'll just use this fixed path for the ui-assets.
-export const assetsPath = '/static/ui-assets/'
+
+const assetsPathPrefix = import.meta.env.VITE_ASSETS_PATH_PREFIX || ''
+
+export const assetsPath = assetsPathPrefix + '/static/ui-assets/'

package/modules/login-animation/u-login-animation.vue

@@ -4,6 +4,7 @@ import { useTemplateRef, ref } from 'vue'
 import butterflySpritePositions from './butterfly-sprite.json'
 import butterflySprite from './butterfly-sprite.png'
 import { gsap } from 'gsap'
+import { assetsPath } from '../../globals'
 
 const butterfly = useTemplateRef('butterfly')
 const butterflyWrapper = useTemplateRef('butterflyWrapper')
@@ -70,7 +71,7 @@ const onMousemove = (e: MouseEvent) => {
           @ready="onSpriteReady"
         />
       </div>
-      <img src="/static/ui-assets/images/forest.png" alt="" />
+      <img :src="`${assetsPath}images/forest.png`" alt="" />
     </div>
   </div>
 </template>

package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue

@@ -4,6 +4,7 @@ import { UContextMenu } from '../../components'
 import { Image } from '../../elements/types'
 import { ref, watch, useTemplateRef } from 'vue'
 import { hasSlotContent } from '../../utils/vue/helpers'
+import { assetsPath } from '../../globals'
 
 interface MenuButton {
   icon: string
@@ -24,11 +25,11 @@ interface Props {
 const {
   collapsed = false,
   logoImage = {
-    src: '/static/ui-assets/images/logo-white.svg',
+    src: `${assetsPath}images/logo-white.svg`,
     alt: 'Logo Energie 360°',
   },
   logoMinifiedImage = {
-    src: '/static/ui-assets/images/logo-short-inverted.svg',
+    src: `${assetsPath}images/logo-short-inverted.svg`,
     alt: 'Logo Energie 360°',
   },
   logoLink = {

package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue

@@ -5,10 +5,12 @@ import { UContextMenu } from '../../components'
 import { Image } from '../../elements/types'
 import { getTranslation } from '../../utils/translations/translate'
 import { ref, watch, useTemplateRef, onUnmounted } from 'vue'
+import { assetsPath } from '../../globals'
 
 interface MenuButton {
   icon: string
   label: string
+  showLabel?: boolean
 }
 
 interface Props {
@@ -18,11 +20,12 @@ interface Props {
   }
   menuButton: MenuButton
   logoImage?: Image
+  hideBurger?: boolean
 }
 
 const {
   logoImage = {
-    src: '/static/ui-assets/images/logo-short-inverted.svg',
+    src: `${assetsPath}images/logo-short-inverted.svg`,
     alt: 'Logo Energie 360°',
   },
   logoLink = {
@@ -115,15 +118,21 @@ onUnmounted(() => {
       </div>
 
       <div class="navigation-toolbar-top__top-bar-ctas">
-        <UContextMenu placement="bottom-full">
+        <UContextMenu v-if="menuButton" placement="bottom-full">
           <template #trigger="{ isOpen }">
-            <UNavigationToolbarLink v-bind="menuButton" collapsed label-hidden :active="isOpen" />
+            <UNavigationToolbarLink
+              v-bind="menuButton"
+              :collapsed="!menuButton.showLabel"
+              label-hidden
+              :active="isOpen"
+            />
           </template>
 
           <slot name="contextMenuLinks"></slot>
         </UContextMenu>
 
         <UNavigationToolbarLink
+          v-if="!hideBurger"
           icon="menu"
           :label="getTranslation('openMenu')"
           collapsed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -42,6 +42,7 @@
   "dependencies": {
     "@lottiefiles/dotlottie-vue": "^0.10.14",
     "@lottiefiles/dotlottie-web": "^0.62.0",
+    "@tsparticles/confetti": "^3.9.1",
     "gsap": "^3.14.2",
     "@energie360/design-tokens": "^1.3.0"
   },

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

@@ -1,23 +1,82 @@
 <script setup lang="ts">
 import { Image, Cta } from '../../elements/types'
 import { UButton } from '../../elements'
-import { computed, useSlots } from 'vue'
+import { computed, onMounted, useSlots } from 'vue'
+import { confetti as confettiFn } from '@tsparticles/confetti'
 
 interface Props {
   title?: string
   text?: string
   image?: Image
-
   cta?: Cta
+  confetti?: boolean
 }
 
-const { text = '', image = undefined, cta = undefined, title = '' } = defineProps<Props>()
+const {
+  text = '',
+  image = undefined,
+  cta = undefined,
+  title = '',
+  confetti = false,
+} = defineProps<Props>()
 
 const slots = useSlots()
 
 const hasCta = computed(() => !!slots.cta || cta)
 
 const hasText = computed(() => !!slots.text || text)
+
+const randomInRange = (min, max) => {
+  return Math.random() * (max - min) + min
+}
+
+const makeConfetti = async () => {
+  const duration = 4 * 1000
+  const animationEnd = Date.now() + duration
+  const defaults = {
+    startVelocity: 30,
+    spread: 360,
+    ticks: 60,
+    zIndex: 100,
+    colors: ['#4BA528', '#B90F4B', '#FFD700', '#0096DC'],
+  }
+
+  const interval = setInterval(() => {
+    const timeLeft = animationEnd - Date.now()
+
+    if (timeLeft <= 0) {
+      return clearInterval(interval)
+    }
+
+    const particleCount = 50 * (timeLeft / duration)
+
+    // since particles fall down, start a bit higher than random
+    confettiFn(
+      Object.assign({}, defaults, {
+        particleCount,
+        origin: {
+          x: randomInRange(0.1, 0.3),
+          y: Math.random() - 0.2,
+        },
+      }),
+    )
+    confettiFn(
+      Object.assign({}, defaults, {
+        particleCount,
+        origin: {
+          x: randomInRange(0.7, 0.9),
+          y: Math.random() - 0.2,
+        },
+      }),
+    )
+  }, 250)
+}
+
+onMounted(() => {
+  if (confetti) {
+    makeConfetti()
+  }
+})
 </script>
 
 <template>

package/wizard/wizard-top-bar/u-wizard-top-bar.vue

@@ -1,10 +1,14 @@
+<script setup lang="ts">
+import { assetsPath } from '../../globals'
+</script>
+
 <template>
   <div class="wizard-top-bar">
     <div class="container">
       <div class="wizard-top-bar__inner">
         <div class="wizard-top-bar__logo">
           <slot name="logo">
-            <img src="/static/ui-assets/images/logo.svg" alt="logo" />
+            <img :src="`${assetsPath}images/logo.svg`" alt="logo" />
           </slot>
         </div>