@energie360/ui-library 0.1.14 → 0.1.16

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

@@ -0,0 +1,205 @@
+@use '../../base/abstracts/' as a;
+
+$transition-options: var(--e-trs-duration-faster) var(--e-trs-easing-default);
+$trs-pressed: var(--e-trs-duration-fastest) cubic-bezier(0.34, 1.56, 0.64, 1); // https://easings.net/#easeOutBack
+
+.select-tile {
+  position: relative;
+  display: flex;
+  height: 100%;
+  column-gap: var(--e-space-4);
+  border-radius: var(--e-brd-radius-2);
+  border: 2px solid var(--e-c-secondary-01-100);
+  padding: var(--e-space-6);
+  transition:
+    border $transition-options,
+    background $transition-options,
+    transform $trs-pressed;
+  cursor: pointer;
+
+  // CHECKED/ACTIVE
+  &.checked {
+    background-color: var(--e-c-primary-01-50);
+    border-color: var(--e-c-primary-01-500);
+
+    .select-tile__icon-wrapper,
+    .select-tile__label-wrapper {
+      color: var(--e-c-primary-01-900);
+    }
+
+    .select-tile__text-wrapper {
+      color: var(--e-c-primary-01-700);
+    }
+
+    .select-tile__radio-symbol {
+      &::after {
+        border-color: var(--e-c-secondary-01-900);
+        border-width: 5px;
+      }
+    }
+  }
+
+  // HOVER
+  &:hover {
+    border-color: var(--e-c-primary-01-200);
+
+    .select-tile__radio-symbol {
+      &::before {
+        background-color: var(--e-c-primary-01-50);
+      }
+
+      &::after {
+        border-color: var(--e-c-secondary-01-900);
+      }
+    }
+
+    &.checked {
+      border-color: var(--e-c-primary-01-900);
+
+      .select-tile__label-wrapper,
+      .select-tile__icon-wrapper {
+        color: var(--e-c-primary-01-700);
+      }
+
+      .select-tile__text-wrapper {
+        color: var(--e-c-primary-01-500);
+      }
+    }
+  }
+
+  // PRESSED
+  &:active {
+    background-color: var(--e-c-primary-01-50);
+    transform: scale(0.98);
+
+    .select-tile__label-wrapper,
+    .select-tile__icon-wrapper {
+      color: var(--e-c-primary-01-700);
+    }
+
+    .select-tile__text-wrapper {
+      color: var(--e-c-primary-01-500);
+    }
+
+    .select-tile__radio-symbol {
+      &::before {
+        background-color: var(--e-c-primary-01-100);
+      }
+
+      &::after {
+        border-color: var(--e-c-secondary-01-900);
+      }
+    }
+
+    &.checked {
+      background-color: var(--e-c-primary-01-100);
+      border-color: var(--e-c-primary-01-500);
+
+      .select-tile__radio-symbol {
+        &::before {
+          background-color: var(--e-c-primary-01-50);
+        }
+      }
+    }
+  }
+
+  // DISABLED
+  &.disabled {
+    border-color: var(--e-c-mono-500);
+    pointer-events: none;
+
+    .select-tile__radio-symbol {
+      &::after {
+        border-color: var(--e-c-mono-200);
+      }
+    }
+
+    .select-tile__label-wrapper,
+    .select-tile__icon-wrapper {
+      color: var(--e-c-mono-500);
+    }
+
+    .select-tile__text-wrapper {
+      color: var(--e-c-mono-200);
+    }
+
+    &.checked {
+      background-color: var(--e-c-mono-50);
+
+      .select-tile__radio-symbol {
+        &::after {
+          border-width: 2px;
+          background-color: var(--e-c-mono-200);
+          box-shadow: 0 0 0 3px var(--e-c-mono-50) inset;
+        }
+      }
+    }
+  }
+}
+
+.select-tile__radio-symbol {
+  position: relative;
+  display: block;
+  width: a.rem(40);
+  height: a.rem(40);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 100%;
+    transition: background $transition-options;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - #{a.rem(10)});
+    left: calc(50% - #{a.rem(10)});
+    width: a.rem(20);
+    height: a.rem(20);
+    border-radius: 100%;
+    border: 2px solid var(--e-c-mono-900);
+    transition: border $transition-options;
+  }
+}
+
+.select-tile__icon-wrapper {
+  margin-bottom: var(--e-space-4);
+  transition: color $transition-options;
+}
+
+.select-tile__radio-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-tile__label-wrapper {
+  transition: color $transition-options;
+
+  @include a.type(300, strong);
+
+  + .select-tile__text-wrapper {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.select-tile__text-wrapper {
+  color: var(--e-c-mono-700);
+  transition: color $transition-options;
+
+  @include a.type(300, weak);
+}
+
+.select-tile__input-wrapper {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+
+  input {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--e-brd-radius-1);
+  }
+}

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/text-field.types.ts

@@ -3,4 +3,5 @@ export enum TextFieldTypes {
   number = 'number',
   email = 'email',
   password = 'password',
+  date = 'date',
 }

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,20 +122,21 @@ 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
-        >
+        <slot name="label">
+          <label :for="inputId">{{ label }}</label>
+        </slot>
       </div>
 
       <div class="control">
-        <slot
-          ><input
+        <slot>
+          <input
             :id="inputId"
             ref="input"
             v-model="model"
@@ -145,11 +146,13 @@ watch(
             :readonly
             :placeholder
             :required
+            v-bind="$attrs"
             @input="onInput"
             @focus="onFocus"
             @focusout="$emit('focusout', $event.target)"
             @blur="onBlur"
-        /></slot>
+          />
+        </slot>
 
         <div class="control-border"></div>
       </div>
@@ -166,19 +169,24 @@ watch(
       <span v-if="unit" class="suffix-text">
         {{ unit }}
       </span>
+
+      <!-- DATE -->
+      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
+        <UIcon name="calendar"></UIcon>
+      </span>
     </div>
 
     <div class="help-text">
-      <span class="optional-text"
-        >{{ getTranslation('optional')
-        }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
-      ><slot name="helpText">{{ helpText }}</slot>
+      <span class="optional-text">
+        {{ getTranslation('optional') }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span>
+      </span>
+      <slot name="helpText">{{ helpText }}</slot>
     </div>
 
     <div class="error-messages-container">
-      <slot name="error-message"
-        ><span>{{ errorMessage }}</span></slot
-      >
+      <slot name="error-message">
+        <span>{{ errorMessage }}</span>
+      </slot>
     </div>
   </div>
 </template>

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/modules/index.js

@@ -3,3 +3,7 @@ export { default as UFooter } from './footer/u-footer.vue'
 export { default as UInlineEditGroup } from './inline-edit-group/u-inline-edit-group.vue'
 export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-navigation-toolbar-top.vue'
 export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'
+export { default as UNavigationPanel } from './navigation-panel/u-navigation-panel.vue'
+export { default as UProgressIndicator } from './progress-indicator/u-progress-indicator.vue'
+export { default as UToast } from './toast/u-toast.vue'
+export { toast } from './toast/useToast.ts'

package/modules/navigation-panel/navigation-panel.scss

@@ -0,0 +1,65 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-panel {
+  overflow: auto;
+  padding: var(--e-space-6);
+  background-color: var(--e-c-mono-50);
+  border-right: 1px solid var(--e-c-mono-200);
+  width: a.rem(300);
+  height: 100vh;
+
+  @include a.bp(lg) {
+    width: 100%;
+    height: auto;
+    padding: var(--e-space-4) var(--e-space-5) 0;
+  }
+}
+
+.navigation-panel__tiles {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-3);
+
+  @include a.bp(lg) {
+    overflow: auto;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    column-gap: var(--e-space-3);
+    margin-left: calc(var(--e-space-5) * -1);
+    margin-right: calc(var(--e-space-5) * -1);
+    padding-left: var(--e-space-5);
+    padding-right: var(--e-space-5);
+    padding-bottom: var(--e-space-5); // This makes scrollbar not run appear over the tiles
+  }
+}
+
+.navigation-panel__label-tiles,
+.navigation-panel__label-info {
+  @include a.type(50, strong);
+
+  color: var(--e-c-mono-700);
+}
+
+.navigation-panel__label-info {
+  margin-bottom: var(--e-space-1);
+}
+
+.navigation-panel__label-tiles {
+  margin-bottom: var(--e-space-2);
+
+  @include a.bp(lg) {
+    @include a.visually-hidden;
+  }
+}
+
+.navigation-panel__info {
+  @include a.type(300, strong);
+
+  margin-bottom: var(--e-space-6);
+
+  @include a.bp(lg) {
+    @include a.type(200, strong);
+
+    margin-bottom: var(--e-space-4);
+  }
+}

package/modules/navigation-panel/u-navigation-panel.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  infoLabel: string
+  tilesLabel: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="navigation-panel">
+    <p class="navigation-panel__label-info">{{ infoLabel }}</p>
+    <div class="navigation-panel__info"><slot name="info"></slot></div>
+
+    <p class="navigation-panel__label-tiles">{{ tilesLabel }}</p>
+    <div class="navigation-panel__tiles">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./navigation-panel.scss"></style>

package/modules/navigation-toolbar-side/navigation-toolbar-side.scss

@@ -19,7 +19,7 @@
     }
 
     .navigation-toolbar-side__nav-links,
-    .navigation-toolbar-side__menu-cta {
+    .navigation-toolbar-side__menu-ctas {
       padding: 0 var(--e-space-0_5);
     }
   }

package/modules/navigation-toolbar-top/navigation-toolbar-top.scss

@@ -45,6 +45,7 @@
   width: 100%;
   height: 100%;
   transform: translate3d(100%, 0, 0);
+  z-index: a.$layer-nav-panel;
 
   .navigation-toolbar-mobile-open & {
     transform: translate3d(0, 0, 0);