@energie360/ui-library 0.1.42 → 0.1.44

package/components/card-amount-illustrated/card-amount-illustrated.scss

@@ -26,7 +26,7 @@
   top: 0;
   right: 0;
   aspect-ratio: 5/2;
-  width: 85px;
+  width: 76px;
   z-index: 1;
 }
 

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

@@ -55,4 +55,13 @@ if (currentValue) {
   </div>
 </template>
 
-<style lang="scss" src="./card-footer.scss"></style>
+<style scoped lang="scss" src="./card-footer.scss"></style>
+<style scoped lang="scss">
+.card-footer {
+  :slotted(a),
+  :slotted(button),
+  :slotted(.button) {
+    width: 100%;
+  }
+}
+</style>

package/components/card-group/card-group.scss

@@ -23,6 +23,28 @@
     }
   }
 
+  &.columns-2 {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+
+    @include a.bp(m) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+
+  &.columns-3 {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+
+    @include a.bp(xl) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include a.bp(m) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+
   &.columns-4 {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr;

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

@@ -50,9 +50,11 @@ defineProps<Props>()
       </div>
     </div>
 
-    <div v-if="image || $slots.image" class="image-col">
+    <div v-if="hasSlotContent($slots.image) || image" class="image-col">
       <div class="image-background">
-        <slot name="image"><img v-if="image" :src="image.src" :alt="image.alt" /></slot>
+        <slot name="image">
+          <img :src="image.src" :alt="image.alt" />
+        </slot>
       </div>
     </div>
 

package/components/card-price/card-price.scss

@@ -18,7 +18,7 @@ $image-width-small: 100px;
   }
 
   .card-price__subtext {
-    color: var(--e-c-mono-500);
+    color: var(--e-c-mono-700);
 
     @include a.type(200);
   }

package/components/hint/u-hint.vue

@@ -39,9 +39,11 @@ const iconMap = {
         <slot name="label">{{ label }}</slot>
       </span>
 
-      <a v-if="link" :href="link.href" :target="link.target" class="hint__link">
-        {{ link.label }}
-      </a>
+      <slot v-if="hasSlotContent($slots.link) || link" name="link">
+        <a :href="link.href" :target="link.target" class="hint__link">
+          {{ link.label }}
+        </a>
+      </slot>
     </p>
 
     <URichtext v-if="text || $slots.default" class="hint__richtext" small :text>
@@ -51,6 +53,66 @@ const iconMap = {
 </template>
 
 <style scoped lang="scss" src="./hint.scss"></style>
+<style scoped lang="scss">
+@use '../../elements/text-link/text-link.scss' as t;
+@use '../../base/abstracts' as a;
+
+.hint__label {
+  :slotted(a) {
+    @include t.text-link;
+
+    display: inline-block;
+    color: inherit;
+    margin-left: var(--e-space-2);
+
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-05-200);
+    }
+
+    @include a.bp(lg) {
+      display: block;
+      margin-left: 0;
+    }
+  }
+}
+
+.hint.hint--warning .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-02-100);
+    }
+  }
+}
+
+.hint.hint--legal .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-mono-100);
+    }
+  }
+}
+
+.hint.hint--error .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+}
+
+.hint.hint--task .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+}
+</style>
 
 <style lang="scss">
 .hint__richtext {

package/components/portal-logo/u-portal-logo.vue

@@ -16,7 +16,7 @@ const {
     alt: 'Logo Energie 360°',
   },
   logoMinifiedImage = {
-    src: '/static/ui-assets/images/logo-mini.svg',
+    src: '/static/ui-assets/images/logo-short-inverted.svg',
     alt: 'Logo Energie 360°',
   },
 } = defineProps<Props>()

package/elements/button/_button-filled-inverted.scss

@@ -12,7 +12,7 @@
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-primary-01-100);
     border-color: var(--e-c-primary-01-100);
     color: var(--e-c-secondary-01-700);

package/elements/button/_button-filled.scss

@@ -13,7 +13,7 @@
     --dot-color: var(--e-c-mono-00);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-secondary-01-900);
     border-color: var(--e-c-secondary-01-900);
   }

package/elements/button/_button-outlined-inverted.scss

@@ -13,8 +13,8 @@
     --dot-color: var(--e-c-mono-00);
   }
 
