@energie360/ui-library 0.1.15 → 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/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,6 +122,7 @@ watch(
         'has-error': error,
         'show-help-text': hasHelpText,
       },
+      type,
     ]"
     @mouseenter="onHover"
     @mouseleave="onHoverOut"
@@ -145,6 +146,7 @@ watch(
             :readonly
             :placeholder
             :required
+            v-bind="$attrs"
             @input="onInput"
             @focus="onFocus"
             @focusout="$emit('focusout', $event.target)"

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

@@ -4,3 +4,6 @@ export { default as UInlineEditGroup } from './inline-edit-group/u-inline-edit-g
 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

@@ -59,6 +59,7 @@
 
   @include a.bp(lg) {
     @include a.type(200, strong);
+
     margin-bottom: var(--e-space-4);
   }
 }

package/modules/progress-indicator/progress-indicator.scss

@@ -0,0 +1,84 @@
+@use '../../base/abstracts/' as a;
+
+.progress-indicator {
+  progress[value]::-webkit-progress-bar {
+    width: 100%;
+    height: 6px;
+    background-color: var(--e-c-mono-100);
+    transition: width 300ms ease;
+  }
+
+  progress[value]::-webkit-progress-value {
+    width: 0;
+    background-color: var(--e-c-primary-01-500);
+    transition: width a.$trs-default;
+  }
+
+  &.rounded {
+    border-radius: 3px;
+    overflow: hidden;
+
+    .progress-indicator__segment {
+      position: relative;
+      border: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 6px;
+        left: 3px;
+        box-shadow: -6px 0 0 0 var(--e-c-mono-00);
+        border-radius: 3px;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 6px;
+        right: 3px;
+        box-shadow: 6px 0 0 0 var(--e-c-mono-00);
+        border-radius: 3px;
+      }
+
+      &:first-of-type::before {
+        content: none;
+      }
+
+      &:last-of-type {
+        content: none;
+      }
+    }
+  }
+}
+
+.progress-indicator__main-track {
+  position: relative;
+  display: flex;
+  height: 6px;
+  width: 100%;
+}
+
+.progress-indicator__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  appearance: none;
+}
+
+.progress-indicator__segment {
+  position: relative;
+  flex: 1 0 auto;
+  border-right: 4px solid var(--e-c-mono-00);
+  border-left: 4px solid var(--e-c-mono-00);
+
+  &:first-of-type {
+    border-left: 0;
+  }
+
+  &:last-of-type {
+    border-right: 0;
+  }
+}

package/modules/progress-indicator/u-progress-indicator.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  index: number
+  steps: number[]
+  rounded?: boolean
+}
+
+const { steps, rounded = false } = defineProps<Props>()
+
+const totalSteps = computed(() => steps.reduce((acc, val) => (acc += val), 0))
+
+const getSegmentWidth = (steps: number) => (100 / totalSteps.value) * steps
+</script>
+
+<template>
+  <div :class="['progress-indicator', { rounded }]">
+    <div class="progress-indicator__main-track">
+      <progress class="progress-indicator__progress" :max="totalSteps" :value="index"></progress>
+
+      <div
+        v-for="(segment, idx) in steps"
+        :key="idx"
+        class="progress-indicator__segment"
+        :style="{
+          width: `${getSegmentWidth(segment)}%`,
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./progress-indicator.scss"></style>

package/modules/toast/toast-message.scss

@@ -0,0 +1,67 @@
+@use '../../base/abstracts' as a;
+
+.toast-message {
+  pointer-events: auto;
+
+  .toast-message__inner {
+    @include a.type(100, strong);
+
+    position: relative;
+    max-width: a.rem(405);
+    padding: var(--e-space-4) var(--e-space-14);
+    border-radius: var(--e-space-2);
+    color: var(--e-c-mono-00);
+  }
+
+  .toast-message__icon {
+    position: absolute;
+    top: 50%;
+    left: var(--e-space-4);
+    transform: translateY(-50%);
+  }
+
+  .toast-message__close-button {
+    position: absolute;
+    color: var(--e-c-mono-00);
+    right: var(--e-space-4);
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  // Modifiers
+  &.success {
+    .toast-message__icon {
+      color: var(--e-c-signal-01-500);
+    }
+
+    .toast-message__inner {
+      background-color: var(--e-c-signal-01-700);
+    }
+  }
+
+  &.error {
+    .toast-message__icon {
+      color: var(--e-c-signal-03-500);
+    }
+
+    .toast-message__inner {
+      background-color: var(--e-c-signal-03-700);
+    }
+  }
+
+  // Animations
+  &.fade-in {
+    animation-name: fade-in-message;
+    animation-duration: var(--e-trs-duration-faster);
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+  }
+
+  &.toast-message--fade-out {
+    animation-name: fade-out-message;
+    animation-duration: var(--e-trs-duration-faster);
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+  }
+}

package/modules/toast/toast.scss

@@ -0,0 +1,14 @@
+@use '../../base/abstracts' as a;
+
+.toast {
+  z-index: a.$layer-message;
+  position: fixed;
+  bottom: var(--e-space-6);
+  left: 0;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  width: 100%;
+  grid-gap: var(--e-space-4);
+  pointer-events: none;
+}