@energie360/ui-library 0.0.4 → 0.1.1

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/spectro/spectro.scss

@@ -0,0 +1,13 @@
+.spectro {
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 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>

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

@@ -0,0 +1,30 @@
+@use '../../base/abstracts' as a;
+@use '../form-field' as f;
+
+.text-field {
+  @include f.form-field-base(input);
+  @include f.form-field-states-all(input);
+  @include f.form-field-error;
+  @include f.form-field-suffix-icon;
+  @include f.form-field-prefix-icon;
+
+  .visually-hidden {
+    @include a.visually-hidden;
+  }
+
+  // Type: Password
+  .password-toggle {
+    display: block;
+    border-radius: var(--e-brd-radius-1);
+    color: var(--e-c-primary-01-500);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--e-c-secondary-01-900);
+    }
+
+    &:active {
+      color: var(--e-c-secondary-01-700);
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+export enum TextFieldTypes {
+  text = 'text',
+  number = 'number',
+  email = 'email',
+  password = 'password',
+}

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

@@ -0,0 +1,164 @@
+<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
+  placeholder?: string
+  error?: boolean
+  unit?: string
+  helpText?: string
+  errorMessage?: string
+}
+
+let inputId = useId()
+
+const {
+  disabled = false,
+  readonly = false,
+  required = false,
+  type = TextFieldTypes.text,
+  helpText = '',
+  errorMessage = '',
+} = defineProps<Props>()
+
+const slots = useSlots()
+
+const input = useTemplateRef('input')
+
+const isFocused = ref(false)
+const isHovering = ref(false)
+const hasValue = ref(false)
+const forceFloatLabel = ref(false)
+
+const spacer = '.&nbsp;'
+
+// In some cases we need to change the input type within the component (for example for the password-show behaviour)
+const _inputType = ref(type)
+
+const onFocus = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isFocused.value = true
+}
+
+const onBlur = () => {
+  isFocused.value = false
+}
+
+const onInput = () => {
+  hasValue.value = input.value.value !== ''
+}
+
+const onHover = () => {
+  if (readonly || 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
+})
+
+const onPasswordToggle = () => {
+  _inputType.value =
+    _inputType.value === TextFieldTypes.password
+      ? TextFieldTypes.text
+      : TextFieldTypes.password
+}
+
+const passwordIcon = computed(() => {
+  return _inputType.value === TextFieldTypes.password
+    ? 'password'
+    : 'password-show'
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'text-field',
+      {
+        required,
+        disabled,
+        readonly,
+        focus: isFocused,
+        hover: isHovering,
+        'has-value': hasValue,
+        'float-label': isFocused || hasValue || placeholder || forceFloatLabel,
+        'has-error': error,
+        'show-help-text': !required || hasHelpText,
+      },
+    ]"
+    @mouseenter="onHover"
+    @mouseleave="onHoverOut"
+  >
+    <div class="wrapper">
+      <div class="label">
+        <slot name="label"
+          ><label :for="inputId">{{ label }}</label></slot
+        >
+      </div>
+
+      <div class="control">
+        <slot
+          ><input
+            ref="input"
+            :id="inputId"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            :type="_inputType"
+            :disabled
+            :readonly
+            :placeholder
+            :required
+        /></slot>
+
+        <div class="control-border"></div>
+      </div>
+
+      <!-- TYPE: PASSWORD -->
+      <span class="suffix-action" v-if="type === TextFieldTypes.password">
+        <button type="button" class="password-toggle" @click="onPasswordToggle">
+          <UIcon :name="passwordIcon"></UIcon>
+        </button>
+      </span>
+    </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 scoped lang="scss">
+@use './text-field.scss';
+</style>

package/elements/types.ts

@@ -0,0 +1,12 @@
+// TODO: @Dani if you have a better naming please update it.
+
+export interface Cta {
+  label: string
+  href: string
+  target: string
+}
+
+export interface Image {
+  src: string
+  alt: string
+}

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/layout/container/container.scss

@@ -0,0 +1,30 @@
+@use '../../base/abstracts' as a;
+@use '@energie360/design-tokens/dist/scss' as dt;
+
+// TODO: Move this mixin to abstratcs?
+@mixin grid-container {
+  margin: 0 auto;
+  max-width: a.rem(dt.$layout-site-width);
+  width: 100%;
+  padding-left: a.rem(a.$container-edge-2xl);
+  padding-right: a.rem(a.$container-edge-2xl);
+
+  @include a.bp(lg) {
+    padding-left: a.rem(a.$container-edge-lg);
+    padding-right: a.rem(a.$container-edge-lg);
+  }
+
+  @include a.bp(m) {
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+.container {
+  @include grid-container;
+}

package/layout/grid/grid-row.scss

@@ -0,0 +1,10 @@
+@use 'sass:math';
+@use './grid.mixin' as g;
+
+.row {
+  @include g.grid-row;
+
+  &.row--centered {
+    justify-content: center;
+  }
+}

package/layout/grid/grid.mixin.scss

@@ -0,0 +1,90 @@
+@use 'sass:math';
+@use '../../base/abstracts' as a;
+
+/**
+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);
+}
+
+@mixin grid-row() {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: a.$grid-gutter-2xl;
+
+  @include a.bp(lg) {
+    grid-gap: a.$grid-gutter-lg;
+  }
+
+  @include a.bp(m) {
+    grid-gap: a.$grid-gutter-m;
+  }
+
+  @include a.bp(s) {
+    grid-gap: a.$grid-gutter-s;
+  }
+}
+
+/**
+Mixin to create a grid column cell.
+
+$cols: Column width of cell.
+$columns: Grid size (in columns). Default is set by global variable $grid-columns (defined via design token).
+ */
+@mixin grid-col($cols, $columns: a.$grid-columns) {
+  $width-2xl: col-width($cols, $columns, a.$grid-gutter-2xl);
+
+  flex: 0 0 $width-2xl;
+  max-width: $width-2xl;
+
+  @include a.bp(lg) {
+    $width-lg: col-width($cols, $columns, a.$grid-gutter-lg);
+
+    flex: 0 0 $width-lg;
+    max-width: $width-lg;
+  }
+
+  @include a.bp(m) {
+    $width-m: col-width($cols, $columns, a.$grid-gutter-m);
+
+    flex: 0 0 $width-m;
+    max-width: $width-m;
+  }
+
+  @include a.bp(s) {
+    $width-s: col-width($cols, $columns, a.$grid-gutter-s);
+
+    flex: 0 0 $width-s;
+    max-width: $width-s;
+  }
+}
+
+// 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;
+
+  @include a.bp(lg) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) +
+      a.$grid-gutter-lg;
+  }
+
+  @include a.bp(m) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-m) + a.$grid-gutter-m;
+  }
+
+  @include a.bp(s) {
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-s) + a.$grid-gutter-s;
+  }
+}
+
+@mixin grid-col-indent($indent, $columns: a.$grid-columns) {
+  @include grid-col-space($indent, $columns);
+}

