@energie360/ui-library 0.1.1 → 0.1.3

package/elements/button-chip/button-chip.scss

@@ -0,0 +1,83 @@
+@use '../../base/abstracts' as a;
+
+@mixin button-chip-normal {
+  color: var(--e-c-primary-01-900);
+  background-color: var(--e-c-primary-01-100);
+
+  &:hover {
+    color: var(--e-c-secondary-01-950);
+    background-color: var(--e-c-primary-01-200);
+  }
+
+  &:active {
+    color: var(--e-c-primary-01-900);
+    background-color: var(--e-c-primary-01-100);
+  }
+
+  &:disabled {
+    color: var(--e-c-mono-700);
+    background-color: var(--e-c-mono-200);
+    cursor: not-allowed;
+  }
+}
+
+@mixin button-chip-inverted {
+  color: var(--e-c-mono-00);
+  background-color: var(--e-c-secondary-01-950);
+
+  &:hover {
+    background-color: var(--e-c-secondary-01-1000);
+  }
+
+  &:disabled {
+    color: var(--e-c-mono-700);
+    background-color: var(--e-c-mono-200);
+    cursor: not-allowed;
+  }
+}
+
+@mixin button-chip-minified {
+  &:not(.inverted) {
+    background-color: transparent;
+  }
+
+  padding: a.rem(6);
+
+  .icon {
+    margin-left: 0;
+  }
+
+  .button-chip__label {
+    @include a.visually-hidden;
+  }
+}
+
+.button-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: a.rem(6) a.rem(16);
+  column-gap: a.rem(4);
+  border-radius: 18px;
+  cursor: pointer;
+  transition:
+    background-color a.$trs-default,
+    color a.$trs-default;
+
+  .icon {
+    margin-left: a.rem(-10);
+  }
+
+  @include a.bp(m) {
+    @include button-chip-minified;
+  }
+
+  @include button-chip-normal;
+
+  &.inverted {
+    @include button-chip-inverted;
+  }
+}
+
+.button-chip__label {
+  @include a.type(200, strong);
+}

package/elements/button-chip/u-button-chip.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+
+enum ButtonChipVariant {
+  normal = 'normal',
+  inverted = 'inverted',
+}
+
+interface Props {
+  variant?: ButtonChipVariant
+  label?: string
+  icon?: string
+  disabled?: boolean
+  href?: string
+  target?: string
+}
+
+const { variant = ButtonChipVariant.normal } = defineProps<Props>()
+</script>
+
+<template>
+  <template v-if="href">
+    <a :class="['button-chip', variant]" :href :target>
+      <UIcon v-if="icon" :name="icon"></UIcon>
+
+      <span class="button-chip__label"
+        ><slot>{{ label }}</slot></span
+      >
+    </a>
+  </template>
+
+  <template v-else>
+    <button :class="['button-chip', variant]" :disabled>
+      <UIcon v-if="icon" :name="icon"></UIcon>
+
+      <span class="button-chip__label"
+        ><slot>{{ label }}</slot></span
+      >
+    </button>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use './button-chip.scss';
+</style>

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

@@ -32,7 +32,6 @@
       padding: var(--e-space-3) var(--e-space-4);
       transition: box-shadow a.$trs-default;
       width: 100%;
-      color: transparent;
 
       // This gives the focus-outline also a rounded border.
       border-radius: var(--e-brd-radius-2);
@@ -51,6 +50,7 @@
   }
 
   .control-border {
+    z-index: -1;
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -134,8 +134,7 @@
     .control {
       #{$el} {
         height: a.rem(40);
-        padding: var(--e-space-2) var(--e-space-3) var(--e-space-2)
-          var(--e-space-3);
+        padding: var(--e-space-2) var(--e-space-3) var(--e-space-2) var(--e-space-3);
       }
     }
   }

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

@@ -0,0 +1,8 @@
+export interface FormFieldBase {
+  label?: string
+  required?: boolean
+  disabled?: boolean
+  error?: boolean
+  errorMessage?: string
+  helpText?: string
+}

package/elements/icon/u-icon.vue

@@ -64,9 +64,7 @@ defineProps<Props>()
 <template>
   <svg
     aria-hidden="true"
-    :style="
-      width && height ? { width: width + 'px', height: height + 'px' } : false
-    "
+    :style="width && height ? { width: width + 'px', height: height + 'px' } : false"
     :class="['icon', { 'icon-inline': inline }]"
     v-html="getIcon(name)"
   ></svg>

package/elements/image/u-image.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Image } from '../types'
 
-interface Props extends Image {}
+// interface Props extends Image {}
 
-defineProps<Props>()
+defineProps<Image>()
 </script>
 
 <template>

package/elements/numeric-stepper/numeric-stepper.scss

