@energie360/ui-library 0.1.0 → 0.1.2

package/elements/icon-button/{icon-button.vue → u-icon-button.vue}

@@ -1,23 +1,22 @@
-<script setup>
-import Icon from '../icon/icon.vue'
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
 
-defineProps({
-  label: String,
-  icon: String,
-  variant: String,
-  disabled: Boolean,
-  href: String,
-  target: {
-    type: String,
-    default: '_blank',
-  },
-})
+interface Props {
+  label?: string
+  icon: string
+  variant?: string
+  disabled?: boolean
+  href?: string
+  target?: string
+}
+
+const { target = '_blank', variant = 'filled' } = defineProps<Props>()
 </script>
 
 <template>
   <template v-if="href">
     <a :class="['icon-button', variant]" :href="href" :target="target">
-      <Icon v-if="icon" :name="icon" />
+      <UIcon v-if="icon" :name="icon" />
 
       <span class="visually-hidden">
         <slot>{{ label }}</slot>
@@ -27,7 +26,7 @@ defineProps({
 
   <template v-else>
     <button :class="['icon-button', variant]" :disabled="disabled || null">
-      <Icon v-if="icon" :name="icon" />
+      <UIcon v-if="icon" :name="icon" />
 
       <span class="visually-hidden">
         <slot>{{ label }}</slot>

package/elements/image/image.scss

@@ -0,0 +1,3 @@
+.image {
+  // TODO: migrate `img` element.
+}

package/elements/image/u-image.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Image } from '../types'
+
+// interface Props extends Image {}
+
+defineProps<Image>()
+</script>
+
+<template>
+  <picture>
+    <img class="image" :src :alt />
+  </picture>
+</template>
+
+<style lang="scss" scoped>
+@use './image.scss';
+</style>

package/elements/index.js

@@ -1,33 +1,8 @@
-import { ButtonElement as Button } from './button/button.js'
-import { IconButtonElement as IconButton } from './icon-button/icon-button.js'
-import { IconElement as Icon } from './icon/icon.js'
-import { LoaderElement as Loader } from './loader/loader.js'
-
 /**
- * These exports allow best tree-shaking behaviour.
- * Obviously you'll have to import 'manually' all the elements you need.
- *
- * @example
- * import { IconButton } from '@energie360/ui-library'
- * IconButton.register()
+ * It's not recommended to import components from this file, because tree-shaking won't work then.
+ * -> https://vite.dev/guide/performance#avoid-barrel-files
  */
-export { Button, IconButton, Icon, Loader }
-
-/**
- * With this export you get all the elements. Meaning all the elements will be inlcuded in your bundle, even if you register only one element.
- *
- * @example
- * import { Elements } from '@energie360/ui-library'
- * Elements.Button.register()
- */
-
-/**
- *
- * @type {{IconButton: {register: function(): void}, Button: {register: function(): void}, Loader: {register: function(): void}, Icon: {register: function(): void}}}
- */
-export const Elements = {
-  Button,
-  IconButton,
-  Icon,
-  Loader,
-}
+export { default as UButton } from './button/u-button.vue'
+export { default as UIcon } from './icon/u-icon.vue'
+export { default as UIconButton } from './icon-button/u-icon-button.vue'
+export { default as ULoader } from './loader/u-loader.vue'

package/elements/loader/loader.js

@@ -1,5 +1,5 @@
 import { defineCustomElement } from 'vue'
-import Loader from './loader.vue'
+import Loader from './u-loader.vue'
 import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
 import ceStyles from './loader.ce.scss?inline'
 import styles from './loader.scss?inline'
@@ -8,6 +8,6 @@ Loader.styles = [customElementBaseStyle, ceStyles, styles]
 
 export const LoaderElement = {
   register: () => {
-    customElements.define('e-loader', defineCustomElement(Loader))
+    customElements.define('u-loader', defineCustomElement(Loader))
   },
 }

package/elements/loader/{loader.vue → u-loader.vue}

@@ -1,10 +1,9 @@
-<script setup>
-defineProps({
-  anim: {
-    type: String,
-    default: 'horizontal',
-  },
-})
+<script setup lang="ts">
+interface Props {
+  anim?: string
+}
+
+const { anim = 'horizontal' } = defineProps<Props>()
 </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

@@ -0,0 +1,10 @@
+.spectro {
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  inset: 0;
+}

package/elements/spectro/u-spectro.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="spectro">
+    <div class="inner">
+      <img src="/static/ui-assets/images/spectro.svg" alt="" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './spectro.scss';
+</style>