@energie360/ui-library 0.1.17 → 0.1.18

package/elements/toggle-switch/toggle-switch.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 @use './toggle-switch-small';
 
 .toggle-switch {
@@ -31,6 +31,18 @@
     background-color: var(--e-c-mono-200);
     border-radius: calc(var(--height) * 0.5);
     transition: background-color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+    &:hover {
+      background-color: var(--e-c-mono-500);
+    }
+
+    &:active {
+      background-color: var(--e-c-mono-700);
+
+      .toggle-switch__text {
+        color: var(--e-c-mono-00);
+      }
+    }
   }
 
   .toggle-switch__handle {
@@ -71,22 +83,6 @@
     }
   }
 
-  &:hover {
-    .toggle-switch__toggle {
-      background-color: var(--e-c-mono-500);
-    }
-  }
-
-  &:active {
-    .toggle-switch__toggle {
-      background-color: var(--e-c-mono-700);
-    }
-
-    .toggle-switch__text {
-      color: var(--e-c-mono-00);
-    }
-  }
-
   // States
   &.error {
     .toggle-switch__error-text {
@@ -97,11 +93,19 @@
   &.checked {
     .toggle-switch__toggle {
       background-color: var(--e-c-primary-01-900);
+
+      &:hover {
+        background-color: var(--e-c-secondary-01-900);
+      }
     }
 
     .toggle-switch__handle {
       transform: translateX(calc(var(--width) - var(--handle-size) - var(--inner-padding) * 2));
       color: var(--e-c-primary-01-900);
+
+      &:hover {
+        color: var(--e-c-secondary-01-900);
+      }
     }
 
     .toggle-switch__text {
@@ -117,10 +121,6 @@
     }
 
     &:hover {
-      .toggle-switch__toggle {
-        background-color: var(--e-c-secondary-01-900);
-      }
-
       .toggle-switch__handle {
         color: var(--e-c-secondary-01-900);
       }
@@ -157,3 +157,7 @@
   margin-top: var(--e-space-1);
   color: var(--e-c-signal-03-700);
 }
+
+.toggle-switch__additional-label {
+  display: none;
+}

package/elements/toggle-switch/u-toggle-switch.vue

@@ -7,9 +7,9 @@ export interface ToggleSwitch {
   name: string
   label?: string
   disabled?: boolean
-  error: boolean
+  error?: boolean
   errorMessage?: string
-  variant?: 'normal' | 'small'
+  variant?: 'big' | 'small'
   labelPosition?: 'left' | 'right'
 }
 
@@ -18,7 +18,7 @@ const {
   labelPosition = 'right',
   disabled = false,
   errorMessage = '',
-  error,
+  error = false,
 } = defineProps<ToggleSwitch>()
 
 const model = defineModel<boolean>({ default: false })
@@ -42,8 +42,12 @@ const classes = computed(() => ({
 
 <template>
   <div :class="['toggle-switch', classes]">
-    <label class="toggle-switch__wrapper">
-      <span class="toggle-switch__toggle">
+    <div class="toggle-switch__wrapper">
+      <label class="toggle-switch__toggle">
+        <slot name="input">
+          <input v-model="model" type="checkbox" :name :disabled v-bind="$attrs" />
+        </slot>
+
         <span class="toggle-switch__text yes" :aria-hidden="model ? 'false' : 'true'">
           {{ getTranslation('yes') }}
         </span>
@@ -53,14 +57,12 @@ const classes = computed(() => ({
         <span class="toggle-switch__handle">
           <UIcon :name="model ? checkIcon : uncheckIcon" custom-size />
         </span>
-      </span>
-
-      <slot name="label">{{ label }}</slot>
+      </label>
 
-      <slot name="input">
-        <input v-model="model" type="checkbox" :name :disabled v-bind="$attrs" />
-      </slot>
-    </label>
+      <span class="toggle-switch__additional-label">
+        <slot name="label"><span v-html="label"></span></slot>
+      </span>
+    </div>
 
     <div class="toggle-switch__error-text">
       <slot name="error-message">{{ errorMessage }}</slot>
@@ -69,3 +71,11 @@ const classes = computed(() => ({
 </template>
 
 <style scoped lang="scss" src="./toggle-switch.scss"></style>
+<style lang="scss">
+@use '../../elements/text-link/text-link' as t;
+.toggle-switch__wrapper {
+  a {
+    @include t.text-link;
+  }
+}
+</style>

package/i18n/i18n.ts

@@ -13,6 +13,14 @@ const translations = {
     cancel: 'Abbrechen',
     openMenu: 'Menu öffnen',
     closeMenu: 'Menu schliessen',
+    dragFileHereOr: 'Datei hierher ziehen oder',
+    chooseFile: 'Datei wählen',
+    maxSizePerFile: 'Max. $SIZE pro Datei',
+    incorrectFileFormat: 'Dateiformat ist nicht zugelassen.',
+    fileTooLarge: 'Datei zu gross.',
+    maxFileCountAllowed: 'Maximal $COUNT Dateien erlaubt.',
+    cancelSearch: 'Suche abbrechen',
+    download: 'Herunterladen',
   },
   FR: {
     yes: 'Ja',
@@ -28,6 +36,14 @@ const translations = {
     cancel: 'Annuler',
     openMenu: 'Ouvrir le menu',
     closeMenu: 'Fermer le menu',
+    dragFileHereOr: 'Faites glisser le fichier ici ou',
+    chooseFile: 'Choisir un fichier',
+    maxSizePerFile: 'Max. $SIZE par fichier',
+    incorrectFileFormat: "Le format de fichier n'est pas autorisé.",
+    fileTooLarge: 'Fichier trop volumineux',
+    maxFileCountAllowed: 'Maximum de $COUNT fichiers autorisés',
+    cancelSearch: 'Annuler la recherche',
+    download: 'Télécharger',
   },
   IT: {
     yes: 'Ja',
@@ -43,6 +59,14 @@ const translations = {
     cancel: 'cancellare',
     openMenu: 'Apri il menu',
     closeMenu: 'Chiudi menù',
+    dragFileHereOr: 'Trascina il file qui o',
+    chooseFile: 'scegli il file',
+    maxSizePerFile: 'Max. $SIZE per file',
+    incorrectFileFormat: 'Formato file non consentito.',
+    fileTooLarge: 'File troppo grande',
+    maxFileCountAllowed: 'Sono consentiti al massimo $COUNT file',
+    cancelSearch: 'annullare la ricerca',
+    download: 'scaricamento',
   },
   EN: {
     yes: 'Ja',
@@ -58,6 +82,14 @@ const translations = {
     cancel: 'Cancel',
     openMenu: 'Open menu',
     closeMenu: 'Close menu',
+    dragFileHereOr: 'Drag file here or',
+    chooseFile: 'Choose file',
+    maxSizePerFile: 'Max. $SIZE per file',
+    incorrectFileFormat: 'File format is not allowed.',
+    fileTooLarge: 'File too large',
+    maxFileCountAllowed: 'Maximum $COUNT files allowed',
+    cancelSearch: 'Cancel search',
+    download: 'Download',
   },
 }
 

package/layout/container/container.scss

@@ -25,6 +25,24 @@
   }
 }
 
+@mixin portal-content-container {
+  margin: 0 auto;
+  max-width: a.rem(1282);
+  width: 100%;
+  padding-left: var(--e-space-10);
+  padding-right: var(--e-space-10);
+
+  @include a.bp(lg) {
+    padding-left: var(--e-space-8);
+    padding-right: var(--e-space-8);
+  }
+
+  @include a.bp(m) {
+    padding-left: var(--e-space-5);
+    padding-right: var(--e-space-5);
+  }
+}
+
 .container {
   @include grid-container;
 }

package/layout/index.js

@@ -1,2 +1,4 @@
 export { default as USettingsLayout } from './settings/u-settings-layout.vue'
 export { default as UPortalLayout } from './portal/u-portal.vue'
+export { default as UTileGrid } from './tile-grid/u-tile-grid.vue'
+export { default as UTileItem } from './tile-grid/u-tile-item.vue'

package/layout/portal/portal.scss

@@ -1,19 +1,47 @@
 @use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
 
 .portal {
-  display: flex;
+  --side-nav-width: 80px;
+}
+
+.portal__side-navigation {
+  position: fixed;
   height: 100vh;
+  display: flex;
 }
 
 .portal__top-navigation {
   display: none;
 }
 
+.portal__sub-navigation {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--e-c-mono-00);
+}
+
 .portal__main {
-  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  padding-left: var(--side-nav-width);
+  min-height: 100vh;
+}
+
+.portal__content-container {
+  @include c.portal-content-container;
+
+  padding-top: var(--e-space-10);
+  padding-bottom: var(--e-space-10);
+
+  @include a.bp(lg) {
+    padding-top: var(--e-space-8);
+  }
+
+  @include a.bp(m) {
+    padding-top: var(--e-space-6);
+  }
 }
 
 .portal__footer {
@@ -21,10 +49,6 @@
 }
 
 @include a.bp(lg) {
-  .portal {
-    flex-direction: column;
-  }
-
   .portal__top-navigation {
     display: block;
   }
@@ -32,4 +56,8 @@
   .portal__side-navigation {
     display: none;
   }
+
+  .portal__sub-navigation {
+    background-color: var(--e-c-mono-50);
+  }
 }

package/layout/portal/u-portal.vue

@@ -1,6 +1,30 @@
+<script setup lang="ts">
+import { useTemplateRef, onMounted, ref } from 'vue'
+
+const sideNavObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    if (entry.target === sideNavEl.value) {
+      sideNavWidth.value = entry.contentBoxSize[0].inlineSize
+    }
+  }
+})
+
+const sideNavEl = useTemplateRef('sideNavigation')
+const sideNavWidth = ref(0)
+
+onMounted(() => {
+  sideNavObserver.observe(sideNavEl.value)
+})
+</script>
+
 <template>
-  <div class="portal">
-    <div class="portal__side-navigation">
+  <div
+    class="portal"
+    :style="{
+      '--side-nav-width': `${sideNavWidth}px`,
+    }"
+  >
+    <div ref="sideNavigation" class="portal__side-navigation">
       <slot name="side-navigation"></slot>
     </div>
 
@@ -9,7 +33,13 @@
     </div>
 
     <div class="portal__main">
-      <slot></slot>
+      <div class="portal__sub-navigation">
+        <slot name="sub-navigation"></slot>
+      </div>
+
+      <div class="portal__content-container">
+        <slot></slot>
+      </div>
 
       <div class="portal__footer">
         <slot name="footer"></slot>
@@ -18,5 +48,4 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
 <style scoped lang="scss" src="./portal.scss"></style>

package/layout/settings/settings.scss

@@ -6,13 +6,13 @@
   grid-template-rows: repeat(2, auto);
   grid-column-gap: var(--e-space-24);
   grid-row-gap: var(--e-space-12);
-  padding: var(--e-space-10);
+  padding: var(--e-space-10) 0;
 
   @include a.bp(lg) {
     display: flex;
     flex-direction: column;
     row-gap: var(--e-space-6);
-    padding: var(--e-space-6) var(--e-space-5) var(--e-space-10);
+    padding: var(--e-space-6) 0 var(--e-space-10);
   }
 }
 

package/layout/tile-grid/tile-grid.scss

@@ -0,0 +1,13 @@
+@use '../../base/abstracts' as a;
+
+.tile-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: var(--e-space-6);
+  container: tile-grid / inline-size;
+
+  @include a.bp(m) {
+    gap: var(--e-space-4);
+  }
+}

package/layout/tile-grid/tile-item.scss

@@ -0,0 +1,31 @@
+@use '../../base/abstracts' as a;
+
+.tile-item {
+  grid-column: span 12;
+
+  &[data-width='1'] {
+    grid-column: span 12;
+  }
+
+  &[data-width='1/2'] {
+    grid-column: span 6;
+  }
+
+  &[data-width='1/3'] {
+    grid-column: span 4;
+  }
+
+  &[data-width='2/3'] {
+    grid-column: span 8;
+  }
+}
+
+@container tile-grid (width < 920px) {
+  .tile-item {
+    &[data-width='1/2'],
+    &[data-width='1/3'],
+    &[data-width='2/3'] {
+      grid-column: span 12;
+    }
+  }
+}

package/layout/tile-grid/u-tile-grid.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="tile-grid">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./tile-grid.scss"></style>

package/layout/tile-grid/u-tile-item.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  width?: '1' | '1/2' | '1/3' | '2/3'
+}
+
+const { width = '1' } = defineProps<Props>()
+</script>
+
+<template>
+  <div class="tile-item" :data-width="width">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./tile-item.scss"></style>

package/modules/content-title/content-title.scss

@@ -0,0 +1,43 @@
+@use '../../base/abstracts' as a;
+
+.content-title {
+  display: flex;
+  align-items: center;
+  gap: var(--e-space-8);
+  justify-content: flex-end;
+
+  @include a.bp(xl) {
+    flex-wrap: wrap;
+  }
+
+  @include a.bp(m) {
+    row-gap: var(--e-space-6);
+  }
+}
+
+.content-title__content {
+  margin-right: auto;
+
+  @include a.bp(xl) {
+    width: 100%;
+  }
+}
+
+.content-title__title {
+  @include a.type(500, strong);
+
+  min-width: max-content;
+}
+
+.content-title__text {
+  @include a.type(100);
+
+  margin-top: var(--e-space-2);
+  color: var(--e-c-mono-700);
+}
+
+.content-title__custom-content {
+  @include a.bp(xl) {
+    width: 100%;
+  }
+}

package/modules/content-title/u-content-title.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="content-title">
+    <div class="content-title__content">
+      <h1 class="content-title__title">
+        <slot />
+      </h1>
+
+      <p v-if="$slots.text" class="content-title__text">
+        <slot name="text" />
+      </p>
+    </div>
+
+    <div v-if="$slots['custom']" class="content-title__custom-content">
+      <slot name="custom"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./content-title.scss"></style>

package/modules/dialog/dialog.scss

@@ -50,15 +50,17 @@
   padding: var(--e-space-7) var(--e-space-7) 0;
   height: a.rem(670);
   max-height: 80vh;
-  max-width: a.rem(480);
-  width: 100%;
+  max-width: a.rem(540);
+  min-width: a.rem(480);
 
   * + .dialog__content-image {
     margin-top: var(--e-space-5);
   }
 
   @include a.bp(m) {
+    width: 100%;
     max-width: none;
+    min-width: 0;
     height: auto;
     min-height: a.rem(440);
     padding-left: var(--e-space-5);
@@ -89,7 +91,8 @@
   }
 }
 
-.content-title + .content-text {
+.content-title + .content-text,
+.content-title + .content-custom {
   margin-top: var(--e-space-2);
 
   @include a.bp(m) {
@@ -109,6 +112,7 @@
   position: sticky;
   display: flex;
   flex-direction: column;
+  row-gap: var(--e-space-4);
   bottom: 0;
   margin-top: var(--overflow-gradient-height);
   padding: var(--e-space-8) var(--e-space-1) var(--e-space-7);

package/modules/dialog/u-dialog.vue

@@ -96,7 +96,7 @@ watch(visible, (newV) => {
           </h3>
         </div>
 
-        <div class="content-text">
+        <div v-if="$slots.text || text" class="content-text">
           <div class="richtext">
             <slot name="text">
               <div v-html="text"></div>
@@ -104,6 +104,10 @@ watch(visible, (newV) => {
           </div>
         </div>
 
+        <div v-if="$slots.custom" class="content-custom">
+          <slot name="custom"></slot>
+        </div>
+
         <div class="dialog__content-image">
           <slot name="content-image">
             <img v-bind="contentImage" />
@@ -112,6 +116,7 @@ watch(visible, (newV) => {
       </div>
 
       <div class="cta-container">
+        <slot name="cta"></slot>
         <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
       </div>
     </div>

package/modules/footer/footer.scss

@@ -1,8 +1,9 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 @use '../../elements/text-link/text-link.scss' as t;
 @use '../../layout/container/container.scss' as l;
 
 .footer {
+  &.portal,
   &.reduced {
     .footer__top {
       display: none;
@@ -25,6 +26,12 @@
       position: static;
     }
   }
+
+  &.portal {
+    .footer__container {
+      @include l.portal-content-container;
+    }
+  }
 }
 
 .footer__top {

package/modules/footer/u-footer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  variant?: 'normal' | 'reduced'
+  variant?: 'normal' | 'reduced' | 'portal'
 }
 
 const { variant = 'normal' } = defineProps<Props>()

package/modules/index.js

@@ -8,3 +8,5 @@ export { default as UProgressIndicator } from './progress-indicator/u-progress-i
 export { default as UToast } from './toast/u-toast.vue'
 export { toast } from './toast/useToast.ts'
 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'