@energie360/ui-library 0.1.40 → 0.1.41

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/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/package.json

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