@@ -0,0 +1,110 @@
+@use '../../base/abstracts' as a;
+
+.numeric-stepper {
+  display: flex;
+  width: a.rem(186);
+  height: a.rem(58);
+  padding: var(--e-space-2);
+  background-color: var(--e-c-mono-00);
+  box-shadow: var(--e-elevation-md);
+  border-radius: a.rem(28);
+  border: 1px solid var(--e-c-mono-100);
+  gap: var(--e-space-2);
+
+  // States
+  &.is-hovering,
+  &.is-focused {
+    .control {
+      border: 2px solid var(--e-c-primary-01-900);
+    }
+  }
+
+  &.readonly {
+    .control {
+      background-color: var(--e-c-mono-50);
+    }
+  }
+
+  &.disabled {
+    .control input {
+      color: var(--e-c-mono-500);
+    }
+  }
+
+  &.has-error {
+    .control {
+      border: 2px solid var(--e-c-signal-03-700);
+    }
+
+    ~ .error-message-container {
+      display: block;
+    }
+  }
+}
+
+.control {
+  order: 2;
+  border: 2px solid transparent;
+  border-radius: var(--e-brd-radius-1);
+  width: a.rem(74);
+  height: a.rem(40);
+  transition: border var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  input {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: var(--e-c-mono-900);
+    border-radius: var(--e-brd-radius-1);
+  }
+}
+
+.stepper-button {
+  display: flex;
+  width: a.rem(40);
+  height: a.rem(40);
+  border-radius: 100%;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  color: var(--e-c-mono-900);
+  transition:
+    background-color var(--e-trs-duration-faster) var(--e-trs-easing-default),
+    color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  &:hover {
+    background-color: var(--e-c-primary-01-50);
+    color: var(--e-c-primary-01-700);
+  }
+
+  &:active {
+    background-color: var(--e-c-primary-01-100);
+    color: var(--e-c-primary-01-700);
+  }
+
+  &:disabled {
+    color: var(--e-c-mono-500);
+    background-color: transparent;
+  }
+
+  &.dec {
+    order: 1;
+  }
+
+  &.inc {
+    order: 3;
+  }
+}
+
+.error-message-container {
+  @include a.type(50);
+
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
+}
+
+.visually-hidden {
+  @include a.visually-hidden;
+}

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

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import { computed, ref, useTemplateRef, useId, nextTick } from 'vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  label?: string
+  value?: string | number
+  name: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: boolean
+  errorMessage?: string
+  min?: number | string
+  max?: number | string
+  step?: number | string
+}
+
+const {
+  label = '',
+  disabled = false,
+  readonly = false,
+  min = '',
+  max = '',
+  step = '1',
+  error = false,
+} = defineProps<Props>()
+
+const cId = `numeric-stepper-${useId()}`
+
+const model = defineModel<string | number>()
+
+const input = useTemplateRef('input')
+
+const isFocused = ref(false)
+const isHovering = ref(false)
+const isMax = ref(false)
+const isMin = ref(false)
+
+const classes = computed(() => ({
+  'is-focused': isFocused.value,
+  'is-hovering': isHovering.value,
+  'has-error': error,
+  disabled,
+  readonly,
+}))
+
+const onHover = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isHovering.value = true
+}
+const onHoverOut = () => {
+  isHovering.value = false
+}
+
+const onStepDown = () => {
+  model.value = (Number(model.value) - Number(step)).toString()
+  nextTick(() => {
+    input.value?.dispatchEvent(new Event('input'))
+  })
+}
+
+const onStepUp = () => {
+  model.value = (Number(model.value) + Number(step)).toString()
+
+  nextTick(() => {
+    input.value?.dispatchEvent(new Event('input'))
+  })
+}
+
+const onInput = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+
+  if (min !== '') {
+    isMin.value = Number(model.value) <= Number(min)
+  }
+
+  if (max !== '') {
+    isMax.value = Number(model.value) >= Number(max)
+  }
+}
+
+const stepButtonUpDisabled = computed(() => disabled || readonly || isMax.value)
+const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.value)
+</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
+          :id="cId"
+          ref="input"
+          v-model="model"
+          type="number"
+          :name
+          :min
+          :max
+          :step
+          @input="onInput"
+      /></slot>
+    </div>
+
+    <button
+      ref="stepDownButton"
+      class="stepper-button dec"
+      :aria-disabled="stepButtonDownDisabled ? 'true' : 'false'"
+      :disabled="stepButtonDownDisabled"
+      @click="onStepDown"
+    >
+      <span class="visually-hidden">{{ getTranslation('decreaseValue') }}</span>
+      <UIcon name="remove"></UIcon>
+    </button>
+
+    <button
+      ref="stepUpButton"
+      class="stepper-button inc"
+      :aria-disabled="stepButtonUpDisabled ? 'true' : 'false'"
+      :disabled="stepButtonUpDisabled"
+      @click="onStepUp"
+    >
+      <span class="visually-hidden">{{ getTranslation('increaseValue') }}</span>
+      <UIcon name="add"></UIcon>
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './numeric-stepper.scss';
+</style>

package/elements/select/select.scss

