@energie360/ui-library 0.1.16 → 0.1.18

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

@@ -11,6 +11,10 @@
     align-items: center;
     width: 100%;
     gap: var(--e-space-4);
+
+    input {
+      width: var(--width);
+    }
   }
 
   .toggle-switch__handle {
@@ -37,4 +41,10 @@
       margin-right: auto;
     }
   }
+
+  .toggle-switch__additional-label {
+    display: inline;
+
+    @include a.type(200);
+  }
 }

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

@@ -0,0 +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

@@ -0,0 +1,63 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.portal {
+  --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 {
+  display: flex;
+  flex-direction: column;
+  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 {
+  margin-top: auto;
+}
+
+@include a.bp(lg) {
+  .portal__top-navigation {
+    display: block;
+  }
+
+  .portal__side-navigation {
+    display: none;
+  }
+
+  .portal__sub-navigation {
+    background-color: var(--e-c-mono-50);
+  }
+}

package/layout/portal/u-portal.vue

@@ -0,0 +1,51 @@
+<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"
+    :style="{
+      '--side-nav-width': `${sideNavWidth}px`,
+    }"
+  >
+    <div ref="sideNavigation" class="portal__side-navigation">
+      <slot name="side-navigation"></slot>
+    </div>
+
+    <div class="portal__top-navigation">
+      <slot name="top-navigation"></slot>
+    </div>
+
+    <div class="portal__main">
+      <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal.scss"></style>

package/layout/settings/settings.scss

@@ -0,0 +1,33 @@
+@use '../../base/abstracts' as a;
+
+.settings-layout {
+  display: grid;
+  grid-template-columns: auto a.rem(320);
+  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) 0;
+
+  @include a.bp(lg) {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--e-space-6);
+    padding: var(--e-space-6) 0 var(--e-space-10);
+  }
+}
+
+.settings-layout__header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+
+.settings-layout__main {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.settings-layout__aside {
+  grid-area: 2 / 2 / 3 / 3;
+}
+
+.settings-layout__title {
+  @include a.type(500, strong);
+}

package/layout/settings/u-settings-layout.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="settings-layout">
+    <div class="settings-layout__header">
+      <h1 class="settings-layout__title">
+        <slot name="title"></slot>
+      </h1>
+    </div>
+
+    <div class="settings-layout__main">
+      <slot name="main"></slot>
+    </div>
+
+    <aside class="settings-layout__aside">
+      <slot name="aside"></slot>
+    </aside>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./settings.scss"></style>

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/_animations.scss

@@ -0,0 +1,49 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    display: none;
+  }
+
+  100% {
+    opacity: 1;
+    display: flex;
+  }
+}
+
+@keyframes fade-in-backdrop {
+  0% {
+    background-color: transparent;
+  }
+
+  100% {
+    background-color: var(--e-c-mono-900);
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    opacity: 1;
+    transform: translateY(100%);
+    display: none;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    display: flex;
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+    display: flex;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(100%);
+    display: none;
+  }
+}