@energie360/ui-library 0.1.21 → 0.1.22

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/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 {

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

@@ -1,25 +1,36 @@
 <script setup lang="ts">
-// import { Image } from '../../elements/types'
+import { Image } from '../../elements/types'
 
 interface Props {
   text?: string
-  //   image: Image
+  image?: Image
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <div class="welcome-container">
-    <div class="welcome-content">
-      <slot>
-        <h2 v-if="text">{{ text }}</h2>
+  <div class="welcome">
+    <div class="welcome__content">
+      <h2>
+        <slot>{{ text }}</slot>
+      </h2>
+    </div>
+
+    <div v-if="$slots.image || image" class="welcome__image" aria-hidden="true">
+      <slot name="image">
+        <img :src="image.src" :alt="image.alt" />
       </slot>
     </div>
-    <!-- TODO: Add image whenever is ready -->
-    <!-- <div class="welcome-image">
-        <img src="path/to/image.jpg" alt="Welcome Image" />
-    </div> -->
   </div>
 </template>
 
 <style scoped lang="scss" src="./welcome.scss"></style>
+<style scoped lang="scss">
+.welcome__image {
+  :slotted(img) {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+</style>

package/components/welcome/welcome.scss

@@ -1,25 +1,48 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
-.welcome-container {
+.welcome {
   @include a.type(500, strong);
 
-  background-color: var(--e-c-primary-01-100);
-  border-radius: var(--e-brd-radius-2);
-  color: var(--e-c-primary-01-950);
+  position: relative;
+  height: a.rem(94);
   display: flex;
-  justify-content: space-between;
-  padding: var(--e-space-8) var(--e-space-6);
+  align-items: center;
+  padding: 0 var(--e-space-6);
+  background-color: var(--e-c-primary-01-50);
+  border: 1px solid var(--e-c-primary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  color: var(--e-c-secondary-01-950);
+  overflow: hidden;
 
-  @include a.bp(m) {
+  @include a.bp(lg) {
+    min-height: a.rem(86);
+    height: auto;
     padding: var(--e-space-3) var(--e-space-4);
   }
 }
 
-// .welcome-content {
+.welcome__content {
+  max-width: calc(100% - #{a.rem(340)});
+
+  @include a.bp(lg) {
+    max-width: calc(100% - #{a.rem(80)});
+  }
+}
 
-// }
+.welcome__image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  aspect-ratio: 10/3;
 
-// TODO: Add styles for the welcome image whenever is ready
-// .welcome-image {
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 
-// }
+  @include a.bp(lg) {
+    display: none;
+  }
+}

package/elements/button/_button-plain.scss

@@ -6,16 +6,14 @@
   text-decoration: none;
   grid-gap: var(--e-space-1);
 
-  .icon,
-  e-icon {
+  .icon {
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
   &:hover {
     color: var(--e-c-secondary-01-900);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-secondary-01-900);
     }
   }
@@ -23,8 +21,7 @@
   &:active {
     color: var(--e-c-secondary-01-700);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-secondary-01-700);
     }
   }
@@ -34,15 +31,15 @@
     background: none;
     color: var(--e-c-mono-500);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-mono-500);
     }
   }
 
   &.loading {
-    .loader,
-    e-loader {
+    pointer-events: none;
+
+    .loader {
       --dot-color: var(--e-c-secondary-01-700);
     }
   }

package/elements/button/u-button.vue

@@ -93,6 +93,4 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
   </template>
 </template>
 
-<style lang="scss" scoped>
-@use './button.scss';
-</style>
+<style lang="scss" scoped src="./button.scss"></style>

package/elements/text-field/u-text-field.vue

@@ -29,16 +29,17 @@ const {
 const slots = useSlots()
 const model = defineModel<string>()
 const emits = defineEmits<{
-  input: [value: string | null]
+  input: [value: string | null] // TODO: Could be obsolete because we get value via model.
   focus: [target: FocusEvent['target']]
   focusout: [target: FocusEvent['target']]
 }>()
 
+// TODO: Do we need a ref to input? Value is currently written/read via model.
 const input = useTemplateRef('input')
 
 const isFocused = ref(false)
 const isHovering = ref(false)
-const hasValue = ref(false) // only needed for input type 'search'
+const hasValue = ref(!!model.value)
 const forceFloatLabel = ref(type === TextFieldTypes.date) // input-type 'date' doesn't support placeholder.
 
 const spacer = '.&nbsp;'
@@ -60,7 +61,6 @@ const onBlur = () => {
 }
 
 const onInput = () => {
-  hasValue.value = !!input.value && input.value.value !== ''
   emits('input', input.value?.value ?? null)
 }
 
@@ -111,6 +111,10 @@ watch(
     }
   },
 )
+
+watch(model, () => {
+  hasValue.value = !!model.value
+})
 </script>
 
 <template>

package/modules/dialog/u-dialog.vue

@@ -12,10 +12,12 @@ interface Props {
   contentImage?: Image
   closeBtnLabel?: string
   autoHeight?: boolean
+  modal?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
 const {
+  modal = false,
   title = '',
   text = '',
   headerImage = undefined,
@@ -59,10 +61,12 @@ watch(visible, (newV) => {
       allowArrowLeftRight: true,
     })
 
-    requestAnimationFrame(() => {
-      window.addEventListener('keydown', onKeydown)
-      document.addEventListener('click', onDocumentClick)
-    })
+    if (!modal) {
+      requestAnimationFrame(() => {
+        window.addEventListener('keydown', onKeydown)
+        document.addEventListener('click', onDocumentClick)
+      })
+    }
   } else {
     focusTrapInstance.release()
 

package/modules/index.js

@@ -5,8 +5,7 @@ export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-nav
 export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'
 export { default as UNavigationPanel } from './navigation-panel/u-navigation-panel.vue'
 export { default as UProgressIndicator } from './progress-indicator/u-progress-indicator.vue'
-export { default as UToast } from './toast/u-toast.vue'
-export { toast } from './toast/useToast.ts'
+export { default as UToast, toast } from './toast/u-toast.vue'
 export { default as UDialog } from './dialog/u-dialog.vue'
 export { default as USearchFilter } from './search-filter/u-search-filter.vue'
 export { default as UContentTitle } from './content-title/u-content-title.vue'

package/modules/navigation-panel/navigation-panel.scss

@@ -61,5 +61,16 @@
     @include a.type(200, strong);
 
     margin-bottom: var(--e-space-4);
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+
+    // This is a bit experimental.
+    // Because we accept here an HTML string, which can contain <div> or <p>, we'll 'ignore' these tags.
+    // This way the text-overflow: ellipsis works as intended.
+    * {
+      display: contents;
+    }
   }
 }

package/modules/toast/u-toast.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+import { toast } from './useToast'
+
+export { toast }
+</script>
+
 <script setup lang="ts">
 import UToastMessage from './u-toast-message.vue'
 import { toasts } from './useToast'

package/package.json

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