package/layout/grid/grid.scss

@@ -0,0 +1,121 @@
+@use 'sass:math';
+@use '../../base/abstracts' as a;
+@use 'grid.mixin' as *;
+@use 'grid-row';
+
+// These loops create column classes for the breakpoints 2xl, xl, lg, m and s.
+// Obviously it will create classes that will probably never be used (CSS bloat).
+// We could be using only the grid-col mixins.
+// Or also define some commonly used responsive column configurations.
+// We'll have to figure it out...
+@for $i from 1 through a.$grid-columns {
+  .col-#{$i} {
+    @include grid-col($i);
+  }
+
+  @if $i < a.$grid-columns {
+    .col-indent-#{$i} {
+      @include grid-col-indent($i);
+    }
+  }
+}
+
+// For "2xl" breakpoint
+@include a.bp('2xl') {
+  @for $i from 1 through a.$grid-columns {
+    .col-2xl-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if $i < a.$grid-columns {
+      .col-indent-2xl-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint xl
+    .col-indent-2xl-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "xl" breakpoint
+@include a.bp(xl) {
+  @for $i from 1 through a.$grid-columns {
+    .col-xl-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if $i < a.$grid-columns {
+      .col-indent-xl-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint xl
+    .col-indent-xl-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "lg" breakpoint
+@include a.bp(lg) {
+  @for $i from 1 through a.$grid-columns {
+    .col-lg-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if $i < a.$grid-columns {
+      .col-indent-lg-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint lg
+    .col-indent-lg-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "m" breakpoint
+@include a.bp(m) {
+  @for $i from 1 through a.$grid-columns {
+    .col-m-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if $i < a.$grid-columns {
+      .col-indent-m-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint m
+    .col-indent-m-0 {
+      margin-left: 0;
+    }
+  }
+}
+
+// For "s" breakpoint
+@include a.bp(s) {
+  @for $i from 1 through a.$grid-columns {
+    .col-s-#{$i} {
+      @include grid-col($i);
+    }
+
+    @if $i < a.$grid-columns {
+      .col-indent-s-#{$i} {
+        @include grid-col-indent($i);
+      }
+    }
+
+    // To clear indent on breakpoint s
+    .col-indent-s-0 {
+      margin-left: 0;
+    }
+  }
+}

package/package.json

@@ -1,23 +1,34 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "description": "",
   "main": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
+    ".": "./dist/custom-elements.js",
+    "./package.json": "./package.json",
     "./base-style.css": "./dist/base-style.css",
-    "./elements/*": "./elements/*"
+    "./elements": "./elements/index.js",
+    "./elements/*": "./elements/*",
+    "./components": "./components/index.js",
+    "./components/*": "./components/*",
+    "./wizard": "./wizard/index.js",
+    "./wizard/*": "./wizard/*"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.13.4",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
-    "sass": "^1.83.4",
-    "vite": "^6.0.7",
-    "vue": "^3.5.13"
+    "postcss": "^8.5.2",
+    "sass": "^1.85.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.2"
   },
   "dependencies": {
     "@energie360/design-tokens": "^1.1.0"
@@ -25,6 +36,7 @@
   "scripts": {
     "dev": "NODE_ENV=development vite build --watch --mode developement",
     "build": "vite build",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "type-check": "vue-tsc --build"
   }
 }

package/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/{vite.config.js → vite.config.ts}

@@ -10,7 +10,7 @@ export default defineConfig({
     sourcemap: true,
     lib: {
       entry: [
-        resolve(__dirname, 'index.js'),
+        resolve(__dirname, 'custom-elements.js'),
         resolve(__dirname, 'base-style.js'),
       ],
       name: '@energie360/ui-library',

package/wizard/index.js

@@ -0,0 +1,4 @@
+export { default as UWizardIntro } from './wizard-intro/u-wizard-intro.vue'
+export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
+export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
+export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'