-  &:hover {
-    background-color: rgba(var(--e-c-primary-01-900-rgb), 0.7);
+  &:hover:not(.no-hover) {
+    background-color: rgb(var(--e-c-primary-01-900-rgb), 0.7);
     border-color: var(--e-c-primary-01-200);
   }
 

package/elements/button/_button-outlined.scss

@@ -13,7 +13,7 @@
     --dot-color: var(--e-c-primary-01-500);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-primary-01-50);
     border-color: var(--e-c-primary-01-200);
   }

package/elements/button/_button-plain.scss

@@ -4,13 +4,13 @@
   background: none;
   border: 0;
   text-decoration: none;
-  grid-gap: var(--e-space-1);
+  gap: var(--e-space-1);
 
   .icon {
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     color: var(--e-c-secondary-01-900);
 
     .icon {

package/elements/button/_button-secondary-outlined.scss

@@ -13,7 +13,7 @@
     --dot-color: var(--e-c-secondary-02-500);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-secondary-02-50);
     border-color: var(--e-c-secondary-02-200);
   }

package/elements/button/button.scss

@@ -22,7 +22,7 @@
   @include button-base;
 
   // ---- PRIMARY ----
-  & {
+  &.filled {
     @include button-filled;
   }
 
@@ -81,6 +81,10 @@
     white-space: nowrap;
   }
 
+  &.no-hover {
+    cursor: default;
+  }
+
   // In some cases we need to force full width of a button.
   // Is mostly the case when the button is wrapped by another element.
   &.full-width {

package/elements/button/u-button.vue

@@ -17,6 +17,7 @@ interface ButtonProps {
   fullWidth?: boolean
   hideLabelM?: boolean
   hideLabelLg?: boolean
+  noHover?: boolean
 }
 
 const {
@@ -26,6 +27,7 @@ const {
   href = '',
   target = '',
   asSpan = false,
+  noHover = false,
 } = defineProps<ButtonProps>()
 
 const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
@@ -42,6 +44,7 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
           'full-width': fullWidth,
           'hide-label-m': hideLabelM,
           'hide-label-lg': hideLabelLg,
+          'no-hover': noHover,
         },
       ]"
       :href
@@ -71,6 +74,7 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
           'full-width': fullWidth,
           'hide-label-m': hideLabelM,
           'hide-label-lg': hideLabelLg,
+          'no-hover': noHover,
           loading: loading,
           disabled,
         },

package/elements/select/select.scss

@@ -19,8 +19,6 @@
 
       // TODO: find a better solution for this.
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%233c8420' fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414' clip-rule='evenodd'/%3E%3C/svg%3E");
-
-      // background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.06 5.53 8 8.583 4.94 5.53 4 6.47l4 4 4-4-.94-.94Z' fill='%23333'/%3E%3C/svg%3E");
     }
 
     select {
@@ -43,4 +41,12 @@
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23b3b3b3' fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414' clip-rule='evenodd'/%3E%3C/svg%3E");
     }
   }
+
+  &.readonly {
+    pointer-events: none;
+
+    .control::after {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%236b6b6b' fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414' clip-rule='evenodd'/%3E%3C/svg%3E");
+    }
+  }
 }

package/elements/select/u-select.vue

@@ -6,6 +6,7 @@ import { getTranslation } from '../../utils/translations/translate'
 
 interface Props extends FormFieldBase {
   name: string
+  readonly?: boolean
   options: SelectOption[]
 }
 
@@ -14,6 +15,7 @@ const model = defineModel<string>()
 const {
   disabled = false,
   required = false,
+  readonly = false,
   helpText = '',
   errorMessage = '',
 } = defineProps<Props>()
