@energie360/ui-library 0.1.17 → 0.1.18

package/components/file-upload/u-file-list.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { UIconButton } from '../../elements'
+
+interface FileItem {
+  filename: string
+  lastModified: number
+  name: string
+  size: string
+  ext: string
+  error: boolean
+  errorMessage?: string
+}
+
+interface Props {
+  items: FileItem[]
+}
+
+defineProps<Props>()
+defineEmits(['remove-error', 'remove-file'])
+</script>
+
+<template>
+  <TransitionGroup name="list" tag="ul">
+    <li v-for="(item, idx) in items" :key="idx" :class="['file-list__item', { error: item.error }]">
+      <div class="file-list__item-content">
+        <p>
+          <span class="file-list__item-name">{{ item.name }}</span>
+          <span>{{ item.size }} &middot; {{ item.ext }}</span>
+        </p>
+
+        <p v-if="item.error && item.errorMessage" class="file-list__item-error">
+          {{ item.errorMessage }}
+        </p>
+      </div>
+
+      <div class="file-list__file-cta">
+        <UIconButton
+          v-if="item.error"
+          variant="plain"
+          icon="close"
+          @click="$emit('remove-error', item.filename, item.lastModified)"
+        />
+
+        <UIconButton
+          v-else
+          variant="plain"
+          icon="delete"
+          @click="$emit('remove-file', item.filename, item.lastModified)"
+        />
+      </div>
+    </li>
+  </TransitionGroup>
+</template>
+
+<style scoped lang="scss" src="./file-list.scss"></style>

