@energie360/ui-library 0.1.17 → 0.1.19

package/elements/button/button.scss

@@ -4,6 +4,7 @@
 @use 'button-plain' as *;
 @use 'button-plain-spaceless' as *;
 @use 'button-plain-small' as *;
+@use 'button-plain-small-spaceless' as *;
 @use 'button-filled-inverted' as *;
 @use 'button-outlined-inverted' as *;
 @use 'button-secondary-outlined' as *;
@@ -41,6 +42,10 @@
     @include button-plain-small;
   }
 
+  &.plain-small-spaceless {
+    @include button-plain-small-spaceless;
+  }
+
   &.filled-inverted {
     @include button-filled-inverted;
   }
@@ -70,4 +75,31 @@
       --icon-fill-color: transparent;
     }
   }
+
+  // Modifiers
+  &.nowrap {
+    white-space: nowrap;
+  }
+
+  // In some cases we need to force full width of a button.
+  // Is mostly the case when the button is wrapped by another element.
+  &.full-width {
+    width: 100%;
+  }
+
+  &.hide-label-lg {
+    @include a.bp(lg) {
+      .button__label {
+        @include a.visually-hidden;
+      }
+    }
+  }
+
+  &.hide-label-m {
+    @include a.bp(m) {
+      .button__label {
+        @include a.visually-hidden;
+      }
+    }
+  }
 }

package/elements/button/u-button.vue

@@ -12,6 +12,10 @@ interface ButtonProps {
   target?: string
   variant?: string
   asSpan?: boolean
+  nowrap?: boolean
+  fullWidth?: boolean
+  hideLabelM?: boolean
+  hideLabelLg?: boolean
 }
 
 const { asSpan = false } = defineProps<ButtonProps>()
@@ -21,20 +25,59 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
 
 <template>
   <template v-if="href">
-    <a :class="['button', variant]" :href :target>
+    <a
+      :class="[
+        'button',
+        variant,
+        {
+          nowrap,
+          'full-width': fullWidth,
+          'hide-label-m': hideLabelM,
+          'hide-label-lg': hideLabelLg,
+        },
+      ]"
+      :href
+      :target
+      v-bind="$attrs"
+    >
       <UIcon v-if="icon" :name="icon"></UIcon>
-      <slot>{{ label }}</slot>
+
+      <span v-if="hideLabelM || hideLabelLg" class="button__label">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <template v-else>
+        <slot>{{ label }}</slot>
+      </template>
     </a>
   </template>
 
   <template v-else>
     <component
       :is="buttonTag"
-      :class="['button', variant, { loading: loading, disabled }]"
+      :class="[
+        'button',
+        variant,
+        {
+          nowrap,
+          'full-width': fullWidth,
+          'hide-label-m': hideLabelM,
+          'hide-label-lg': hideLabelLg,
+          loading: loading,
+          disabled,
+        },
+      ]"
       :disabled="disabled || null"
     >
       <UIcon v-if="icon" :name="icon" />
-      <slot>{{ label }}</slot>
+
+      <span v-if="hideLabelM || hideLabelLg" class="button__label">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <template v-else>
+        <slot>{{ label }}</slot>
+      </template>
 
       <span v-if="loading" class="button__loader">
         <ULoader />

package/elements/form-field/form-field-base.scss

@@ -23,6 +23,10 @@
       font-size a.$trs-default,
       color a.$trs-default,
       line-height a.$trs-default;
