@energie360/ui-library 0.1.1 → 0.1.2

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

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
 import { TextFieldTypes } from './text-field.types'
-import { computed, ref, useSlots, useTemplateRef, useId } from 'vue'
-import { translate } from '../../utils/translations/translate'
-
-interface Props {
-  label?: string
-  type: TextFieldTypes
-  required?: boolean
-  disabled?: boolean
-  readonly?: boolean
+import { computed, ref, useSlots, useTemplateRef, useId, watch } from 'vue'
+import { FormFieldBase } from '../form-field/form-field.types'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props extends FormFieldBase {
+  name: string
+  type?: TextFieldTypes
   placeholder?: string
-  error?: boolean
+  readonly?: boolean
   unit?: string
-  helpText?: string
-  errorMessage?: string
 }
 
-let inputId = useId()
+const inputId = useId()
 
 const {
   disabled = false,
@@ -29,12 +25,13 @@ const {
 } = defineProps<Props>()
 
 const slots = useSlots()
+const model = defineModel<string>()
 
 const input = useTemplateRef('input')
 
 const isFocused = ref(false)
 const isHovering = ref(false)
-const hasValue = ref(false)
+const hasValue = ref(false) // only needed for input type 'search'
 const forceFloatLabel = ref(false)
 
 const spacer = '.&nbsp;'
@@ -55,7 +52,7 @@ const onBlur = () => {
 }
 
 const onInput = () => {
-  hasValue.value = input.value.value !== ''
+  hasValue.value = !!input.value && input.value.value !== ''
 }
 
 const onHover = () => {
@@ -80,16 +77,27 @@ const needsHelpTextSpacer = computed(() => {
 
 const onPasswordToggle = () => {
   _inputType.value =
-    _inputType.value === TextFieldTypes.password
-      ? TextFieldTypes.text
-      : TextFieldTypes.password
+    _inputType.value === TextFieldTypes.password ? TextFieldTypes.text : TextFieldTypes.password
 }
 
 const passwordIcon = computed(() => {
-  return _inputType.value === TextFieldTypes.password
-    ? 'password'
-    : 'password-show'
+  return _inputType.value === TextFieldTypes.password ? 'password' : 'password-show'
+})
+
+const passwordA11yText = computed(() => {
+  return _inputType.value === TextFieldTypes.password ? 'showPassword' : 'hidePassword'
 })
+
+watch(
+  () => type,
+  () => {
+    if (type === TextFieldTypes.password) {
+      _inputType.value = TextFieldTypes.password
+    } else {
+      _inputType.value = type
+    }
+  },
+)
 </script>
 
 <template>
@@ -121,32 +129,40 @@ const passwordIcon = computed(() => {
       <div class="control">
         <slot
           ><input
-            ref="input"
             :id="inputId"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
+            ref="input"
+            v-model="model"
+            :name
             :type="_inputType"
             :disabled
             :readonly
             :placeholder
             :required
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
         /></slot>
 
         <div class="control-border"></div>
       </div>
 
       <!-- TYPE: PASSWORD -->
-      <span class="suffix-action" v-if="type === TextFieldTypes.password">
+      <span v-if="type === TextFieldTypes.password" class="suffix-action">
         <button type="button" class="password-toggle" @click="onPasswordToggle">
+          <span class="visually-hidden">{{ getTranslation(passwordA11yText) }}</span>
           <UIcon :name="passwordIcon"></UIcon>
         </button>
       </span>
+
+      <!-- UNIT -->
+      <span v-if="unit" class="suffix-text">
+        {{ unit }}
+      </span>
     </div>
 
     <div class="help-text">
       <span class="optional-text"
-        >{{ translate('common.optional')
+        >{{ getTranslation('optional')
         }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
       ><slot name="helpText">{{ helpText }}</slot>
     </div>

package/elements/text-link/text-link.scss

@@ -0,0 +1,57 @@
+@use '../../base/abstracts' as a;
+
+@mixin text-link {
+  @include a.type(200, strong);
+
+  color: var(--e-c-primary-01-700);
+  text-decoration: underline;
+  text-underline-offset: 0.4em;
+  transition:
+    text-decoration-color a.$trs-default,
+    color a.$trs-default;
+
+  &:hover {
+    text-decoration-color: var(--e-c-primary-01-50);
+  }
+
+  &:active {
+    text-decoration-color: var(--e-c-primary-01-700);
+  }
+}
+
+@mixin text-link--inverted {
+  color: var(--e-c-primary-01-50);
+
+  &:hover {
+    text-decoration-color: var(--e-c-primary-01-200);
+  }
+
+  &:active {
+    text-decoration-color: var(--e-c-primary-01-50);
+  }
+}
+
+@mixin text-link--secondary {
+  text-decoration: none;
+  color: var(--e-c-mono-700);
+
+  &:hover {
+    color: var(--e-c-mono-900);
+  }
+
+  &:active {
+    color: var(--e-c-mono-700);
+  }
+}
+
+.text-link {
+  @include text-link;
+
+  &.inverted {
+    @include text-link--inverted;
+  }
+
+  &.secondary {
+    @include text-link--secondary;
+  }
+}

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

@@ -0,0 +1,40 @@
+@use '../../base/abstracts' as a;
+
+.toggle-switch.toggle-switch--small {
+  --width: 54px;
+  --height: 28px;
+  --handle-size: 24px;
+  --inner-padding: 2px;
+
+  .toggle-switch__wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: var(--e-space-4);
+  }
+
+  .toggle-switch__handle {
+    padding: 0;
+  }
+
+  .toggle-switch__text {
+    @include a.visually-hidden;
+  }
+
+  .toggle-switch__label {
+    @include a.type(200);
+
+    padding-top: var(--e-space-0_5);
+    padding-bottom: var(--e-space-0_5);
+  }
+
+  &.label-left {
+    .toggle-switch__wrapper {
+      flex-direction: row-reverse;
+    }
+
+    .toggle-switch__label {
+      margin-right: auto;
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+@use '../../base/abstracts/' as a;
+@use './toggle-switch-small';
+
+.toggle-switch {
+  --width: 102px;
+  --height: 48px;
+  --handle-size: 40px;
+  --inner-padding: 4px;
+
+  .toggle-switch__wrapper {
+    display: block;
+    position: relative;
+    width: var(--width);
+    min-height: var(--height);
+
+    input {
+      // So that the focus works nicely.
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  .toggle-switch__toggle {
+    display: flex;
+    width: var(--width);
+    height: var(--height);
+    flex: 0 0 auto;
+    align-items: center;
+    position: relative;
+    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);
+  }
+
+  .toggle-switch__handle {
+    position: absolute;
+    padding: a.rem(8);
+    background-color: var(--e-c-mono-00);
+    border-radius: 100%;
+    width: var(--handle-size);
+    height: var(--handle-size);
+    top: var(--inner-padding);
+    left: var(--inner-padding);
+    pointer-events: none;
+    color: var(--e-c-mono-900);
+    transition:
+      transform var(--e-trs-duration-faster) var(--e-trs-easing-default),
+      color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  .toggle-switch__text {
+    @include a.type(200, strong);
+
+    display: block;
+    position: absolute;
+    padding-left: a.rem(8);
+    padding-right: a.rem(8);
+    transition:
+      color var(--e-trs-duration-faster) var(--e-trs-easing-default),
+      opacity var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+    &.yes {
+      left: 16px;
+      opacity: 0;
+    }
+
+    &.no {
+      right: 10px;
+      opacity: 1;
+    }
+  }
+
+  &: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
+  &.checked {
+    .toggle-switch__toggle {
+      background-color: var(--e-c-primary-01-900);
+    }
+
+    .toggle-switch__handle {
+      transform: translateX(calc(var(--width) - var(--handle-size) - var(--inner-padding) * 2));
+      color: var(--e-c-primary-01-900);
+    }
+
+    .toggle-switch__text {
+      color: var(--e-c-mono-00);
+
+      &.yes {
+        opacity: 1;
+      }
+
+      &.no {
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      .toggle-switch__toggle {
+        background-color: var(--e-c-secondary-01-900);
+      }
+
+      .toggle-switch__handle {
+        color: var(--e-c-secondary-01-900);
+      }
+    }
+
+    &:active {
+      .toggle-switch__toggle {
+        background-color: var(--e-c-secondary-01-700);
+      }
+
+      .toggle-switch__handle {
+        color: var(--e-c-secondary-01-700);
+      }
+    }
+  }
+
+  &.disabled,
+  &.disabled.checked {
+    .toggle-switch__handle,
+    .toggle-switch__text {
+      color: var(--e-c-mono-500);
+    }
+
+    .toggle-switch__toggle {
+      background-color: var(--e-c-mono-50);
+    }
+  }
+
+  // // TODO: Do we need readonly styles here?
+  // &.readonly {
+  //   //
+  // }
+}

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UIcon from '../icon/u-icon.vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+export interface ToggleSwitch {
+  name: string
+  label?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  value?: string
+  variant?: 'normal' | 'small'
+  labelPosition?: 'left' | 'right'
+}
+
+const {
+  variant = 'big',
+  labelPosition = 'right',
+  disabled = false,
+  readonly = false,
+  required = false,
+} = defineProps<ToggleSwitch>()
+
+const model = defineModel<boolean>({ default: false })
+
+const iconsMap = {
+  small: ['close-small', 'check-small'],
+  big: ['close', 'mini-check'],
+}
+
+const uncheckIcon = computed(() => iconsMap[variant][0])
+const checkIcon = computed(() => iconsMap[variant][1])
+
+const classes = computed(() => ({
+  checked: model.value,
+  disabled,
+  readonly,
+  [`toggle-switch--${variant}`]: variant,
+  [`label-${labelPosition}`]: labelPosition,
+}))
+</script>
+
+<template>
+  <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__handle">
+          <UIcon :name="model.value ? checkIcon : uncheckIcon" custom-size />
+        </span>
+      </span>
+      {{ label }}
+      <slot name="input"
+        ><input v-model="model" type="checkbox" :name :required :disabled :readonly :value
+      /></slot>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+@use './toggle-switch.scss';
+</style>

package/elements/types.ts

@@ -10,3 +10,10 @@ export interface Image {
   src: string
   alt: string
 }
+
+export interface SelectOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+  selected?: boolean
+}

package/globals.js

@@ -1,4 +1,3 @@
 // A possible idea would be to use a cdn when the package is built.
 // Currently we'll use a fixed path for the assets on dev and prod. This must be made available by the application using ui-library.
-export const assetsPath =
-  import.meta.env.DEV === true ? '/static/ui-assets/' : '/static/ui-assets/'
+export const assetsPath = import.meta.env.DEV === true ? '/static/ui-assets/' : '/static/ui-assets/'

package/helpers/transition-height.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const onEnter = (el) => {
+  el.hidden = false
+  el.style.height = `${el.scrollHeight}px`
+}
+
+const onAfterEnter = (el) => {
+  el.style.height = 'auto'
+}
+
+const onLeave = (el) => {
+  el.style.height = `${el.scrollHeight}px`
+
+  requestAnimationFrame(() => {
+    el.style.height = '0'
+  })
+}
+</script>
+
+<template>
+  <Transition name="fade" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped lang="scss">
+@use '../base/abstracts' as a;
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: height a.$trs-default;
+  overflow: hidden;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  height: 0;
+}
+</style>

package/i18n/i18n.ts

@@ -0,0 +1,40 @@
+const translations = {
+  DE: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+  FR: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+  IT: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+  EN: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+}
+
+export default translations

package/layout/grid/grid.mixin.scss

@@ -6,8 +6,7 @@ Helper to colculate col width in %.
 Looks complicated because we use grid-gap on the row, which takes away from available width.
  */
 @function col-width($size, $columns, $gutter) {
-  @return math.div(100% - (($columns - 1) * $gutter), $columns) * $size +
-    (($size - 1) * $gutter);
+  @return math.div(100% - (($columns - 1) * $gutter), $columns) * $size + (($size - 1) * $gutter);
 }
 
 @mixin grid-row() {
@@ -63,17 +62,11 @@ $columns: Grid size (in columns). Default is set by global variable $grid-column
 }
 
 // TODO: Change args order -> $prop, $indent, $columns
-@mixin grid-col-space(
-  $indent,
-  $columns: a.$grid-columns,
-  $prop: 'margin-left'
-) {
-  #{$prop}: col-width($indent, $columns, a.$grid-gutter-2xl) +
-    a.$grid-gutter-2xl;
+@mixin grid-col-space($indent, $columns: a.$grid-columns, $prop: 'margin-left') {
+  #{$prop}: col-width($indent, $columns, a.$grid-gutter-2xl) + a.$grid-gutter-2xl;
 
   @include a.bp(lg) {
-    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) +
-      a.$grid-gutter-lg;
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) + a.$grid-gutter-lg;
   }
 
   @include a.bp(m) {

package/layout/split/split.scss

@@ -0,0 +1,96 @@
+@use '../../base/abstracts/' as a;
+@use '../container/container.scss' as c;
+
+$split-top-bar-height: 120px;
+$split-top-bar-height-mobile: 72px;
+
+.split {
+  position: relative;
+  padding-left: 50%;
+
+  @include a.bp(lg) {
+    display: grid;
+    padding-left: 0;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 0;
+    grid-template-areas:
+      'fixed content'
+      'footer footer';
+  }
+
+  @include a.bp(m) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.split__fixed {
+  position: fixed;
+  inset: 0 50% 0 0;
+
+  @include a.bp(lg) {
+    position: static;
+    grid-area: fixed;
+  }
+
+  @include a.bp(m) {
+    width: 100%;
+    aspect-ratio: 4/5;
+    order: 3;
+  }
+}
+
+.split__top-bar {
+  height: a.rem($split-top-bar-height);
+
+  @include a.bp(lg) {
+    grid-area: content;
+    height: a.rem($split-top-bar-height-mobile);
+  }
+
+  @include a.bp(m) {
+    order: 1;
+  }
+}
+
+.split__content {
+  padding-top: var(--e-space-20);
+  padding-bottom: var(--e-space-20);
+  margin: 0 auto;
+  width: a.rem(400);
+
+  @include a.bp(lg) {
+    margin-top: a.rem(
+      $split-top-bar-height-mobile
+    ); // Because multiple divs in same area do overlap.
+
+    grid-area: content;
+    width: a.rem(338);
+  }
+
+  @include a.bp(m) {
+    order: 2;
+    width: auto;
+    margin-top: 0;
+    max-width: calc(#{a.rem(338)} + 2 * #{a.rem(a.$container-edge-m)});
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    max-width: calc(#{a.rem(338)} + 2 * #{a.rem(a.$container-edge-s)});
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+.split__footer {
+  @include a.bp(lg) {
+    grid-area: footer;
+  }
+
+  @include a.bp(m) {
+    order: 4;
+  }
+}