package/components/file-upload/u-file-upload.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import UFileList from './u-file-list.vue'
+import { UButton, UIcon } from '../../elements'
+import { formatBytes } from '../../utils/functions/format-bytes'
+import { getTranslation } from '../../utils/translations/translate'
+import { mimeTypes } from '../../utils/global/mime-types'
+import { intersect } from '../../utils/array/intersect'
+import { ref, computed, useTemplateRef, useId } from 'vue'
+
+interface Props {
+  accept?: string[]
+  maxFileSize?: number
+  maxFiles?: number
+}
+
+const { accept = [], maxFileSize = 1024 * 1024, maxFiles = 0 } = defineProps<Props>()
+
+const getFilename = (filename: string) => filename.substring(0, filename.lastIndexOf('.'))
+const getExtension = (filename: string) => filename.slice(filename.lastIndexOf('.') + 1)
+
+const inputId = `file-upload-${useId()}`
+const dragover = ref(false)
+const uploadDisabled = ref(false)
+const maxFileCountError = ref(false)
+const fileExtensions = computed(() => accept.map((ext) => ext.toUpperCase()).join(', '))
+const acceptStr = computed(() => accept.map((ext) => `.${ext}`).join(','))
+const input = useTemplateRef('input')
+const currentFiles = ref([])
+const declinedFiles = ref([])
+
+const displayItems = computed(() => {
+  return [
+    ...currentFiles.value.map((file) => ({
+      name: getFilename(file.name),
+      size: formatBytes(file.size),
+      ext: getExtension(file.name),
+      lastModified: file.lastModified,
+      filename: file.name,
+      error: false,
+    })),
+    ...declinedFiles.value.map((file) => ({
+      name: getFilename(file.name),
+      size: formatBytes(file.size),
+      ext: getExtension(file.name),
+      lastModified: file.lastModified,
+      filename: file.name,
+      error: true,
+      errorMessage:
+        file.size > maxFileSize
+          ? getTranslation('fileTooLarge')
+          : getTranslation('incorrectFileFormat'),
+    })),
+  ]
+})
+
+const arrayToFileList = (files: []): FileList => {
+  const dt = new DataTransfer()
+
+  files.forEach((file) => {
+    dt.items.add(file)
+  })
+
+  return dt.files
+}
+
+const handleFiles = (files: FileList) => {
+  if (!files.length) {
+    return
+  }
+
+  const acceptedFiles = []
+  for (const file of files) {
+    if (
+      accept.length === 0 ||
+      (intersect(mimeTypes[file.type] || [], accept).length && file.size <= maxFileSize)
+    ) {
+      acceptedFiles.push(file)
+    } else {
+      declinedFiles.value.push(file)
+    }
+  }
+
+  if (maxFiles && currentFiles.value.length + acceptedFiles.length > maxFiles) {
+    maxFileCountError.value = true
+    // Too many files are being added.
+    return
+  }
+
+  currentFiles.value.push(...acceptedFiles)
+  maxFileCountError.value = false
+
+  input.value.files = arrayToFileList(currentFiles.value)
+
+  checkMaxFiles()
+}
+
+const checkMaxFiles = () => {
+  if (maxFiles && currentFiles.value.length === maxFiles) {
+    uploadDisabled.value = true
+  }
+
+  if (maxFiles && currentFiles.value.length < maxFiles) {
+    uploadDisabled.value = false
+    maxFileCountError.value = false
+  }
+}
+
+// Event handlers
+const onDrop = (e: DragEvent) => {
+  if (uploadDisabled.value) {
+    return
+  }
+
+  dragover.value = false
+
+  handleFiles(e.dataTransfer.files)
+}
+
+const onAddFiles = () => {
+  handleFiles(input.value.files)
+}
+
+const onDragenter = () => {
+  if (uploadDisabled.value) {
+    return
+  }
+
+  dragover.value = true
+}
+
+const onDragleave = () => {
+  dragover.value = false
+}
+
+const onRemoveFile = (filename: string, lastModified: number) => {
+  currentFiles.value = currentFiles.value.filter(
+    (file) => file.name !== filename || file.lastModified !== lastModified,
+  )
+
+  input.value.files = arrayToFileList(currentFiles.value)
+
+  checkMaxFiles()
+}
+
+const onRemoveError = (filename: string, lastModified: number) => {
+  declinedFiles.value = declinedFiles.value.filter(
+    (file) => file.name !== filename || file.lastModified !== lastModified,
+  )
+}
+</script>
+
+<template>
+  <div class="file-upload">
+    <div
+      :class="['file-upload__drop-zone', { dragover, disabled: uploadDisabled }]"
+      @drop.prevent="onDrop"
+      @dragover.prevent
+      @dragenter.prevent.stop="onDragenter"
+      @dragleave.prevent.stop="onDragleave"
+    >
+      <input
+        :id="inputId"
+        v-bind="$attrs"
+        ref="input"
+        class="file-upload__control"
+        :disabled="uploadDisabled"
+        type="file"
+        :accept="acceptStr"
+        multiple
+        @change="onAddFiles"
+      />
+
+      <div v-if="dragover" class="file-upload__drop-zone-inner-drag">
+        <img src="/static/ui-assets/images/doc-upload-inverted.svg" alt="" />
+      </div>
+
+      <div class="file-upload__drop-zone-inner">
+        <img
+          v-if="uploadDisabled"
+          class="no-select"
+          src="/static/ui-assets/images/doc-upload-disabled.svg"
+          alt=""
+        />
+        <img v-else class="no-select" src="/static/ui-assets/images/doc-upload.svg" alt="" />
+        <p class="no-select type-300-strong label">
+          {{ getTranslation('dragFileHereOr') }}
+        </p>
+
+        <label :for="inputId">
+          <UButton variant="outlined" as-span :disabled="uploadDisabled">
+            {{ getTranslation('chooseFile') }}
+          </UButton>
+        </label>
+
+        <p class="no-select type-100 size">
+          {{ getTranslation('maxSizePerFile', { $SIZE: formatBytes(maxFileSize) }) }}
+          <span v-if="accept.length" class="ext">
+            <span class="middot">&middot;</span>
+            {{ fileExtensions }}
+          </span>
+        </p>
+      </div>
+    </div>
+
+    <div v-if="displayItems.length" class="file-upload__file-list">
+      <UFileList
+        v-if="displayItems.length"
+        :items="displayItems"
+        @remove-file="onRemoveFile"
+        @remove-error="onRemoveError"
+      />
+    </div>
+
+    <div v-if="maxFileCountError" class="file-upload__max-files-error">
+      <UIcon name="report" /> {{ getTranslation('maxFileCountAllowed', { $COUNT: 4 }) }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./file-upload.scss"></style>

package/components/hint/hint.scss

@@ -1,3 +1,5 @@
+// TODO: Styles are a total mess. Clean up!
+
 @use '../../base/abstracts' as a;
 @use '../../elements/text-link/text-link.scss' as t;
 
@@ -10,6 +12,14 @@
       background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
     }
 
+    .hint__richtext {
+      margin-left: var(--e-space-9);
+
+      @include a.bp(lg) {
+        margin-left: 0;
+      }
+    }
+
     // override some richtext styles.
     .richtext {
       a {
@@ -32,6 +42,14 @@
       background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
     }
 
+    .hint__richtext {
+      margin-left: var(--e-space-9);
+
+      @include a.bp(lg) {
+        margin-left: 0;
+      }
+    }
+
     // override some richtext styles.
     .richtext {
       a {
@@ -43,6 +61,13 @@
         }
       }
     }
