@energie360/ui-library 0.1.43 → 0.1.44

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

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.43",
+  "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>