+    white-space: nowrap;
+    max-width: calc(100% - var(--e-space-6));
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .control {

package/elements/numeric-stepper/u-numeric-stepper.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
-import { computed, ref, useTemplateRef, useId, nextTick } from 'vue'
+import { computed, ref, useTemplateRef, useId, nextTick, onMounted } from 'vue'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
@@ -29,6 +29,7 @@ const {
 const cId = `numeric-stepper-${useId()}`
 
 const model = defineModel<string | number>()
+const emit = defineEmits(['input', 'focus', 'focusout'])
 
 const input = useTemplateRef('input')
 
@@ -57,24 +58,24 @@ const onHoverOut = () => {
 }
 
 const onStepDown = () => {
-  model.value = (Number(model.value) - Number(step)).toString()
+  input.value.stepDown()
+  model.value = Number(input.value.value)
+
   nextTick(() => {
-    input.value?.dispatchEvent(new Event('input'))
+    onInput()
   })
 }
 
 const onStepUp = () => {
-  model.value = (Number(model.value) + Number(step)).toString()
+  input.value.stepUp()
+  model.value = Number(input.value.value)
 
   nextTick(() => {
-    input.value?.dispatchEvent(new Event('input'))
+    onInput()
   })
 }
 
-const onInput = (e) => {
-  e.preventDefault()
-  e.stopPropagation()
-
+const checkMinMax = () => {
   if (min !== '') {
     isMin.value = Number(model.value) <= Number(min)
   }
@@ -84,16 +85,28 @@ const onInput = (e) => {
   }
 }
 
+const onInput = () => {
+  checkMinMax()
+
+  // Is this necessary?
+  // If we use v-model this wouldn't be needed.
+  emit('input', model.value)
+}
+
 const stepButtonUpDisabled = computed(() => disabled || readonly || isMax.value)
 const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.value)
+
+onMounted(() => {
+  checkMinMax()
+})
 </script>
 
 <template>
   <div :class="['numeric-stepper', classes]" @mouseenter="onHover" @mouseleave="onHoverOut">
     <label class="visually-hidden" :for="cId">{{ label }}</label>
     <div class="control">
-      <slot name="input"
-        ><input
+      <slot name="input">
+        <input
           :id="cId"
           ref="input"
           v-model="model"
@@ -102,8 +115,12 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
           :min
           :max
           :step
+          v-bind="$attrs"
+          @focus="$emit('focus', $event)"
+          @focusout="$emit('focusout', $event)"
           @input="onInput"
-      /></slot>
+        />
+      </slot>
     </div>
 
     <button
@@ -128,6 +145,12 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
       <UIcon name="add"></UIcon>
     </button>
   </div>
+
+  <div class="error-message-container">
+    <slot name="error-message">
+      {{ errorMessage }}
+    </slot>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/elements/select/u-select.vue

@@ -51,7 +51,7 @@ const onHoverOut = () => {
 }
 
 const hasHelpText = computed(() => {
-  return !!helpText || !!slots.helpText || required
+  return !!helpText || !!slots.helpText || !required
 })
 
 const needsHelpTextSpacer = computed(() => {
@@ -70,7 +70,7 @@ const needsHelpTextSpacer = computed(() => {
         hover: isHovering,
         'float-label': true,
         'has-error': error,
-        'show-help-text': !required || hasHelpText,
+        'show-help-text': hasHelpText,
       },
     ]"
     @mouseenter="onHover"
@@ -111,10 +111,10 @@ const needsHelpTextSpacer = computed(() => {
     </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">

package/elements/text-field/text-field.scss

@@ -28,4 +28,19 @@
       color: var(--e-c-secondary-01-700);
     }
   }
+
+  // Type: Search
+  .cancel-search {
+    display: block;
+    border-radius: var(--e-brd-radius-1);
+    color: var(--e-c-primary-01-900);
+    visibility: hidden;
+    pointer-events: none;
+
+    &.visible {
+      visibility: visible;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+  }
 }

package/elements/text-field/text-field.types.ts

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

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
 import { TextFieldTypes } from './text-field.types'
-import { computed, ref, useSlots, useTemplateRef, useId, watch } from 'vue'
+import { computed, ref, useId, useSlots, useTemplateRef, watch } from 'vue'
 import { FormFieldBase } from '../form-field/form-field.types'
 import { getTranslation } from '../../utils/translations/translate'
 
@@ -95,6 +95,10 @@ const passwordA11yText = computed(() => {
   return _inputType.value === TextFieldTypes.password ? 'showPassword' : 'hidePassword'
 })
 
+const onCancelSearch = () => {
+  model.value = ''
+}
+
 watch(
   () => type,
   () => {
@@ -165,16 +169,33 @@ watch(
         </button>
       </span>
 
+      <!-- TYPE: DATE -->
+      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
+        <UIcon name="calendar" />
+      </span>
+
+      <!-- TYPE: SEARCH -->
+      <span v-if="type === TextFieldTypes.search" class="prefix-icon">
+        <UIcon name="search" />
+      </span>
+
+      <span v-if="type === TextFieldTypes.search" class="suffix-action">
+        <button
+          type="button"
+          :class="['cancel-search', { visible: hasValue && (isHovering || isFocused) }]"
+          tabindex="-1"
+          @click="onCancelSearch"
+        >
+          <span class="visually-hidden">{{ getTranslation('cancelSearch') }}</span>
+          <UIcon name="close-circle-filled"></UIcon>
+        </button>
+      </span>
+
       <!-- UNIT -->
       <span v-if="unit" class="suffix-text">
         {{ unit }}
       </span>
 
-      <!-- DATE -->
-      <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>

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,16 @@ 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',
+    like: 'Gefällt mir',
+    dislike: 'Gefällt mir nicht',
   },
   FR: {
     yes: 'Ja',
@@ -28,6 +38,16 @@ 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',
+    like: "J'aime ça",
+    dislike: "je ne l'aime pas",
   },
   IT: {
     yes: 'Ja',
@@ -43,6 +63,16 @@ 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',
+    like: 'Mi piace',
+    dislike: 'Non mi piace',
   },
   EN: {
     yes: 'Ja',
@@ -58,6 +88,16 @@ 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',
+    like: 'I like it',
+    dislike: 'I do not like it',
   },
 }
 

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

@@ -1,2 +1,5 @@
-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'
+export { default as UResponsiveContainer } from './responsive-container/u-responsive-container.vue'
+export { default as UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'