@energie360/ui-library 0.1.19 → 0.1.21

package/components/badge/u-badge.vue

@@ -11,7 +11,15 @@ interface Props {
   right?: number
 }
 
-const { color = 'var(--e-c-mono-900)', type = 'default', show = true } = defineProps<Props>()
+const {
+  value = undefined,
+  state = undefined,
+  top = 0,
+  right = 0,
+  color = 'var(--e-c-mono-900)',
+  type = 'default',
+  show = true,
+} = defineProps<Props>()
 </script>
 
 <template>

package/components/card/card.scss

@@ -6,7 +6,9 @@
   border-radius: var(--e-brd-radius-2);
   display: flex;
   flex-direction: column;
-  height: 100%;
+
+  // Set full-height not here, but through parent group containers, like <UCardGroup>
+  // height: 100%;
 
   &::after {
     pointer-events: none;

package/components/card/u-card.vue

@@ -28,6 +28,4 @@ watch(
   </section>
 </template>
 
-<style lang="scss">
-@use './card.scss';
-</style>
+<style lang="scss" src="./card.scss"></style>

package/components/card-cta-header/u-card-cta-header.vue

@@ -5,7 +5,7 @@ interface Props {
   disabled?: boolean
 }
 
-const { disabled = false } = defineProps<Props>()
+const { title = '', subtitle = '', disabled = false } = defineProps<Props>()
 </script>
 
 <template>

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

@@ -19,7 +19,7 @@ interface Props {
   cta?: Radio | Link
 }
 
-const { cta } = defineProps<Props>()
+const { cta = undefined } = defineProps<Props>()
 
 const { toggleActiveCard } = inject('card')
 const { currentValue } = inject('card-group', {})

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

@@ -18,12 +18,16 @@ defineProps<Props>()
           {{ priceText }}
         </div>
 
-        <div v-if="priceSubtext" class="card-price__subtext">
-          {{ priceSubtext }}
+        <div v-if="$slots.priceSubtext || priceSubtext" class="card-price__subtext">
+          <slot name="priceSubtext">
+            <div v-html="priceSubtext"></div>
+          </slot>
         </div>
 
-        <div v-if="description" class="card-price__description">
-          {{ description }}
+        <div v-if="$slots.description || description" class="card-price__description">
+          <slot name="description">
+            <div v-html="description"></div>
+          </slot>
         </div>
       </div>
 

package/components/collapsible/u-collapsible.vue

@@ -10,7 +10,7 @@ interface Props {
 }
 
 const cId = useId()
-const { level = 3, expanded = false } = defineProps<Props>()
+const { header = '', panel = '', level = 3, expanded = false } = defineProps<Props>()
 
 // Initial state
 const panelHidden = ref(!expanded)

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

@@ -10,7 +10,7 @@ interface Props {
   active?: boolean
 }
 
-const { href, active = false } = defineProps<Props>()
+const { label = '', href = '', target = '', active = false } = defineProps<Props>()
 
 const tag = computed(() => {
   return href ? 'a' : 'span'
@@ -18,7 +18,7 @@ const tag = computed(() => {
 </script>
 
 <template>
-  <component :is="tag" class="context-menu-link" :class="{ active }">
+  <component :is="tag" class="context-menu-link" :class="{ active }" :href :target>
     <UIcon :name="icon" />
     <slot>{{ label }}</slot>
   </component>

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

@@ -29,6 +29,6 @@
 .data-card__ctas {
   display: flex;
   column-gap: var(--e-space-4);
-  align-items: flex-start;
   margin-top: var(--e-space-4);
+  line-height: 0;
 }

package/components/download-list-item/download-list-item.scss

@@ -1,51 +1,51 @@
 @use '../../base/abstracts' as a;
 
-.download-list-item {
-  @keyframes arrow-anim {
-    0% {
-      transform: translateY(-30%);
-      opacity: 0.2;
-    }
+@keyframes arrow-anim {
+  0% {
+    transform: translateY(-30%);
+    opacity: 0.2;
+  }
 
-    80% {
-      transform: translateY(0);
-      opacity: 1;
-    }
+  80% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 
-    100% {
-      transform: translateY(2%);
-      opacity: 1;
-    }
+  100% {
+    transform: translateY(2%);
+    opacity: 1;
   }
+}
 
-  @keyframes hide-download {
-    0% {
-      transform: none;
-      transform-origin: bottom center;
-      opacity: 1;
-    }
+@keyframes hide-download {
+  0% {
+    transform: none;
+    transform-origin: bottom center;
+    opacity: 1;
+  }
 
-    100% {
-      transform: rotate(60deg);
-      transform-origin: bottom center;
-      opacity: 0;
-    }
+  100% {
+    transform: rotate(60deg);
+    transform-origin: bottom center;
+    opacity: 0;
   }
+}
 
-  @keyframes show-check {
-    0% {
-      transform: rotate(-60deg);
-      transform-origin: bottom center;
-      opacity: 0;
-    }
+@keyframes show-check {
+  0% {
+    transform: rotate(-60deg);
+    transform-origin: bottom center;
+    opacity: 0;
+  }
 
-    100% {
-      transform: rotate(0);
-      transform-origin: bottom center;
-      opacity: 1;
-    }
+  100% {
+    transform: rotate(0);
+    transform-origin: bottom center;
+    opacity: 1;
   }
+}
 
+.download-list-item {
   position: relative;
   transform: scale(1); // Safari hack
   height: a.rem(64);
@@ -57,6 +57,24 @@
     }
   }
 
+  &.loading {
+    pointer-events: none;
+
+    .download-list-item__cell {
+      color: var(--e-c-mono-500);
+    }
+
+    .download-list-item__link {
+      ~ * .download {
+        animation-name: arrow-anim;
+        animation-delay: 100ms;
+        animation-duration: var(--e-trs-duration-slowest);
+        animation-timing-function: ease-out;
+        animation-iteration-count: infinite;
+      }
+    }
+  }
+
   &.visited {
     .download-list-item__cell {
       background: var(--e-c-mono-50);
@@ -124,7 +142,9 @@
 
   padding: var(--e-space-5) var(--e-space-6);
   background-color: var(--e-c-secondary-01-50);
-  transition: background-color a.$trs-default;
+  transition:
+    background-color a.$trs-default,
+    color a.$trs-default;
 
   + .download-list-item__cell {
     padding-left: var(--e-space-2);
@@ -171,6 +191,7 @@
   border-radius: var(--e-brd-radius-2);
   border: 2px solid transparent;
   transition: border a.$trs-default;
+  cursor: pointer;
 
   &:hover {
     border: 2px solid var(--e-c-secondary-01-100);

package/components/download-list-item/u-download-list-item.vue

@@ -1,24 +1,59 @@
 <script setup lang="ts">
-import { ref, computed, inject } from 'vue'
+import { computed, inject, useTemplateRef, ref, watch } from 'vue'
 import { UIcon } from '../../elements'
+import { getCurrentInstance } from 'vue'
 
 interface Props {
   data: string[]
-  url: string
+  url?: string
   compact?: boolean
   headings?: string[]
+  visited?: boolean
+  loading?: boolean
 }
 
-const { data, compact = false, headings = inject('headings', []) } = defineProps<Props>()
+const {
+  visited,
+  url = '',
+  data,
+  compact = false,
+  headings = inject('headings', []),
+} = defineProps<Props>()
 
-const visited = ref(false)
+const linkRef = useTemplateRef('link')
+const instance = getCurrentInstance()
+const emit = defineEmits(['click'])
 const isCompact = inject('compact', compact)
+const isVisited = ref(false)
 const label = computed(() => data.join(', '))
+
+const onClick = (e: Event) => {
+  if (!url) {
+    e.preventDefault()
+    emit('click', instance)
+    return
+  }
+
+  isVisited.value = true
+}
+
+const click = () => {
+  linkRef.value.click()
+}
+
+watch(
+  () => visited,
+  () => {
+    isVisited.value = visited
+  },
+)
+
+defineExpose({ click })
 </script>
 
 <template>
   <tr
-    :class="['download-list-item', { visited, compact: isCompact }]"
+    :class="['download-list-item', { visited: isVisited, loading, compact: isCompact }]"
     :style="{ '--rows': Math.round(data.length / 2) }"
   >
     <td v-for="(cell, idx) in data" :key="idx" class="download-list-item__cell">
@@ -29,15 +64,18 @@ const label = computed(() => data.join(', '))
     </td>
 
     <td class="download-list-item__cell cta">
-      <a
+      <component
+        :is="url ? 'a' : 'button'"
+        ref="link"
         class="download-list-item__link"
         :href="url"
         target="_blank"
         download
         :aria-label="label"
-        @click="visited = true"
+        :disabled="loading"
+        @click="onClick"
       >
-      </a>
+      </component>
       <div class="download-list-item__icon-wrapper">
         <UIcon name="mini-check" class="download-list-item__check" />
 

package/components/hint/hint.scss

@@ -3,66 +3,57 @@
 @use '../../base/abstracts' as a;
 @use '../../elements/text-link/text-link.scss' as t;
 
-.hint {
-  @mixin type-neutral {
-    background-color: var(--e-c-secondary-05-100);
-    color: var(--e-c-secondary-05-900);
+@mixin type-neutral {
+  background-color: var(--e-c-secondary-05-100);
+  color: var(--e-c-secondary-05-900);
 
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
-    }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
+  }
 
-    .hint__richtext {
-      margin-left: var(--e-space-9);
+  .hint__richtext {
+    margin-left: var(--e-space-9);
 
-      @include a.bp(lg) {
-        margin-left: 0;
-      }
+    @include a.bp(lg) {
+      margin-left: 0;
     }
+  }
 
-    // override some richtext styles.
-    .richtext {
-      a {
-        font-size: 100px;
-        color: inherit;
+  // override some richtext styles.
+  .richtext {
+    a {
+      font-size: 100px;
+      color: inherit;
 
-        &:active,
-        &:hover {
-          text-decoration-color: var(--e-c-secondary-05-200);
-        }
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-secondary-05-200);
       }
     }
   }
+}
 
-  @mixin type-warning {
-    background-color: var(--e-c-signal-02-100);
-    color: var(--e-c-signal-02-900);
+@mixin type-warning {
+  background-color: var(--e-c-signal-02-100);
+  color: var(--e-c-signal-02-900);
 
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
-    }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
+  }
 
-    .hint__richtext {
-      margin-left: var(--e-space-9);
+  .hint__richtext {
+    margin-left: var(--e-space-9);
 
-      @include a.bp(lg) {
-        margin-left: 0;
-      }
+    @include a.bp(lg) {
+      margin-left: 0;
     }
+  }
 
-    // override some richtext styles.
-    .richtext {
-      a {
-        color: inherit;
-
-        &:active,
-        &:hover {
-          text-decoration-color: var(--e-c-signal-02-100);
-        }
-      }
-    }
+  // override some richtext styles.
+  .richtext {
+    a {
+      color: inherit;
 
-    .hint__link {
       &:active,
       &:hover {
         text-decoration-color: var(--e-c-signal-02-100);
@@ -70,47 +61,63 @@
     }
   }
 
-  @mixin type-legal {
-    background-color: var(--e-c-mono-00);
-    border: 1px solid var(--e-c-mono-500);
-    border-left-width: 4px;
-    border-left-color: var(--e-c-mono-700);
-    color: var(--e-c-mono-900);
-
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
-      top: 0;
-      left: calc(
-        -24px - 12px - 4px
-      ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-02-100);
     }
+  }
+}
 
-    > p,
-    .richtext {
-      margin-left: 0;
-    }
+@mixin type-legal {
+  background-color: var(--e-c-mono-00);
+  border: 1px solid var(--e-c-mono-500);
+  border-left-width: 4px;
+  border-left-color: var(--e-c-mono-700);
+  color: var(--e-c-mono-900);
 
-    .hint__link {
-      &:active,
-      &:hover {
-        text-decoration-color: var(--e-c-mono-100);
-      }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
+    top: 0;
+    left: calc(
+      -24px - 12px - 4px
+    ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+  }
+
+  > p,
+  .richtext {
+    margin-left: 0;
+  }
+
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-mono-100);
     }
+  }
 
-    @include a.bp(lg) {
-      margin-top: calc(4px + 4px + 24px);
-      border: 1px solid var(--e-c-mono-500);
-      border-top-width: 4px;
-      border-top-color: var(--e-c-mono-700);
-
-      &::before {
-        left: 0;
-        top: calc(
-          -24px - 4px - 4px
-        ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
-      }
+  @include a.bp(lg) {
+    margin-top: calc(4px + 4px + 24px);
+    border: 1px solid var(--e-c-mono-500);
+    border-top-width: 4px;
+    border-top-color: var(--e-c-mono-700);
+
+    &::before {
+      left: 0;
+      top: calc(
+        -24px - 4px - 4px
+      ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
     }
   }
+}
+
+.hint {
+  position: relative;
+  padding: var(--e-space-5) var(--e-space-4);
+  border-radius: var(--e-brd-radius-1);
+
+  // Default type
+  @include type-neutral;
 
   .hint__link {
     @include t.text-link;
@@ -130,13 +137,6 @@
     }
   }
 
-  // Default type
-  @include type-neutral;
-
-  position: relative;
-  padding: var(--e-space-5) var(--e-space-4);
-  border-radius: var(--e-brd-radius-1);
-
   .hint__label {
     + .hint__richtext {
       margin-top: var(--e-space-1);
@@ -160,12 +160,6 @@
     @include a.type(200, strong);
 
     margin-left: var(--e-space-9);
-
-    // margin-bottom: var(--e-space-1);
-
-    // @include a.bp(lg) {
-    //   margin-bottom: var(--e-space-2);
-    // }
   }
 
   @include a.bp(lg) {

package/components/hint/u-hint.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useSlots } from 'vue'
 import { URichtext } from '../'
 import { Cta } from '../../elements/types'
 
@@ -10,8 +9,7 @@ interface Props {
   text?: string
 }
 
-const { type = 'neutral' } = defineProps<Props>()
-const slots = useSlots()
+const { label = '', link = undefined, text = '', type = 'neutral' } = defineProps<Props>()
 </script>
 
 <template>

package/components/index.js

@@ -1,9 +1,3 @@
-/**
- * It's not recommended to import components from this file, because tree-shaking won't work then.
- * -> https://vite.dev/guide/performance#avoid-barrel-files
- */
-import exp from 'node:constants'
-
 export { default as UAccordionItem } from './accordion-item/u-accordion-item.vue'
 
 // Cards

package/components/inline-edit/inline-edit.scss

@@ -35,12 +35,12 @@
 
 .inline-edit__description,
 .inline-edit__summary {
+  color: var(--e-c-mono-700);
+
   @include a.type(300);
 
   // We don't need a full richtext implementation. The spacings are enough.
   @include r.richtext-spacing-rules;
-
-  color: var(--e-c-mono-700);
 }
 
 .inline-edit__description {

package/components/inline-edit/u-inline-edit.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, inject, useId, watch, useTemplateRef } from 'vue'
 import { UButton } from '../../elements'
-import { URichtext } from '../../components'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {

package/components/navigation-panel-tile/u-navigation-panel-tile.vue

@@ -17,6 +17,10 @@ interface Props {
 }
 
 const {
+  description = '',
+  icon = '',
+  iconBadge = undefined,
+  title = '',
   href = '',
   target = '_self',
   active = false,
@@ -59,7 +63,7 @@ const tag = computed(() => (href ? 'a' : 'div'))
 
 <style lang="scss" scoped src="./navigation-panel-tile.scss"></style>
 <style lang="scss">
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-panel-tile__description {
   @include a.bp(lg) {

package/components/navigation-toolbar-link/u-navigation-toolbar-link.vue

@@ -15,6 +15,7 @@ interface Props {
 }
 
 const {
+  label = '',
   active = false,
   collapsed = false,
   labelHidden = false,

package/components/panel/u-panel.vue

@@ -10,7 +10,7 @@ interface Props {
   image?: Image
 }
 
-const { image = null } = defineProps<Props>()
+const { title = '', text = '', image = null } = defineProps<Props>()
 
 const slots = useSlots()
 

package/components/progress-avatar/u-progress-avatar.vue

@@ -18,7 +18,9 @@ const observer = new IntersectionObserver(
     if (entries[0].isIntersecting) {
       observer.disconnect()
 
-      _progress.value = progress
+      setTimeout(() => {
+        _progress.value = progress
+      }, 200)
     }
   },
   {
@@ -28,9 +30,7 @@ const observer = new IntersectionObserver(
 )
 
 onMounted(() => {
-  setTimeout(() => {
-    observer.observe(el.value)
-  }, 200)
+  observer.observe(el.value)
 })
 </script>