+
+    .hint__link {
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-signal-02-100);
+      }
+    }
   }
 
   @mixin type-legal {
@@ -65,6 +90,13 @@
       margin-left: 0;
     }
 
+    .hint__link {
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-mono-100);
+      }
+    }
+
     @include a.bp(lg) {
       margin-top: calc(4px + 4px + 24px);
       border: 1px solid var(--e-c-mono-500);
@@ -80,6 +112,24 @@
     }
   }
 
+  .hint__link {
+    @include t.text-link;
+
+    display: inline-block;
+    color: inherit;
+    margin-left: var(--e-space-2);
+
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-05-200);
+    }
+
+    @include a.bp(lg) {
+      display: block;
+      margin-left: 0;
+    }
+  }
+
   // Default type
   @include type-neutral;
 
@@ -87,6 +137,16 @@
   padding: var(--e-space-5) var(--e-space-4);
   border-radius: var(--e-brd-radius-1);
 
+  .hint__label {
+    + .hint__richtext {
+      margin-top: var(--e-space-1);
+
+      @include a.bp(lg) {
+        margin-top: var(--e-space-2);
+      }
+    }
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -96,15 +156,16 @@
     height: a.rem(24);
   }
 
-  > p,
-  .richtext {
-    margin-left: var(--e-space-9);
-  }
-
   > p {
     @include a.type(200, strong);
 
-    margin-bottom: var(--e-space-1);
+    margin-left: var(--e-space-9);
+
+    // margin-bottom: var(--e-space-1);
+
+    // @include a.bp(lg) {
+    //   margin-bottom: var(--e-space-2);
+    // }
   }
 
   @include a.bp(lg) {

package/components/hint/u-hint.vue

@@ -1,22 +1,32 @@
 <script setup lang="ts">
+import { useSlots } from 'vue'
 import { URichtext } from '../'
+import { Cta } from '../../elements/types'
 
 interface Props {
   type?: 'neutral' | 'warning' | 'legal'
   label?: string
+  link?: Cta
   text?: string
 }
 
 const { type = 'neutral' } = defineProps<Props>()
+const slots = useSlots()
 </script>
 
 <template>
   <div :class="['hint', `hint--${type}`]">
     <p class="hint__label">
       <slot name="label">{{ label }}</slot>
+
+      <a v-if="link" :href="link.href" :target="link.target" class="hint__link">
+        {{ link.label }}
+      </a>
     </p>
 
-    <URichtext class="hint__richtext" small :text><slot></slot></URichtext>
+    <URichtext v-if="text || $slots.default" class="hint__richtext" small :text>
+      <slot></slot>
+    </URichtext>
   </div>
 </template>
 

package/components/index.js

@@ -15,6 +15,9 @@ export { default as UCardSection } from './card-section/u-card-section.vue'
 export { default as UCardTable } from './card-table/u-card-table.vue'
 export { default as UCardToggleSwitches } from './card-toggle-switches/u-card-toggle-switches.vue'
 export { default as UCardCtaHeader } from './card-cta-header/u-card-cta-header.vue'
+export { default as UCardCtaBar } from './card-cta-bar/u-card-cta-bar.vue'
+export { default as UCardContact } from './card-contact/u-card-contact.vue'
+export { default as UCardPriceList } from './card-price-list/u-card-price-list.vue'
 
 // Collapsible
 export { default as UCollapsible } from './collapsible/u-collapsible.vue'
@@ -52,3 +55,12 @@ export { default as UWelcome } from './welcome/u-welcome.vue'
 export { default as UHint } from './hint/u-hint.vue'
 export { default as UNavigationPanelTile } from './navigation-panel-tile/u-navigation-panel-tile.vue'
 export { default as UCardInfo } from './card-info/u-card-info.vue'
+export { default as UFileUpload } from './file-upload/u-file-upload.vue'
+export { default as UBadge } from './badge/u-badge.vue'
+export { default as UDownloadListItem } from './download-list-item/u-download-list-item.vue'
+export { default as UDownloadList } from './download-list/u-download-list.vue'
+export { default as UDataCard } from './data-card/u-data-card.vue'
+export { default as UDataCardGroup } from './data-card-group/u-data-card-group.vue'
+export { default as USearchGroup } from './search-group/u-search-group.vue'
+export { default as USkeletonLoader } from './skeleton-loader/u-skeleton-loader.vue'
+export { default as UCardHighlight } from './card-highlight/u-card-highlight.vue'

package/components/progress-avatar/u-progress-avatar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onMounted, useTemplateRef, ref } from 'vue'
 import { Image } from '../../elements/types'
 import { UCircularProgress } from '../'
 
@@ -7,13 +8,36 @@ interface Props {
   progress: number
 }
 