@@ -0,0 +1,32 @@
+@use '../../base/abstracts' as a;
+@use '../form-field' as f;
+
+.select {
+  @include f.form-field-base(select);
+  @include f.form-field-states-all(select);
+  @include f.form-field-error;
+
+  .control {
+    &::after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      top: 50%;
+      right: var(--e-space-4);
+      width: a.rem(16);
+      height: a.rem(16);
+      transform: translateY(-50%);
+
+      // TODO: find a better solution for this.
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.06 5.53 8 8.583 4.94 5.53 4 6.47l4 4 4-4-.94-.94Z' fill='%23333'/%3E%3C/svg%3E");
+    }
+
+    select {
+      padding-right: var(--e-space-12);
+
+      &:invalid {
+        color: var(--e-c-mono-700);
+      }
+    }
+  }
+}

package/elements/select/u-select.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { FormFieldBase } from '../form-field/form-field.types'
+import { computed, ref, useId, useSlots } from 'vue'
+import { SelectOption } from '../types'
+import { translate } from '../../utils/translations/translate'
+
+interface Props extends FormFieldBase {
+  name: string
+  options: SelectOption[]
+}
+
+const model = defineModel<string>()
+
+const {
+  disabled = false,
+  required = false,
+  helpText = '',
+  errorMessage = '',
+} = defineProps<Props>()
+
+const slots = useSlots()
+const selectId = useId()
+
+const isFocused = ref(false)
+const isHovering = ref(false)
+
+const spacer = '.&nbsp;'
+
+const onFocus = () => {
+  if (disabled) {
+    return
+  }
+
+  isFocused.value = true
+}
+
+const onBlur = () => {
+  isFocused.value = false
+}
+
+const onHover = () => {
+  if (disabled) {
+    return
+  }
+
+  isHovering.value = true
+}
+
+const onHoverOut = () => {
+  isHovering.value = false
+}
+
+const hasHelpText = computed(() => {
+  return !!helpText || !!slots.helpText || required
+})
+
+const needsHelpTextSpacer = computed(() => {
+  return !!helpText || !!slots.helpText
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'select',
+      {
+        required,
+        disabled,
+        focus: isFocused,
+        hover: isHovering,
+        'float-label': true,
+        'has-error': error,
+        'show-help-text': !required || hasHelpText,
+      },
+    ]"
+    @mouseenter="onHover"
+    @mouseleave="onHoverOut"
+  >
+    <div class="wrapper">
+      <div class="label">
+        <label :for="selectId">
+          <slot name="label">{{ label }}</slot>
+        </label>
+      </div>
+
+      <div class="control">
+        <slot>
+          <select
+            :id="selectId"
+            v-model="model"
+            :disabled
+            :required
+            :name
+            @focus="onFocus"
+            @blur="onBlur"
+          >
+            <option
+              v-for="(option, idx) in options"
+              :key="idx"
+              :value="option.value"
+              :disabled="option.disabled"
+              :selected="option.selected"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </slot>
+
+        <div class="control-border"></div>
+      </div>
+    </div>
+
+    <div class="help-text">
+      <span class="optional-text"
+        >{{ translate('common.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
+      >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './select.scss';
+</style>

package/elements/select-chip/select-chip.scss

@@ -0,0 +1,18 @@
+@use '../../base/abstracts' as a;
+@use '../button/button';
+
+.select-chip {
+  display: inline-flex;
+}
+
+.select-chip__button {
+  text-align: left;
+  width: 100%;
+
+  input {
+    // So that the focus works nicely.
+    position: absolute;
+    inset: 0;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import { computed, inject, useId, watch } from 'vue'
+
+interface Props {
+  name: string
+  label?: string
+  disabled?: boolean
+  value?: string
+}
+const { name, disabled = false, value = '' } = defineProps<Props>()
+const cId = useId()
+
+const model = defineModel<boolean>({ default: false })
+
+const { activeSelectChip, updateActiveSelectChip } = inject('select-chip-group', {})
+
+const onChange = () => {
+  if (updateActiveSelectChip) {
+    updateActiveSelectChip(cId)
+  }
+}
+
+if (activeSelectChip) {
+  watch(activeSelectChip, (newV) => {
+    if (newV !== cId) {
+      model.value = false
+    }
+  })
+}
+
+const classes = computed(() => (disabled ? 'disabled' : model.value ? 'filled' : 'outlined'))
+</script>
+
+<template>
+  <div class="select-chip">
+    <label :class="classes" class="select-chip__button button">
+      <UIcon v-if="model" name="mini-check"></UIcon>
+      {{ label }}
+
+      <slot>
+        <input v-model="model" type="radio" :name :value :disabled @change="onChange" />
+      </slot>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+@use './select-chip.scss';
+</style>

package/elements/select-chips/select-chips.scss

@@ -0,0 +1,5 @@
+.select-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--e-space-6);
+}

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+
+const activeSelectChip = ref(null)
+const updateActiveSelectChip = (id: string): void => {
+  activeSelectChip.value = id
+}
+
+provide('select-chip-group', {
+  activeSelectChip,
+  updateActiveSelectChip,
+})
+</script>
+
+<template>
+  <div class="select-chips">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@use './select-chips.scss';
+</style>

package/elements/spectro/spectro.scss

@@ -6,8 +6,5 @@
 
 .inner {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }