@energie360/ui-library 0.1.15 → 0.1.17

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import { useRadio } from '../radio-group/radio-group-composables'
+
+interface Props {
+  name: string
+  label: string
+  text: string
+  disabled?: boolean
+  value: string
+  icon: string
+  radio?: boolean
+  provideKey?: string
+}
+
+const { disabled = false, radio = false, provideKey = 'select-tile-group' } = defineProps<Props>()
+
+const model = defineModel<string>()
+const { onChange } = useRadio({ model, provideKey })
+</script>
+
+<template>
+  <label :class="['select-tile', { checked: model === value, disabled }]">
+    <div v-if="radio" class="select-tile__radio-wrapper">
+      <span class="select-tile__radio-symbol"></span>
+    </div>
+
+    <div class="select-tile__content">
+      <!-- ICON -->
+      <div v-if="icon" class="select-tile__icon-wrapper">
+        <UIcon :name="icon" :width="40" :height="40" />
+      </div>
+
+      <!-- LABEL -->
+      <div class="select-tile__label-wrapper">
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </div>
+
+      <!-- TEXT -->
+      <div class="select-tile__text-wrapper">
+        <p>{{ text }}</p>
+      </div>
+    </div>
+
+    <div class="select-tile__input-wrapper">
+      <input type="radio" :name :value :disabled @change="onChange" />
+    </div>
+  </label>
+</template>
+
+<style scoped style="scss" src="./select-tile.scss"></style>

package/elements/select-tiles/select-tiles.scss

@@ -0,0 +1,32 @@
+@use '../../base/abstracts/' as a;
+
+.select-tiles {
+  &.error {
+    .select-tiles__error-message {
+      display: block;
+    }
+  }
+}
+
+.select-tiles__items {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--e-space-10);
+
+  @include a.bp(lg) {
+    grid-gap: var(--e-space-4);
+  }
+
+  @include a.bp(m) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.select-tiles__error-message {
+  @include a.type(50, strong);
+
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
+}

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useRadioGroup } from '../radio-group/radio-group-composables'
+
+interface Props {
+  error?: boolean
+  errorMessage?: string
+}
+
+defineProps<Props>()
+
+const model = defineModel<string>()
+
+useRadioGroup({
+  model,
+  provideKey: 'select-tile-group',
+})
+</script>
+
+<template>
+  <div :class="['select-tiles', { error }]">
+    <div class="select-tiles__items">
+      <slot></slot>
+    </div>
+
+    <div class="select-tiles__error-message">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<style scoped style="scss" src="./select-tiles.scss"></style>

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

@@ -37,7 +37,7 @@ const input = useTemplateRef('input')
 const isFocused = ref(false)
 const isHovering = ref(false)
 const hasValue = ref(false) // only needed for input type 'search'
-const forceFloatLabel = ref(false)
+const forceFloatLabel = ref(type === TextFieldTypes.date) // input-type 'date' doesn't support placeholder.
 
 const spacer = '. '
 
@@ -122,15 +122,16 @@ watch(
         'has-error': error,
         'show-help-text': hasHelpText,
       },
+      type,
     ]"
     @mouseenter="onHover"
     @mouseleave="onHoverOut"
   >
     <div class="wrapper">
       <div class="label">
-        <slot name="label">
-          <label :for="inputId">{{ label }}</label>
-        </slot>
+        <label :for="inputId">
+          <slot name="label">{{ label }}</slot>
+        </label>
       </div>
 
       <div class="control">
@@ -145,6 +146,7 @@ watch(
             :readonly
             :placeholder
             :required
+            v-bind="$attrs"
             @input="onInput"
             @focus="onFocus"
             @focusout="$emit('focusout', $event.target)"
@@ -172,6 +174,11 @@ watch(
       <span v-if="type === TextFieldTypes.date" class="suffix-icon">
         <UIcon name="calendar"></UIcon>
       </span>
+
+      <!-- ACTION -->
+      <span v-if="!!slots.action" class="suffix-action custom-action">
+        <slot name="action"></slot>
+      </span>
     </div>
 
     <div class="help-text">
@@ -189,6 +196,16 @@ watch(
   </div>
 </template>
 
+<style scoped lang="scss" src="./text-field.scss"></style>
+
 <style scoped lang="scss">
-@use './text-field.scss';
+.suffix-action.custom-action {
+  :slotted(button) {
+    cursor: pointer;
+  }
+
+  :slotted(.icon) {
+    color: var(--e-c-secondary-05-700);
+  }
+}
 </style>

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

@@ -17,6 +17,7 @@
       // So that the focus works nicely.
       position: absolute;
       inset: 0;
+      border-radius: calc(var(--height) / 2);
     }
   }
 
@@ -87,6 +88,12 @@
   }
 
   // States
+  &.error {
+    .toggle-switch__error-text {
+      display: block;
+    }
+  }
+
   &.checked {
     .toggle-switch__toggle {
       background-color: var(--e-c-primary-01-900);
@@ -141,9 +148,12 @@
       background-color: var(--e-c-mono-50);
     }
   }
+}
+
+.toggle-switch__error-text {
+  @include a.type(50, strong);
 
-  // // TODO: Do we need readonly styles here?
-  // &.readonly {
-  //   //
-  // }
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
 }

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

@@ -6,10 +6,9 @@ import { getTranslation } from '../../utils/translations/translate'
 export interface ToggleSwitch {
   name: string
   label?: string
-  required?: boolean
   disabled?: boolean
-  readonly?: boolean
-  value?: string
+  error: boolean
+  errorMessage?: string
   variant?: 'normal' | 'small'
   labelPosition?: 'left' | 'right'
 }
@@ -18,8 +17,8 @@ const {
   variant = 'big',
   labelPosition = 'right',
   disabled = false,
-  readonly = false,
-  required = false,
+  errorMessage = '',
+  error,
 } = defineProps<ToggleSwitch>()
 
 const model = defineModel<boolean>({ default: false })
@@ -35,7 +34,7 @@ const checkIcon = computed(() => iconsMap[variant][1])
 const classes = computed(() => ({
   checked: model.value,
   disabled,
-  readonly,
+  error,
   [`toggle-switch--${variant}`]: variant,
   [`label-${labelPosition}`]: labelPosition,
 }))
@@ -45,24 +44,28 @@ const classes = computed(() => ({
   <div :class="['toggle-switch', classes]">
     <label class="toggle-switch__wrapper">
       <span class="toggle-switch__toggle">
-        <span class="toggle-switch__text yes" :aria-hidden="model.value ? 'false' : 'true'">{{
-          getTranslation('yes')
-        }}</span>
-        <span class="toggle-switch__text no" :aria-hidden="model.value ? 'true' : 'false'">{{
-          getTranslation('no')
-        }}</span>
+        <span class="toggle-switch__text yes" :aria-hidden="model ? 'false' : 'true'">
+          {{ getTranslation('yes') }}
+        </span>
+        <span class="toggle-switch__text no" :aria-hidden="model ? 'true' : 'false'">
+          {{ getTranslation('no') }}
+        </span>
         <span class="toggle-switch__handle">
-          <UIcon :name="model.value ? checkIcon : uncheckIcon" custom-size />
+          <UIcon :name="model ? checkIcon : uncheckIcon" custom-size />
         </span>
       </span>
-      {{ label }}
-      <slot name="input"
-        ><input v-model="model" type="checkbox" :name :required :disabled :readonly :value
-      /></slot>
+
+      <slot name="label">{{ label }}</slot>
+
+      <slot name="input">
+        <input v-model="model" type="checkbox" :name :disabled v-bind="$attrs" />
+      </slot>
     </label>
+
+    <div class="toggle-switch__error-text">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
   </div>
 </template>
 
-<style lang="scss">
-@use './toggle-switch.scss';
-</style>
+<style scoped lang="scss" src="./toggle-switch.scss"></style>

package/layout/index.js

@@ -0,0 +1,2 @@
+export { default as USettingsLayout } from './settings/u-settings-layout.vue'
+export { default as UPortalLayout } from './portal/u-portal.vue'

package/layout/portal/portal.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+
+.portal {
+  display: flex;
+  height: 100vh;
+}
+
+.portal__top-navigation {
+  display: none;
+}
+
+.portal__main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.portal__footer {
+  margin-top: auto;
+}
+
+@include a.bp(lg) {
+  .portal {
+    flex-direction: column;
+  }
+
+  .portal__top-navigation {
+    display: block;
+  }
+
+  .portal__side-navigation {
+    display: none;
+  }
+}

package/layout/portal/u-portal.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="portal">
+    <div 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">
+      <slot></slot>
+
+      <div class="portal__footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<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);
+
+  @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);
+  }
+}
+
+.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/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;
+  }
+}