-defineProps<Props>()
+const { progress } = defineProps<Props>()
+
+const el = useTemplateRef('el')
+const _progress = ref(0)
+
+const observer = new IntersectionObserver(
+  (entries) => {
+    if (entries[0].isIntersecting) {
+      observer.disconnect()
+
+      _progress.value = progress
+    }
+  },
+  {
+    rootMargin: '20px',
+    threshold: 1,
+  },
+)
+
+onMounted(() => {
+  setTimeout(() => {
+    observer.observe(el.value)
+  }, 200)
+})
 </script>
 
 <template>
-  <div class="progress-avatar">
+  <div ref="el" class="progress-avatar">
     <div class="progress-avatar__anim-container">
-      <UCircularProgress :size="88" :progress />
+      <UCircularProgress :size="88" :progress="_progress" />
     </div>
 
     <div class="progress-avatar__image-container">

package/components/search-group/search-group.scss

@@ -0,0 +1,59 @@
+@use '../../base/abstracts' as a;
+
+@mixin fields-mobile {
+  @include a.bp(lg) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    > * {
+      max-width: none;
+    }
+  }
+
+  @include a.bp(m) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.search-group__title {
+  @include a.type(200, strong);
+
+  margin-bottom: var(--e-space-3);
+}
+
+.search-group + .search-group {
+  margin-top: var(--e-space-8);
+}
+
+.search-group.wrap {
+  .search-group__fields {
+    display: grid;
+    gap: var(--e-space-6);
+    grid-template-columns: repeat(4, 1fr);
+
+    > * {
+      max-width: none;
+    }
+
+    @include fields-mobile;
+  }
+}
+
+.search-group__fields {
+  display: flex;
+  gap: var(--e-space-6);
+
+  > * {
+    flex: 1 1 auto;
+    max-width: calc(25% - 18px);
+  }
+
+  @include fields-mobile;
+}
+
+.search-group__ctas {
+  display: flex;
+  gap: var(--e-space-6);
+  flex-wrap: wrap;
+  margin-top: var(--e-space-10);
+}

package/components/search-group/u-search-group.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef } from 'vue'
+
+interface Props {
+  title?: string
+}
+
+defineProps<Props>()
+
+const fieldsEl = useTemplateRef('fields')
+const fieldCount = ref(0)
+
+onMounted(() => {
+  fieldCount.value = fieldsEl.value.children.length
+})
+</script>
+
+<template>
+  <fieldset :class="['search-group', { wrap: fieldCount > 5 }]">
+    <legend v-if="title" class="search-group__title">{{ title }}</legend>
+
+    <div ref="fields" class="search-group__fields">
+      <slot />
+    </div>
+
+    <div v-if="$slots.ctas" class="search-group__ctas">
+      <slot name="ctas"></slot>
+    </div>
+  </fieldset>
+</template>
+
+<style scoped scss src="./search-group.scss"></style>

package/components/skeleton-loader/skeleton-loader.scss

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+
+@keyframes skeleton-animation {
+  0% {
+    background-color: var(--e-c-primary-01-50);
+  }
+
+  100% {
+    background-color: var(--e-c-primary-01-100);
+  }
+}
+
+@mixin skeleton-base {
+  background-color: var(--e-c-primary-01-50);
+  border-radius: var(--e-brd-radius-2);
+  width: 100%;
+  height: 100%;
+  animation-name: skeleton-animation;
+  animation-duration: var(--e-trs-duration-slower);
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.skeleton-loader.fit {
+  @include skeleton-base;
+}
+
+.skeleton-loader.table {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+
+  > div {
+    @include skeleton-base;
+
+    height: a.rem(52);
+  }
+}

package/components/skeleton-loader/u-skeleton-loader.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+enum SkeletonType {
+  fit = 'fit',
+  table = 'table',
+}
+
+interface Props {
+  type?: SkeletonType
+}
+
+const { type = SkeletonType.fit } = defineProps<Props>()
+</script>
+
+<template>
+  <template v-if="type === SkeletonType.table">
+    <div :class="['skeleton-loader', type]">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </template>
+
+  <template v-if="type === SkeletonType.fit">
+    <div class="skeleton-loader fit"></div>
+  </template>
+</template>
+
+<style scoped lang="scss" src="./skeleton-loader.scss"></style>

package/components/table/cell-ctas.scss

@@ -2,11 +2,5 @@
 
 .cell-ctas {
   display: flex;
-  column-gap: var(--e-space-2);
-
-  .button-label {
-    @include a.bp(m) {
-      @include a.visually-hidden;
-    }
-  }
+  column-gap: var(--e-space-4);
 }