@energie360/ui-library 0.1.40 → 0.1.42

package/components/card-contact/card-contact.scss

@@ -42,4 +42,8 @@
   @include a.bp(m) {
     display: none;
   }
+
+  > img {
+    width: 100%;
+  }
 }

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

@@ -47,3 +47,10 @@ defineSlots<{
 </template>
 
 <style scoped lang="scss" src="./card-contact.scss"></style>
+<style scoped lang="scss">
+.card-contact__image {
+  :slotted(img) {
+    width: 100%;
+  }
+}
+</style>

package/components/card-info/card-info.scss

@@ -19,6 +19,10 @@
   + .card-info__title {
     margin-top: var(--e-space-4);
   }
+
+  > img {
+    width: 100%;
+  }
 }
 
 .card-info__title {

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Image } from '../../elements/types'
+import { hasSlotContent } from '../../utils/vue/helpers'
 
 interface Props {
   image?: Image
@@ -12,7 +13,7 @@ defineProps<Props>()
 
 <template>
   <section class="card-info">
-    <div class="card-info__image">
+    <div v-if="hasSlotContent($slots.image) || image" class="card-info__image">
       <slot name="image">
         <img v-bind="image" />
       </slot>
@@ -33,3 +34,10 @@ defineProps<Props>()
 </template>
 
 <style scoped lang="scss" src="./card-info.scss"></style>
+<style scoped lang="scss">
+.card-info__image {
+  :slotted(img) {
+    width: 100%;
+  }
+}
+</style>

package/components/empty/empty.scss

@@ -9,8 +9,9 @@
   width: a.rem(120);
   height: a.rem(120);
 
-  > img {
-    object-fit: cover;
+  > img,
+  ::slotted(img) {
+    object-fit: contain;
     width: 100%;
     height: 100%;
   }

package/components/empty/u-empty.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import { hasSlotContent } from '../../utils/vue/helpers'
+import { Image } from '../../elements/types'
 
 interface Props {
   title?: string
   text?: string
+  image?: Image
 }
 
-defineProps<Props>()
+const { image = { src: '/static/ui-assets/images/search.svg', alt: '' } } = defineProps<Props>()
 </script>
 
 <template>
   <div class="empty">
-    <div class="empty__image">
+    <div v-if="hasSlotContent($slots.image) || image" class="empty__image">
       <slot name="image">
-        <img src="/static/ui-assets/images/search.svg" alt="" />
+        <img v-bind="image" />
       </slot>
     </div>
 
@@ -30,3 +32,12 @@ defineProps<Props>()
 </template>
 
 <style scoped lang="scss" src="./empty.scss"></style>
+<style scoped lang="scss">
+.empty__image {
+  :slotted(img) {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -60,13 +60,25 @@ if (activeEdit) {
 
 const collapse = () => {
   expanded.value = false
+  emit('collapsed')
 
   if (update) {
     update('')
   }
 }
 
-defineExpose({ collapse })
+const expand = () => {
+  expanded.value = true
+  emit('expanded')
+
+  update && update(editId)
+
+  setTimeout(() => {
+    rootEl.value.scrollIntoView()
+  }, 80)
+}
+
+defineExpose({ collapse, expand })
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-panel-tile {
   display: flex;
@@ -26,6 +26,12 @@
     border-color: var(--e-c-mono-200);
   }
 
+  &.greyed {
+    .navigation-panel-tile__icon-wrapper {
+      color: var(--e-c-mono-500);
+    }
+  }
+
   &.disabled {
     pointer-events: none;
     border-color: var(--e-c-mono-200);

package/components/notification-list/notification-list.scss

@@ -7,9 +7,9 @@
     // This vertical centered style only works in the portal-main layout.
     // It's not really possible to do this "correctly" at the moment, because `portal-main__content` is `display: block`.
     // With `display: flex` it would work, but this would need some refactoring.
-    position: relative;
-    top: 50%;
-    transform: translateY(-100%);
+    // position: relative;
+    // top: 50%;
+    // transform: translateY(-100%);
   }
 }
 

package/layout/portal-content-aside/portal-content-aside.scss

@@ -3,7 +3,18 @@
 .portal-content-aside-container {
   container-type: inline-size;
 
-  @container (width <= 1020px) {
+  @container (width <= 880px) {
+    .portal-content-aside {
+      row-gap: var(--e-space-6);
+      column-gap: var(--e-space-8);
+    }
+
+    .portal-content-aside {
+      grid-template-columns: auto a.rem(280);
+    }
+  }
+
+  @container (width <= 700px) {
     .portal-content-aside {
       display: flex;
       flex-direction: column;
@@ -16,14 +27,8 @@
   display: grid;
   grid-template-columns: auto a.rem(320);
   grid-template-rows: repeat(2, auto);
-  grid-column-gap: var(--e-space-24);
-  grid-row-gap: var(--e-space-12);
-
-  // @include a.bp(lg) {
-  //   display: flex;
-  //   flex-direction: column;
-  //   row-gap: var(--e-space-6);
-  // }
+  column-gap: var(--e-space-24);
+  row-gap: var(--e-space-12);
 }
 
 .portal-content-aside__main {

package/layout/portal-main/u-portal-main.vue

@@ -37,9 +37,13 @@ const portalFooterSlot = inject('portal-footer-slot')
 <style scoped lang="scss" src="./portal-main.scss"></style>
 
 <style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
 .portal-main__sub-navigation {
   :slotted(.tabs) {
-    --tabs-gradient-color: var(--e-c-mono-50);
+    @include a.bp(lg) {
+      --tabs-gradient-color: var(--e-c-mono-50);
+    }
   }
 }
 </style>

package/modules/toast/toast-message.scss

@@ -36,7 +36,7 @@
     }
 
     .toast-message__inner {
-      background-color: var(--e-c-signal-01-700);
+      background-color: var(--e-c-signal-01-900);
     }
   }
 
@@ -46,7 +46,7 @@
     }
 
     .toast-message__inner {
-      background-color: var(--e-c-signal-03-700);
+      background-color: var(--e-c-signal-03-900);
     }
   }
 

package/modules/toast/toast.scss

@@ -3,12 +3,14 @@
 .toast {
   z-index: a.$layer-message;
   position: fixed;
-  bottom: var(--e-space-6);
-  left: 0;
+  bottom: var(--toast-offset-bottom);
+  padding-left: var(--toast-margin-left);
+  padding-right: var(--toast-margin-left);
+  left: var(--toast-offset-left);
   display: flex;
   flex-direction: column-reverse;
-  align-items: center;
-  width: 100%;
-  grid-gap: var(--e-space-4);
+  align-items: var(--toast-align);
+  width: calc(100% - var(--toast-offset-left));
+  gap: var(--e-space-4);
   pointer-events: none;
 }

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

@@ -22,23 +22,21 @@ const close = () => dismiss(id)
 
 <template>
   <div :class="['toast-message', type, { 'fade-in': fadeIn }]">
-    <div class="container">
-      <div class="toast-message__inner">
-        <div class="toast-message__icon">
-          <UIcon :name="MessageType[type]"></UIcon>
-        </div>
-        <div ref="message" class="toast-message__message">
-          {{ message }}
-        </div>
-        <button
-          class="toast-message__close-button"
-          type="button"
-          aria-label="Close message"
-          @click="close"
-        >
-          <UIcon name="close"></UIcon>
-        </button>
+    <div class="toast-message__inner">
+      <div class="toast-message__icon">
+        <UIcon :name="MessageType[type]"></UIcon>
       </div>
+      <div ref="message" class="toast-message__message">
+        {{ message }}
+      </div>
+      <button
+        class="toast-message__close-button"
+        type="button"
+        aria-label="Close message"
+        @click="close"
+      >
+        <UIcon name="close"></UIcon>
+      </button>
     </div>
   </div>
 </template>

package/modules/toast/u-toast.vue

@@ -30,3 +30,18 @@ import { toasts } from './useToast'
 </style>
 
 <style scoped lang="scss" src="./toast.scss"></style>
+<style lang="scss">
+:root {
+  // Values
+  --toast-align-center: center;
+  --toast-align-left: flex-start;
+  --toast-align-right: flex-end;
+
+  // Default Settings
+  --toast-align: var(--toast-align-center);
+  --toast-margin-left: var(--e-space-5);
+  --toast-margin-right: var(--e-space-5);
+  --toast-offset-left: 0px;
+  --toast-offset-bottom: var(--e-space-6);
+}
+</style>

package/package.json

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