package/modules/dialog/dialog.scss

@@ -0,0 +1,168 @@
+// TODO: Styles have been copied from 'news'. Refactor when possible.
+@use '../../base/abstracts' as a;
+@use './animations';
+
+.dialog-container {
+  --overflow-gradient-height: var(--e-space-10);
+
+  padding: 0;
+  border: 0;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  &[open] {
+    display: flex;
+    animation: fade-in var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &[open]::backdrop {
+    background-color: var(--e-c-mono-900);
+    opacity: 0.4;
+    animation: fade-in-backdrop var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &.has-header-image {
+    .dialog__header-image-container {
+      display: flex;
+    }
+  }
+
+  &.has-content-image {
+    .dialog__content-image {
+      display: block;
+    }
+  }
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--e-c-mono-00);
+  overflow: auto;
+  scrollbar-width: none;
+  border-radius: var(--e-brd-radius-3);
+  padding: var(--e-space-7) var(--e-space-7) 0;
+  height: a.rem(670);
+  max-height: 80vh;
+  max-width: a.rem(480);
+  width: 100%;
+
+  * + .dialog__content-image {
+    margin-top: var(--e-space-5);
+  }
+
+  @include a.bp(m) {
+    max-width: none;
+    height: auto;
+    min-height: a.rem(440);
+    padding-left: var(--e-space-5);
+    padding-right: var(--e-space-5);
+  }
+}
+
+.dialog__header-image-container {
+  display: none;
+  justify-content: center;
+  height: a.rem(184);
+  margin-bottom: var(--e-space-8);
+
+  img {
+    object-fit: contain;
+  }
+}
+
+.dialog__content-container {
+  margin-bottom: auto;
+}
+
+.content-title {
+  @include a.type(500, strong);
+
+  @include a.bp(m) {
+    @include a.type(300, strong);
+  }
+}
+
+.content-title + .content-text {
+  margin-top: var(--e-space-2);
+
+  @include a.bp(m) {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.dialog__content-image {
+  display: none;
+
+  img {
+    width: 100%;
+  }
+}
+
+.cta-container {
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  margin-top: var(--overflow-gradient-height);
+  padding: var(--e-space-8) var(--e-space-1) var(--e-space-7);
+  background-color: var(--e-c-mono-00);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(var(--overflow-gradient-height) * -1);
+    left: 0;
+    width: 100%;
+    height: var(--overflow-gradient-height);
+    background-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
+  }
+
+  @include a.bp(m) {
+    padding: var(--e-space-8) 0 var(--e-space-7);
+  }
+}
+
+// MOBILE "MODAL" Variant
+.dialog-container.modal {
+  @include a.bp(m) {
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+// MOBILE "SLIDE-OUT" Variant
+.dialog-container.slideout {
+  @include a.bp(m) {
+    align-items: flex-end;
+
+    // Closing animation
+    animation: slide-out var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+    &[open] {
+      display: flex;
+      animation: slide-in var(--e-trs-duration-fast) var(--e-trs-easing-default);
+    }
+
+    .dialog {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      max-height: 90vh;
+    }
+  }
+}
+
+body:has(.dialog[open]) {
+  overflow: hidden;
+}