@energie360/ui-library 0.1.44 → 0.1.46

package/components/accordion-item/u-accordion-item.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import UCollapsible from '../collapsible/u-collapsible.vue'
+import { collapsibleHeadingLevel } from '../collapsible/u-collapsible.vue'
 import UIcon from '../../elements/icon/u-icon.vue'
 import URichtext from '../richtext/u-richtext.vue'
 import { useTemplateRef } from 'vue'
@@ -7,7 +8,7 @@ import { useTemplateRef } from 'vue'
 interface Props {
   header?: string
   panel?: string
-  level?: number
+  level?: collapsibleHeadingLevel
   inverted?: boolean
 }
 

package/components/card-amount-illustrated/u-card-amount-illustrated.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import UProgressBar from '../progress-bar/u-progress-bar.vue'
-import { useTemplateRef, inject, watch, ref, onMounted } from 'vue'
+import { useTemplateRef, inject, watch, ref, onMounted, TemplateRef } from 'vue'
 import { Image } from '../../elements/types'
 import { DotLottieVue, setWasmUrl } from '@lottiefiles/dotlottie-vue'
+import { DotLottieVueInstance } from '@lottiefiles/dotlottie-vue'
 import wasmUrl from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url'
 
 interface Props {
@@ -16,7 +17,7 @@ setWasmUrl(wasmUrl)
 
 const { lottieSrc, title = '', amount = -1 } = defineProps<Props>()
 defineEmits(['amount'])
-const { isHovering: cardIsHovering } = inject('card', {})
+const { isHovering: cardIsHovering } = inject('card', { isHovering: null })
 
 const lottiePlayerRef = useTemplateRef('player')
 let lottiePlayer = null
@@ -45,7 +46,7 @@ const onMouseleave = () => {
 }
 
 onMounted(() => {
-  lottiePlayer = lottiePlayerRef.value.getDotLottieInstance()
+  lottiePlayer = (lottiePlayerRef.value as DotLottieVueInstance).getDotLottieInstance()
 
   lottiePlayer.addEventListener('load', () => {
     lottieReady.value = true

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

@@ -24,22 +24,22 @@ const { cta = undefined } = defineProps<Props>()
 
 const emits = defineEmits(['change'])
 
-const { toggleActiveCard } = inject('card')
-const { currentValue } = inject('card-group', {})
+const { toggleActiveCard } = inject('card', { toggleActiveCard: null })
+const { currentValue } = inject('card-group', { currentValue: null })
 
 const onChange = () => {
   toggleActiveCard(true)
-  emits('change', cta.value)
+  emits('change', (cta as Radio).value)
 }
 
 if (currentValue) {
   watch(currentValue, (newV) => {
-    toggleActiveCard(newV === cta.value && !cta.disabled)
+    toggleActiveCard(newV === (cta as Radio).value && !(cta as Radio).disabled)
   })
 
   onMounted(() => {
     if (currentValue?.value) {
-      toggleActiveCard(currentValue.value === cta.value && !cta.disabled)
+      toggleActiveCard(currentValue.value === (cta as Radio).value && !(cta as Radio).disabled)
     }
   })
 }
@@ -48,9 +48,17 @@ if (currentValue) {
 <template>
   <div class="card-footer">
     <slot>
-      <UButton v-if="cta.href" variant="outlined" v-bind="cta" />
+      <UButton v-if="(cta as Link).href" variant="outlined" v-bind="cta as Link" />
 
-      <USelectChip v-else provide-key="card-group" v-bind="cta" @change="onChange" />
+      <USelectChip
+        v-else
+        provide-key="card-group"
+        :label="cta.label"
+        :name="(cta as Radio).name"
+        :value="(cta as Radio).value"
+        :disabled="(cta as Radio).disabled"
+        @change="onChange"
+      />
     </slot>
   </div>
 </template>

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

@@ -21,7 +21,7 @@ const onResize = debounceRaf(() => {
   }
 
   // Reset heights
-  headers.forEach((header) => {
+  headers.forEach((header: HTMLElement) => {
     header.style.height = ''
   })
 
@@ -31,12 +31,12 @@ const onResize = debounceRaf(() => {
   }
 
   // Get max height
-  const maxHeight = headers.reduce((acc, val) => {
+  const maxHeight = headers.reduce((acc, val: HTMLElement) => {
     return Math.max(acc, val.offsetHeight)
   }, 0)
 
   // Adjust heights
-  headers.forEach((header) => {
+  headers.forEach((header: HTMLElement) => {
     header.style.height = `${maxHeight}px`
   })
 })

package/components/card-section/card-section.scss

@@ -30,4 +30,9 @@
       padding: var(--e-space-4);
     }
   }
+
+  &:has(.richtext) {
+    // Force this font-size for richtext. (has effect on text without <p>)
+    @include a.type(200);
+  }
 }

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

@@ -25,7 +25,7 @@ const getCellDiscount = (cell: Cell): string => (cell.discount ? cell.text : '')
 
 <template>
   <div class="card-table-wrapper">
-    <div class="card-table-heading">
+    <div v-if="title || secondaryTitle" class="card-table-heading">
       <div v-if="title" class="card-table-heading__title">
         {{ title }}
       </div>

package/components/collapsible/u-collapsible.vue

@@ -2,10 +2,12 @@
 import { useId, computed, ref, inject, watch } from 'vue'
 import TransitionHeight from '../../helpers/transition-height.vue'
 
+export type collapsibleHeadingLevel = 2 | 3 | 4 | 5 | 6 | 'aaaa'
+
 interface Props {
   header?: string
   panel?: string
-  level?: 2 | 3 | 4 | 5 | 6
+  level?: collapsibleHeadingLevel
   expanded?: boolean
 }
 
@@ -20,7 +22,10 @@ const headerId = `collapsible-header-${cId}`
 const panelId = `collapsible-panel-${cId}`
 
 // This will only be available if there's a parent <UCollapsibelGroup>
-const { activeItem, updateActiveItem } = inject('activeItem', {})
+const { activeItem, updateActiveItem } = inject('activeItem', {
+  activeItem: null,
+  updateActiveItem: null,
+})
 
 const onToggle = () => {
   panelHidden.value = !panelHidden.value

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

@@ -38,7 +38,7 @@ const onClick = (e: Event) => {
 }
 
 const click = () => {
-  linkRef.value.click()
+  ;(linkRef.value as HTMLElement).click()
 }
 
 watch(

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

@@ -69,7 +69,7 @@ const handleFiles = (files: FileList) => {
   }
 
   const acceptedFiles = []
-  for (const file of files) {
+  for (const file of Array.from(files)) {
     if (
       accept.length === 0 ||
       (intersect(mimeTypes[file.type] || [], accept).length && file.size <= maxFileSize)
@@ -89,7 +89,7 @@ const handleFiles = (files: FileList) => {
   currentFiles.value.push(...acceptedFiles)
   maxFileCountError.value = false
 
-  input.value.files = arrayToFileList(currentFiles.value)
+  input.value.files = arrayToFileList(currentFiles.value as [])
 
   checkMaxFiles()
 }
@@ -137,7 +137,7 @@ const onRemoveFile = (filename: string, lastModified: number) => {
     (file) => file.name !== filename || file.lastModified !== lastModified,
   )
 
-  input.value.files = arrayToFileList(currentFiles.value)
+  input.value.files = arrayToFileList(currentFiles.value as [])
 
   checkMaxFiles()
 }

package/components/hint/hint.scss

@@ -21,6 +21,11 @@
 
   // override some richtext styles.
   .richtext {
+    // URichtext normally needs html-text, meaning the text is at least in a <p>-tag.
+    // Unfortunately hint will receive also plain text.
+    // That's why we haven the set font-size here too.
+    @include a.type(200);
+
     a {
       font-size: 100px;
       color: inherit;

package/components/hint/u-hint.vue

@@ -46,7 +46,7 @@ const iconMap = {
       </slot>
     </p>
 
-    <URichtext v-if="text || $slots.default" class="hint__richtext" small :text>
+    <URichtext v-if="text || hasSlotContent($slots.default)" class="hint__richtext" small :text>
       <slot></slot>
     </URichtext>
   </div>

package/components/icon-text-block/icon-text-block.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .icon-text-block {
   display: flex;
@@ -27,8 +27,9 @@
   }
 
   .illustration {
-    width: a.rem(56);
-    height: a.rem(56);
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
   }
 
   .content {

package/components/index.ts

@@ -0,0 +1,78 @@
+export { default as UAccordionItem } from './accordion-item/u-accordion-item.vue'
+
+// Cards
+export { default as UCard } from './card/u-card.vue'
+export { default as UCardFooter } from './card-footer/u-card-footer.vue'
+export { default as UCardGroup } from './card-group/u-card-group.vue'
+export { default as UCardHeader } from './card-header/u-card-header.vue'
+export { default as UCardHint } from './card-hint/u-card-hint.vue'
+export { default as UCardPrice } from './card-price/u-card-price.vue'
+export { default as UCardSection } from './card-section/u-card-section.vue'
+export { default as UCardTable } from './card-table/u-card-table.vue'
+export { default as UCardToggleSwitches } from './card-toggle-switches/u-card-toggle-switches.vue'
+export { default as UCardCtaHeader } from './card-cta-header/u-card-cta-header.vue'
+export { default as UCardCtaBar } from './card-cta-bar/u-card-cta-bar.vue'
+export { default as UCardContact } from './card-contact/u-card-contact.vue'
+export { default as UCardPriceList } from './card-price-list/u-card-price-list.vue'
+export { default as UCardAmountIllustrated } from './card-amount-illustrated/u-card-amount-illustrated.vue'
+export { default as UCardAmount } from './card-amount/u-card-amount.vue'
+
+// Collapsible
+export { default as UCollapsible } from './collapsible/u-collapsible.vue'
+export { default as UCollapsibleGroup } from './collapsible-group/u-collapsible-group.vue'
+
+export { default as UIconTextBlock } from './icon-text-block/u-icon-text-block.vue'
+export { default as UIconTextBlockGroup } from './icon-text-block-group/u-icon-text-block-group.vue'
+export { default as UInlineEdit } from './inline-edit/u-inline-edit.vue'
+export { default as ULanguageNav } from './language-nav/u-language-nav.vue'
+export { default as UPanel } from './panel/u-panel.vue'
+export { default as UProgressBar } from './progress-bar/u-progress-bar.vue'
+export { default as URichtext } from './richtext/u-richtext.vue'
+
+// Table
+export { default as UCellCtas } from './table/u-cell-ctas.vue'
+export { default as UCellIconGroup } from './table/u-cell-icon-group.vue'
+export { default as UCellIconText } from './table/u-cell-icon-text.vue'
+export { default as UCellProgressBar } from './table/u-cell-progress-bar.vue'
+export { default as UTableCell } from './table/u-table-cell.vue'
+export { default as UTableHeader } from './table/u-table-header.vue'
+export { default as UTableHeading } from './table/u-table-heading.vue'
+export { default as UTableRow } from './table/u-table-row.vue'
+export { default as UTable } from './table/u-table.vue'
+
+export { default as UTabs } from './tabs/u-tabs.vue'
+export { default as UTextBlock } from './text-block/u-text-block.vue'
+export { default as UTooltip } from './tooltip/u-tooltip.vue'
+export { default as UNavigationToolbarLink } from './navigation-toolbar-link/u-navigation-toolbar-link.vue'
+export { default as UContextMenu } from './context-menu/u-context-menu.vue'
+export { default as UContextMenuLink } from './context-menu-link/u-context-menu-link.vue'
+export { default as UContextMenuDivider } from './context-menu-divider/u-context-menu-divider.vue'
+export { default as UCircularProgress } from './circular-progress/u-circular-progress.vue'
+export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.vue'
+export { default as UWelcome } from './welcome/u-welcome.vue'
+export { default as UHint } from './hint/u-hint.vue'
+export { default as UNavigationPanelTile } from './navigation-panel-tile/u-navigation-panel-tile.vue'
+export { default as UCardInfo } from './card-info/u-card-info.vue'
+export { default as UFileUpload } from './file-upload/u-file-upload.vue'
+export { default as UBadge } from './badge/u-badge.vue'
+export { default as UDownloadListItem } from './download-list-item/u-download-list-item.vue'
+export { default as UDownloadList } from './download-list/u-download-list.vue'
+export { default as UDataCard } from './data-card/u-data-card.vue'
+export { default as UDataCardGroup } from './data-card-group/u-data-card-group.vue'
+export { default as USearchGroup } from './search-group/u-search-group.vue'
+export { default as USkeletonLoader } from './skeleton-loader/u-skeleton-loader.vue'
+export { default as UCardHighlight } from './card-highlight/u-card-highlight.vue'
+export { default as URating } from './rating/u-rating.vue'
+export { default as UChip } from './chip/u-chip.vue'
+export { default as USlider } from './slider/u-slider.vue'
+export { default as USpriteAnimation } from './sprite-animation/u-sprite-animation.vue'
+export { default as USliderProgressAnimation } from './slider-progress-animation/u-slider-progress-animation.vue'
+export { default as UStickyCta } from './sticky-cta/u-sticky-cta.vue'
+export { default as UNotificationItem } from './notification-item/u-notification-item.vue'
+export { default as UNotificationList } from './notification-list/u-notification-list.vue'
+export { default as UDefinitionList } from './definition-list/u-definition-list.vue'
+export { default as UDefinitionListItem } from './definition-list-item/u-definition-list-item.vue'
+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'

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

@@ -19,7 +19,7 @@ const headingId = `heading-${editId}`
 const panelId = `panel-${editId}`
 const expanded = ref(false)
 const disabled = ref(false)
-const { update, activeEdit } = inject('inline-edit-group', {})
+const { update, activeEdit } = inject('inline-edit-group', { update: null, activeEdit: null })
 
 const onEditToggle = () => {
   expanded.value = !expanded.value

package/components/navigation-panel-tile/navigation-panel-tile.scss

@@ -66,6 +66,13 @@
   @include a.type(200, strong);
 
   transition: color a.$trs-ease-out;
+
+  @include a.bp(lg) {
+    width: a.rem(192);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .navigation-panel-tile__icon-wrapper {

package/components/slider/u-slider.vue

@@ -31,7 +31,7 @@ const {
 } = defineProps<Slider>()
 
 const model = defineModel<number>()
-const emits = defineEmits(['change'])
+const emits = defineEmits(['change', 'release'])
 const id = useId()
 const isSliding = ref(false)
 const isTouch = ref(false)
@@ -62,7 +62,7 @@ watch(model, () => {
 })
 
 const onPointerdown = (e: PointerEvent) => {
-  if (e.target.closest('.slider__dot')) {
+  if ((e.target as HTMLElement).closest('.slider__dot')) {
     return
   }
 
@@ -111,6 +111,8 @@ const onPointerup = () => {
 
   controlEl.value.removeEventListener('pointermove', onPointermove)
   document.removeEventListener('pointerup', onPointerup)
+
+  emits('release', model.value)
 }
 </script>
 

package/components/slider-progress-animation/u-slider-progress-animation.vue

@@ -3,7 +3,7 @@ import { onMounted, ref, useTemplateRef } from 'vue'
 import USlider from '../slider/u-slider.vue'
 import { Slider } from '../slider/u-slider.vue'
 import { Image } from '../../elements/types'
-import { DotLottieVue, setWasmUrl } from '@lottiefiles/dotlottie-vue'
+import { DotLottieVue, DotLottieVueInstance, setWasmUrl } from '@lottiefiles/dotlottie-vue'
 import wasmUrl from '@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url'
 
 interface Props {
@@ -22,24 +22,28 @@ let lottie = null
 const lottieReady = ref(false)
 
 const onChange = (value) => {
-  lottie.setFrame(value)
+  console.log(value)
+  lottie.setFrame(Math.max(0, value - 1))
 }
 
 onMounted(() => {
-  lottie = lottiePlayerRef.value.getDotLottieInstance()
+  lottie = (lottiePlayerRef.value as DotLottieVueInstance).getDotLottieInstance()
 
   lottie.addEventListener('load', () => {
     lottieReady.value = true
 
-    // Set initial state of animation
-    lottie.setSegment(0, model.value)
+    // Don't play animation at all when initial value is 0.
+    if (model.value > 0) {
+      // Set initial state of animation
+      lottie.setSegment(0, model.value)
 
-    lottie.addEventListener('complete', () => {
-      // Reset segment
-      lottie.setSegment(0, 100)
-    })
+      lottie.addEventListener('complete', () => {
+        // Reset segment
+        lottie.setSegment(0, 100)
+      })
 
-    lottie.play()
+      lottie.play()
+    }
   })
 
   lottie.addEventListener('ready', () => {

package/components/table/table-cell.mixins.scss

@@ -3,7 +3,7 @@
 @mixin table-cell-base {
   display: table-cell;
   padding: var(--e-space-4);
-  min-height: a.rem(56);
+  height: a.rem(56);
   line-height: 0;
 
   @include a.bp(m) {
@@ -21,7 +21,7 @@
 
     display: inline-flex;
     column-gap: var(--e-space-2);
-    min-height: a.rem(24);
+    min-height: a.rem(22);
   }
 
   // Horizontal align options

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

@@ -38,6 +38,4 @@ const {
   </div>
 </template>
 
-<style scoped lang="scss">
-@use './table-cell.scss';
-</style>
+<style scoped lang="scss" src="./table-cell.scss"></style>

package/components/welcome/u-welcome.vue

@@ -80,7 +80,7 @@ const onSpriteReady = () => {
           transform: mouseRightSide ? 'scaleX(1)' : 'scaleX(-1)',
         }"
         :spritesheet-path="butterflySprite"
-        :frame-positions="butterflySpritePositions"
+        :frame-positions="butterflySpritePositions as [number, number][]"
         :frame-width="202"
         :frame-height="300"
         :width="32"