@@ -27,7 +29,7 @@ const isHovering = ref(false)
 const spacer = '.&nbsp;'
 
 const onFocus = () => {
-  if (disabled) {
+  if (readonly || disabled) {
     return
   }
 
@@ -39,7 +41,7 @@ const onBlur = () => {
 }
 
 const onHover = () => {
-  if (disabled) {
+  if (readonly || disabled) {
     return
   }
 
@@ -66,6 +68,7 @@ const needsHelpTextSpacer = computed(() => {
       {
         required,
         disabled,
+        readonly,
         focus: isFocused,
         hover: isHovering,
         'float-label': true,
@@ -90,6 +93,7 @@ const needsHelpTextSpacer = computed(() => {
             v-model="model"
             :disabled
             :required
+            :aria-readonly="readonly"
             :name
             @focus="onFocus"
             @blur="onBlur"

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

@@ -28,7 +28,12 @@ const { onChange } = useRadio({ model, provideKey })
       :class="[
         'select-chip__button',
         'button',
-        { filled: model === value && !disabled, outlined: model !== value || disabled, disabled },
+        {
+          filled: model === value && !disabled,
+          outlined: model !== value || disabled,
+          disabled,
+          'no-hover': model === value,
+        },
       ]"
     >
       <UIcon v-if="model === value" name="check" />

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

@@ -203,3 +203,8 @@ $trs-pressed: var(--e-trs-duration-fastest) cubic-bezier(0.34, 1.56, 0.64, 1); /
     border-radius: var(--e-brd-radius-1);
   }
 }
+
+.select-tile__content:not(:has(.select-tile__label-wrapper), :has(.select-tile__icon-wrapper)),
+.select-tile__content:not(:has(.select-tile__text-wrapper), :has(.select-tile__icon-wrapper)) {
+  align-self: center;
+}

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
 import { useRadio } from '../radio-group/radio-group-composables'
+import { hasSlotContent } from '../../utils/vue/helpers'
 
 interface Props {
   name: string
-  label: string
-  text: string
+  label?: string
+  text?: string
   disabled?: boolean
   value: string
   icon: string
@@ -13,7 +14,12 @@ interface Props {
   provideKey?: string
 }
 
-const { disabled = false, radio = false, provideKey = 'select-tile-group' } = defineProps<Props>()
+const {
+  disabled = false,
+  radio = false,
+  provideKey = 'select-tile-group',
+  label = '',
+} = defineProps<Props>()
 
 const model = defineModel<string>()
 const { onChange } = useRadio({ model, provideKey })
@@ -32,15 +38,19 @@ const { onChange } = useRadio({ model, provideKey })
       </div>
 
       <!-- LABEL -->
-      <div class="select-tile__label-wrapper">
+      <div v-if="hasSlotContent($slots.label) || label" class="select-tile__label-wrapper">
         <slot name="label">
           {{ label }}
         </slot>
       </div>
 
       <!-- TEXT -->
-      <div class="select-tile__text-wrapper">
-        <p>{{ text }}</p>
+      <div v-if="hasSlotContent($slots.text) || text" class="select-tile__text-wrapper">
+        <p>
+          <slot name="text">
+            {{ text }}
+          </slot>
+        </p>
       </div>
     </div>
 

package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue

@@ -24,11 +24,11 @@ interface Props {
 const {
   collapsed = false,
   logoImage = {
-    src: '/static/ui-assets/images/logo-white.svg',
+    src: '/static/ui-assets/images/logo-short-inverted.svg',
     alt: 'Logo Energie 360°',
   },
   logoMinifiedImage = {
-    src: '/static/ui-assets/images/logo-mini.svg',
+    src: '/static/ui-assets/images/logo-short-inverted.svg',
     alt: 'Logo Energie 360°',
   },
   logoLink = {

package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue

@@ -4,7 +4,7 @@ import { UIconButton } from '../../elements'
 import { UContextMenu } from '../../components'
 import { Image } from '../../elements/types'
 import { getTranslation } from '../../utils/translations/translate'
-import { ref, watch, useTemplateRef } from 'vue'
+import { ref, watch, useTemplateRef, onUnmounted } from 'vue'
 
 interface MenuButton {
   icon: string
@@ -80,6 +80,11 @@ watch(model, (newV) => {
     closePanel()
   }
 })
+
+onUnmounted(() => {
+  // In case of re-render, remove this class from <html> tag.
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', false)
+})
 </script>
 
 <template>

package/package.json

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

package/wizard/wizard-intro/u-wizard-intro.vue

@@ -12,9 +12,9 @@ defineProps<Props>()
     <div class="left-col">
       <div>
         <div class="title-slot">
-          <slot name="title"
-            ><h1>{{ title }}</h1></slot
-          >
+          <slot name="title">
+            <h1>{{ title }}</h1>
+          </slot>
         </div>
 
         <div class="description-slot">
@@ -35,6 +35,4 @@ defineProps<Props>()
   </div>
 </template>
 
-<style lang="scss" scoped>
-@use './wizard-intro.scss';
-</style>
+<style lang="scss" scoped src="./wizard-intro.scss"></style>