@energie360/ui-library 0.1.27 → 0.1.29

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

@@ -26,7 +26,7 @@ defineProps<Props>()
 
         <span class="card-price-list__info">
           <UTooltip v-if="item.info" :title="item.info">
-            <UIcon name="info-circle"></UIcon>
+            <UIcon name="info-circle-filled"></UIcon>
           </UTooltip>
         </span>
       </dd>

package/components/definition-list/definition-list.scss

@@ -0,0 +1,5 @@
+.definition-list {
+  display: table;
+  border-collapse: collapse;
+  border-spacing: 0;
+}

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

@@ -0,0 +1,7 @@
+<template>
+  <dd class="definition-list">
+    <slot />
+  </dd>
+</template>
+
+<style scoped lang="scss" src="./definition-list.scss"></style>

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

@@ -0,0 +1,79 @@
+@use '../../base/abstracts' as a;
+
+.definition-list-item {
+  @include a.type(300);
+
+  display: table-row;
+
+  dt,
+  dd {
+    display: table-cell;
+    padding-bottom: var(--e-space-6);
+  }
+
+  dt {
+    @include a.type(300, strong);
+
+    padding-right: var(--e-space-10);
+    min-width: calc(220px + var(--e-space-10));
+  }
+
+  &:last-child {
+    dt,
+    dd {
+      padding-bottom: 0;
+    }
+  }
+
+  // Variants
+  &.small {
+    @include a.type(100);
+
+    dt,
+    dd {
+      padding-bottom: var(--e-space-4);
+    }
+
+    dt {
+      @include a.type(100, strong);
+    }
+  }
+
+  &.compact {
+    dt,
+    dd {
+      padding-bottom: var(--e-space-1);
+    }
+  }
+}
+
+@include a.bp(lg) {
+  .definition-list-item,
+  .definition-list-item.small {
+    @include a.type(200);
+
+    display: block;
+    padding-bottom: var(--e-space-6);
+
+    dt,
+    dd {
+      display: block;
+      padding-bottom: 0;
+    }
+
+    dt {
+      @include a.type(200, strong);
+
+      padding-bottom: var(--e-space-2);
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      dt,
+      dd {
+        padding-bottom: var(--e-space-2);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+interface Props {
+  name?: string
+  value?: string
+  variant?: 'normal' | 'small'
+  compact?: boolean
+}
+
+const { name = '', value = '', variant = 'normal' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['definition-list-item', variant, { compact }]">
+    <dt>
+      <slot name="name">{{ name }}</slot>
+    </dt>
+
+    <dd>
+      <slot name="value">{{ value }}</slot>
+    </dd>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./definition-list-item.scss"></style>
+
+<style lang="scss">
+@use '../../elements/text-link/text-link' as t;
+@use '../../base/abstracts' as a;
+
+dd {
+  a {
+    @include t.text-link;
+
+    @include a.type(300);
+  }
+}
+
+.small {
+  dd {
+    a {
+      @include a.type(100);
+    }
+  }
+}
+
+@include a.bp(lg) {
+  dd a {
+    @include a.type(200);
+  }
+
+  .small {
+    dd a {
+      @include a.type(200);
+    }
+  }
+}
+</style>

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

@@ -15,7 +15,7 @@ interface Props {
 const {
   visited,
   url = '',
-  data,
+  data = [],
   compact = false,
   headings = inject('headings', []),
 } = defineProps<Props>()
@@ -77,7 +77,7 @@ defineExpose({ click })
       >
       </component>
       <div class="download-list-item__icon-wrapper">
-        <UIcon name="mini-check" class="download-list-item__check" />
+        <UIcon name="check" class="download-list-item__check" />
 
         <svg
           class="download-list-item__download"

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

@@ -212,7 +212,7 @@ const onRemoveError = (filename: string, lastModified: number) => {
     </div>
 
     <div v-if="maxFileCountError" class="file-upload__max-files-error">
-      <UIcon name="report" /> {{ getTranslation('maxFileCountAllowed', { $COUNT: 4 }) }}
+      <UIcon name="alert-octagon" /> {{ getTranslation('maxFileCountAllowed', { $COUNT: 4 }) }}
     </div>
   </div>
 </template>

package/components/index.js

@@ -70,3 +70,5 @@ export { default as USliderProgressAnimation } from './slider-progress-animation
 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'

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref, watch, computed, useTemplateRef } from 'vue'
 import { UIcon } from '../../elements'
+import { UBadge } from '../../components'
+import { Badge } from '../badge/u-badge.vue'
 
 // TODO: Label animation when collapsed is a mess. Refactor it as soon as possbile!
 
 interface Props {
   label?: string
   icon: string
+  badge?: Badge
   href?: string
   target?: string
   active?: boolean
@@ -16,6 +19,7 @@ interface Props {
 
 const {
   label = '',
+  badge = undefined,
   active = false,
   collapsed = false,
   labelHidden = false,
@@ -99,7 +103,11 @@ const tag = computed(() => {
     @mouseenter="onHover"
     @mouseleave="onHoverOut"
   >
-    <UIcon :name="icon" />
+    <UBadge v-if="badge" v-bind="badge">
+      <UIcon :name="icon" />
+    </UBadge>
+    <UIcon v-else :name="icon" />
+
     <span ref="label" class="navigation-toolbar-link__label" :title="label">
       <slot>{{ label }}</slot>
     </span>

package/components/rating/u-rating.vue

@@ -47,7 +47,7 @@ const onDislike = () => {
 <template>
   <div class="rating">
     <button :class="['rating__button', 'up', { active: likeActive }]" type="button" @click="onLike">
-      <UIcon :name="likeActive ? 'thumbs-up-active' : 'thumbs-up'" />
+      <UIcon :name="likeActive ? 'thumbs-up-filled' : 'thumbs-up'" />
 
       <span class="visually-hidden">
         {{ likeText || getTranslation('like') }}
@@ -63,7 +63,7 @@ const onDislike = () => {
       type="button"
       @click="onDislike"
     >
-      <UIcon :name="dislikeActive ? 'thumbs-down-active' : 'thumbs-down'" />
+      <UIcon :name="dislikeActive ? 'thumbs-down-filled' : 'thumbs-down'" />
 
       <span class="visually-hidden">
         {{ dislikeText || getTranslation('dislike') }}

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

@@ -29,7 +29,7 @@ const {
 
     <div v-if="infoText" class="info-tooltip">
       <UTooltip :title="infoText">
-        <UIcon name="info"></UIcon>
+        <UIcon name="info-circle-filled"></UIcon>
       </UTooltip>
     </div>
   </div>

package/elements/numeric-stepper/u-numeric-stepper.vue

@@ -132,7 +132,7 @@ onMounted(() => {
       @click="onStepDown"
     >
       <span class="visually-hidden">{{ getTranslation('decreaseValue') }}</span>
-      <UIcon name="remove"></UIcon>
+      <UIcon name="minus"></UIcon>
     </button>
 
     <button
@@ -144,7 +144,7 @@ onMounted(() => {
       @click="onStepUp"
     >
       <span class="visually-hidden">{{ getTranslation('increaseValue') }}</span>
-      <UIcon name="add"></UIcon>
+      <UIcon name="plus"></UIcon>
     </button>
   </div>
 

package/elements/select-chip/u-select-chip.vue

@@ -31,7 +31,7 @@ const { onChange } = useRadio({ model, provideKey })
         { filled: model === value && !disabled, outlined: model !== value || disabled, disabled },
       ]"
     >
-      <UIcon v-if="model === value" name="mini-check" />
+      <UIcon v-if="model === value" name="check" />
       <slot name="label">
         {{ label }}
       </slot>

package/elements/select-chips/select-chips.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .select-chips {
   &.error {

package/elements/select-tile/select-tile.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 $transition-options: var(--e-trs-duration-faster) var(--e-trs-easing-default);
 $trs-pressed: var(--e-trs-duration-fastest) cubic-bezier(0.34, 1.56, 0.64, 1); // https://easings.net/#easeOutBack

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

@@ -50,4 +50,4 @@ const { onChange } = useRadio({ model, provideKey })
   </label>
 </template>
 
-<style scoped style="scss" src="./select-tile.scss"></style>
+<style scoped lang="scss" src="./select-tile.scss"></style>

package/elements/toggle-switch/u-toggle-switch.vue

@@ -26,7 +26,7 @@ const model = defineModel<boolean>({ default: false })
 
 const iconsMap = {
   small: ['close-small', 'check-small'],
-  big: ['close', 'mini-check'],
+  big: ['close', 'check'],
 }
 
 const uncheckIcon = computed(() => iconsMap[variant][0])

package/modules/content-title/content-title.scss

@@ -27,6 +27,10 @@
   @include a.type(500, strong);
 
   min-width: max-content;
+
+  @include a.bp(xl) {
+    min-width: auto;
+  }
 }
 
 .content-title__text {

package/modules/search-filter/search-filter.scss

@@ -97,6 +97,17 @@
     }
   }
 
+  &.no-search {
+    display: flex;
+    width: 100%;
+
+    .search-filter__filter {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+  }
+
   @include mobile-filters;
 }
 

package/modules/search-filter/u-search-filter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useTemplateRef, onMounted } from 'vue'
+import { ref, useTemplateRef, onMounted, useSlots } from 'vue'
 import { UIconButton } from '../../elements'
 import { UBadge } from '../../components'
 
@@ -9,12 +9,16 @@ interface Props {
 
 defineProps<Props>()
 
+const slots = useSlots()
 const showFilters = ref(false)
 const filtersEl = useTemplateRef('filters')
 const filterCount = ref(0)
+const noSearch = ref(false)
 
 onMounted(() => {
   filterCount.value = filtersEl.value.children.length
+  noSearch.value = !slots.search
+  showFilters.value = noSearch.value === true
 })
 </script>
 
@@ -22,13 +26,17 @@ onMounted(() => {
   <div
     :class="[
       'search-filter',
-      { 'show-filters': showFilters, 'collapsed-desktop': filterCount + 1 >= 4 },
+      {
+        'show-filters': showFilters,
+        'collapsed-desktop': filterCount + 1 >= 4,
+        'no-search': noSearch,
+      },
     ]"
     :style="{
       '--field-count': filterCount + 1,
     }"
   >
-    <div class="search-filter__search">
+    <div v-if="!noSearch" class="search-filter__search">
       <slot name="search" />
 
       <div class="search-filter__filter-toggle">
@@ -52,3 +60,17 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss" src="./search-filter.scss"></style>
+
+<style lang="scss">
+@use '../../base/abstracts' as a;
+
+@include a.bp(m) {
+  .no-search {
+    .search-filter__filter {
+      .button {
+        width: fit-content;
+      }
+    }
+  }
+}
+</style>

package/modules/toast/u-toast-message.vue

@@ -13,7 +13,7 @@ const { id } = defineProps<Props>()
 
 enum MessageType {
   success = 'check-circle',
-  error = 'report',
+  error = 'alert-octagon',
 }
 
 const fadeIn = ref(false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "",
   "type": "module",
   "main": "dist/index.js",