@energie360/ui-library 0.1.20 → 0.1.22

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-highlight/card-highlight.scss

@@ -4,83 +4,77 @@
   container: card-highlight / inline-size;
   height: 100%;
 
-  @container card-highlight (width >= 900px) {
+  @container (width <= 650px) {
+    .card-highlight {
+      display: flex;
+      flex-direction: column;
+    }
+
     .card-highlight__image-col {
-      padding-right: var(--e-space-20);
+      justify-content: center;
+    }
+
+    .card-highlight__chip {
+      // Forces child element (<UChip>) to be full-width.
+      display: grid;
+      width: 100%;
     }
   }
 }
 
 .card-highlight {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+  grid-column-gap: var(--e-space-4);
+  grid-row-gap: var(--e-space-4);
+  padding: var(--e-space-6);
   border: 1px solid var(--e-c-primary-01-100);
   border-radius: var(--e-brd-radius-2);
   background-color: var(--e-c-primary-01-50);
-  padding: var(--e-space-6);
-  gap: var(--e-space-4);
   height: 100%;
-  justify-content: space-between;
+}
 
-  @include a.bp(m) {
-    padding: var(--e-space-5);
-  }
+.card-highlight__title {
+  @include a.type(300, strong);
 
-  @include a.bp(s) {
-    padding: var(--e-space-4);
-  }
+  grid-area: 1 / 1 / 2 / 2;
+  color: var(--e-c-secondary-01-950);
+}
+
+.card-highlight__image-col {
+  grid-area: 1 / 2 / 3 / 3;
+  display: flex;
+  align-items: center;
 
-  @include a.bp(m) {
-    flex-direction: column;
-    align-items: flex-start;
+  img {
+    max-height: a.rem(225);
   }
 }
 
+.card-highlight__content-col {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
 .card-highlight__content-col {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   row-gap: var(--e-space-4);
-
-  @include a.bp(m) {
-    width: calc(100% - 40px);
-  }
-}
-
-.card-highlight__title {
-  @include a.type(300, strong);
-
-  color: var(--e-c-secondary-01-950);
 }
 
 .card-highlight__text {
   @include a.type(200);
 
-  margin-top: auto;
   color: var(--e-c-secondary-01-900);
 }
 
-.card-highlight__image-col {
-  flex: 1 1 auto;
-  max-width: 60%;
-  align-self: center;
-  display: flex;
-  justify-content: flex-end;
-
-  img {
-    max-height: a.rem(225);
-  }
-
-  @include a.bp(m) {
-    max-width: none;
-  }
-}
-
 .card-highlight__badge-icon {
   position: absolute;
   padding: 5px;
-  top: var(--e-space-4);
-  right: var(--e-space-4);
+  top: var(--e-space-5);
+  right: var(--e-space-5);
   background-color: var(--e-c-mono-00);
   color: var(--e-c-secondary-01-950);
   border-radius: 100%;

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import { Chip } from '../chip/u-chip.vue'
 import { Image } from '../../elements/types'
 import { UIcon } from '../../elements'
+import { UChip } from '../'
 
 interface Props {
   title?: string
   text?: string
   image?: Image
   badgeIcon?: string
+  chip?: Chip
 }
 
 defineProps<Props>()
@@ -15,22 +18,26 @@ defineProps<Props>()
 <template>
   <div class="card-highlight-container">
     <div class="card-highlight">
-      <div class="card-highlight__content-col">
-        <h3 v-if="$slots.title || title" class="card-highlight__title">
-          <slot name="title">{{ title }}</slot>
-        </h3>
+      <h3 v-if="$slots.title || title" class="card-highlight__title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+
+      <div v-if="$slots.image || image" class="card-highlight__image-col" aria-hidden="true">
+        <slot name="image">
+          <img v-bind="image" />
+        </slot>
+      </div>
 
+      <div class="card-highlight__content-col">
         <div v-if="$slots.text || text" class="card-highlight__text">
           <slot name="text">
             <div v-html="text"></div>
           </slot>
         </div>
-      </div>
 
-      <div v-if="$slots.image || image" class="card-highlight__image-col">
-        <div>
-          <slot name="image">
-            <img v-bind="image" />
+        <div v-if="$slots.info || chip" class="card-highlight__chip">
+          <slot name="info">
+            <UChip v-bind="chip"></UChip>
           </slot>
         </div>
       </div>

package/components/chip/chip.scss

@@ -4,8 +4,8 @@
   background-color: var(--e-c-mono-50);
   border: 1px solid var(--e-c-mono-200);
   border-radius: var(--e-brd-radius-2);
-  padding: var(--e-space-1_5) var(--e-space-2);
-  display: flex;
+  padding: var(--e-space-1_5) var(--e-space-3);
+  display: inline-flex;
   align-items: center;
   column-gap: var(--e-space-1);
 }

package/components/chip/u-chip.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { UIcon } from '../../elements'
 
-interface Props {
+export interface Chip {
   caption?: string
   label?: string
   icon?: string
 }
 
-defineProps<Props>()
+defineProps<Chip>()
 </script>
 
 <template>

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

@@ -6,9 +6,9 @@
   border-radius: var(--e-brd-radius-2);
 }
 
-.data-card__main {
-  display: flex;
-  column-gap: var(--e-space-2);
+.data-card__aside-column {
+  float: right;
+  margin-left: var(--e-space-2);
 }
 
 .data-card__list {
@@ -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/data-card/u-data-card.vue

@@ -15,6 +15,10 @@ defineProps<Props>()
 <template>
   <div class="data-card">
     <div class="data-card__main">
+      <div v-if="$slots.aside" class="data-card__aside-column">
+        <slot name="aside" />
+      </div>
+
       <dl class="data-card__list">
         <slot>
           <div v-for="(item, idx) in data" :key="idx">
@@ -23,10 +27,6 @@ defineProps<Props>()
           </div>
         </slot>
       </dl>
-
-      <div v-if="$slots.aside" class="data-card__aside-column">
-        <slot name="aside" />
-      </div>
     </div>
 
     <div v-if="$slots.ctas" class="data-card__ctas">

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

@@ -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/u-hint.vue

@@ -9,7 +9,7 @@ interface Props {
   text?: string
 }
 
-const { type = 'neutral' } = defineProps<Props>()
+const { label = '', link = undefined, text = '', type = 'neutral' } = defineProps<Props>()
 </script>
 
 <template>

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/navigation-toolbar-link.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 @keyframes fade-in-label {
   0% {
@@ -83,6 +83,10 @@
 
   @include a.type(200, strong);
 
+  @include a.bp(lg) {
+    width: 100%;
+  }
+
   > * {
     flex: 0 0 auto;
   }
@@ -154,6 +158,10 @@
   width: var(--label-width);
   text-overflow: ellipsis;
   overflow: hidden;
+
+  @include a.bp(lg) {
+    width: calc(100% - 24px - 8px);
+  }
 }
 
 // Animation

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>
 

package/components/richtext/u-richtext.vue

@@ -5,7 +5,7 @@ interface Props {
   inverted?: boolean
 }
 
-const { small = false, inverted = false } = defineProps<Props>()
+const { text = '', small = false, inverted = false } = defineProps<Props>()
 
 const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': inverted }]
 </script>

package/components/table/cell-ctas.scss

@@ -3,4 +3,5 @@
 .cell-ctas {
   display: flex;
   column-gap: var(--e-space-4);
+  line-height: 0;
 }

package/components/table/u-cell-icon-group.vue

@@ -14,13 +14,21 @@ interface Props {
 }
 
 defineProps<Props>()
+
+const isColorKeyword = (str) => Object.values(TableCellIconColor).includes(str)
 </script>
 
 <template>
   <div class="cell-icon-group">
     <template v-for="(item, idx) in icons" :key="idx">
       <UTooltip :title="item.title">
-        <UIcon :name="item.icon" :class="[`icon-color-${item.color}`]"></UIcon>
+        <UIcon
+          :name="item.icon"
+          :class="{ [`icon-color-${item.color}`]: isColorKeyword(item.color) }"
+          :style="{
+            color: !isColorKeyword(item.color) ? item.color : false,
+          }"
+        ></UIcon>
       </UTooltip>
     </template>
   </div>

package/components/table/u-cell-progress-bar.vue

@@ -7,7 +7,7 @@ interface Props {
   labelPosition?: 'top' | 'right'
 }
 
-const { labelPosition = 'top' } = defineProps<Props>()
+const { label = '', labelPosition = 'top' } = defineProps<Props>()
 </script>
 
 <template>

package/components/table/u-table-cell.vue

@@ -10,6 +10,7 @@ interface Props extends TableCellBase {
 }
 
 const {
+  infoText = '',
   textStyle = TableCellTextStyle.normal,
   hAlign = TableCellHAlign.left,
   vAlign = TableCellVAlign.center,

package/components/table/u-table-heading.vue

@@ -6,17 +6,15 @@ interface Props {
   nowrap?: boolean
 }
 
-const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
+const { text = '', hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
 </script>
 
 <template>
   <div role="cell" :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]">
     <div :class="['cell-content', { nowrap }]">
-      <slot :text="text">{{ text }}</slot>
+      <slot>{{ text }}</slot>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './table-heading.scss';
-</style>
+<style scoped lang="scss" src="./table-heading.scss"></style>

package/components/tabs/u-tabs.vue

@@ -97,11 +97,17 @@ const positionActiveBar = () => {
     activeTabEl = tabs.value.find((item) => item.value === model.value)
   }
 
-  const activeTabRelPos = getOffsetParentPosition(activeTabEl)
+  try {
+    const activeTabRelPos = getOffsetParentPosition(activeTabEl)
 
-  activeBarStyles.value = {
-    width: `${activeTabEl.offsetWidth}px`,
-    left: `${activeTabRelPos.left + list.value.scrollLeft}px`,
+    activeBarStyles.value = {
+      width: `${activeTabEl.offsetWidth}px`,
+      left: `${activeTabRelPos.left + list.value.scrollLeft}px`,
+    }
+  } catch {
+    // This will sometimes fail during resizing. Not sure why it happens.
+    // Also when coverage-testing this will fail.
+    // We don't need to do anything here.
   }
 }