@energie360/ui-library 0.1.16 → 0.1.18

package/modules/dialog/dialog.scss

@@ -0,0 +1,172 @@
+// TODO: Styles have been copied from 'news'. Refactor when possible.
+@use '../../base/abstracts' as a;
+@use './animations';
+
+.dialog-container {
+  --overflow-gradient-height: var(--e-space-10);
+
+  padding: 0;
+  border: 0;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  &[open] {
+    display: flex;
+    animation: fade-in var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &[open]::backdrop {
+    background-color: var(--e-c-mono-900);
+    opacity: 0.4;
+    animation: fade-in-backdrop var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &.has-header-image {
+    .dialog__header-image-container {
+      display: flex;
+    }
+  }
+
+  &.has-content-image {
+    .dialog__content-image {
+      display: block;
+    }
+  }
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--e-c-mono-00);
+  overflow: auto;
+  scrollbar-width: none;
+  border-radius: var(--e-brd-radius-3);
+  padding: var(--e-space-7) var(--e-space-7) 0;
+  height: a.rem(670);
+  max-height: 80vh;
+  max-width: a.rem(540);
+  min-width: a.rem(480);
+
+  * + .dialog__content-image {
+    margin-top: var(--e-space-5);
+  }
+
+  @include a.bp(m) {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    height: auto;
+    min-height: a.rem(440);
+    padding-left: var(--e-space-5);
+    padding-right: var(--e-space-5);
+  }
+}
+
+.dialog__header-image-container {
+  display: none;
+  justify-content: center;
+  height: a.rem(184);
+  margin-bottom: var(--e-space-8);
+
+  img {
+    object-fit: contain;
+  }
+}
+
+.dialog__content-container {
+  margin-bottom: auto;
+}
+
+.content-title {
+  @include a.type(500, strong);
+
+  @include a.bp(m) {
+    @include a.type(300, strong);
+  }
+}
+
+.content-title + .content-text,
+.content-title + .content-custom {
+  margin-top: var(--e-space-2);
+
+  @include a.bp(m) {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.dialog__content-image {
+  display: none;
+
+  img {
+    width: 100%;
+  }
+}
+
+.cta-container {
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-4);
+  bottom: 0;
+  margin-top: var(--overflow-gradient-height);
+  padding: var(--e-space-8) var(--e-space-1) var(--e-space-7);
+  background-color: var(--e-c-mono-00);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(var(--overflow-gradient-height) * -1);
+    left: 0;
+    width: 100%;
+    height: var(--overflow-gradient-height);
+    background-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 100%);
+  }
+
+  @include a.bp(m) {
+    padding: var(--e-space-8) 0 var(--e-space-7);
+  }
+}
+
+// MOBILE "MODAL" Variant
+.dialog-container.modal {
+  @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);
+  }
+}
+
+// MOBILE "SLIDE-OUT" Variant
+.dialog-container.slideout {
+  @include a.bp(m) {
+    align-items: flex-end;
+
+    // Closing animation
+    animation: slide-out var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+    &[open] {
+      display: flex;
+      animation: slide-in var(--e-trs-duration-fast) var(--e-trs-easing-default);
+    }
+
+    .dialog {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      max-height: 90vh;
+    }
+  }
+}
+
+body:has(.dialog[open]) {
+  overflow: hidden;
+}

package/modules/dialog/u-dialog.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { useTemplateRef, watch, useSlots } from 'vue'
+import { UButton } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+import { focusTrap } from '../../utils/a11y/focus-trap'
+
+interface Props {
+  title?: string
+  text?: string
+  headerImage?: Image
+  contentImage?: Image
+  closeBtnLabel?: string
+  mobileDialogStyle?: 'modal' | 'slideout'
+}
+
+const { mobileDialogStyle = 'modal', closeBtnLabel = getTranslation('close') } =
+  defineProps<Props>()
+
+const visible = defineModel<boolean>('visible')
+const dialogEl = useTemplateRef('dialog')
+const slots = useSlots()
+let focusTrapInstance
+
+// TODO: Key codes should be defined globally
+const ESC = 'Escape'
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.code === ESC) {
+    visible.value = false
+  }
+}
+
+const onDocumentClick = (e: Event) => {
+  if (e.target.closest('.dialog')) {
+    return
+  }
+
+  e.stopPropagation()
+  e.preventDefault()
+
+  visible.value = false
+}
+watch(visible, (newV) => {
+  if (newV) {
+    // Open Dialog
+    dialogEl.value.showModal()
+
+    focusTrapInstance = focusTrap(dialogEl.value, {
+      focusFirstElement: true,
+      allowArrowUpDown: true,
+      allowArrowLeftRight: true,
+    })
+
+    requestAnimationFrame(() => {
+      window.addEventListener('keydown', onKeydown)
+      document.addEventListener('click', onDocumentClick)
+    })
+  } else {
+    focusTrapInstance.release()
+
+    // Close Dialog
+    // The trigger element automatically gets the focus when the dialog is closed. yay native :)
+    dialogEl.value.close()
+
+    window.removeEventListener('keydown', onKeydown)
+    document.removeEventListener('click', onDocumentClick)
+  }
+})
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    closedby="none"
+    :class="[
+      'dialog-container',
+      mobileDialogStyle,
+      {
+        'has-header-image': !!slots['header-image'] || headerImage,
+        'has-content-image': !!slots['content-image'] || contentImage,
+      },
+    ]"
+  >
+    <div class="dialog">
+      <div class="dialog__header-image-container">
+        <slot name="header-image">
+          <img v-bind="headerImage" />
+        </slot>
+      </div>
+
+      <div class="dialog__content-container">
+        <div class="content-title">
+          <h3>
+            <slot name="title">{{ title }}</slot>
+          </h3>
+        </div>
+
+        <div v-if="$slots.text || text" class="content-text">
+          <div class="richtext">
+            <slot name="text">
+              <div v-html="text"></div>
+            </slot>
+          </div>
+        </div>
+
+        <div v-if="$slots.custom" class="content-custom">
+          <slot name="custom"></slot>
+        </div>
+
+        <div class="dialog__content-image">
+          <slot name="content-image">
+            <img v-bind="contentImage" />
+          </slot>
+        </div>
+      </div>
+
+      <div class="cta-container">
+        <slot name="cta"></slot>
+        <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped lang="scss" src="./dialog.scss"></style>
+<style scoped lang="scss">
+.dialog__header-image-container {
+  :slotted(img) {
+    object-fit: contain;
+  }
+}
+
+.dialog__content-image {
+  :slotted(img) {
+    width: 100%;
+  }
+}
+</style>

package/modules/footer/footer.scss

@@ -1,8 +1,9 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 @use '../../elements/text-link/text-link.scss' as t;
 @use '../../layout/container/container.scss' as l;
 
 .footer {
+  &.portal,
   &.reduced {
     .footer__top {
       display: none;
@@ -25,6 +26,12 @@
       position: static;
     }
   }
+
+  &.portal {
+    .footer__container {
+      @include l.portal-content-container;
+    }
+  }
 }
 
 .footer__top {

package/modules/footer/u-footer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  variant?: 'normal' | 'reduced'
+  variant?: 'normal' | 'reduced' | 'portal'
 }
 
 const { variant = 'normal' } = defineProps<Props>()

package/modules/index.js

@@ -7,3 +7,6 @@ export { default as UNavigationPanel } from './navigation-panel/u-navigation-pan
 export { default as UProgressIndicator } from './progress-indicator/u-progress-indicator.vue'
 export { default as UToast } from './toast/u-toast.vue'
 export { toast } from './toast/useToast.ts'
+export { default as UDialog } from './dialog/u-dialog.vue'
+export { default as USearchFilter } from './search-filter/u-search-filter.vue'
+export { default as UContentTitle } from './content-title/u-content-title.vue'

package/modules/inline-edit-group/u-inline-edit-group.vue

@@ -7,6 +7,8 @@ const update = (id) => {
 
 const activeEdit = ref('')
 
+defineExpose({ update })
+
 provide('inline-edit-group', {
   update,
   activeEdit,

package/modules/search-filter/search-filter.scss

@@ -0,0 +1,106 @@
+@use '../../base/abstracts' as a;
+
+@mixin collapsed-desktop {
+  grid-template-columns: 100%;
+
+  .search-filter__search {
+    display: flex;
+    column-gap: var(--e-space-4);
+    flex-direction: row-reverse;
+    grid-area: auto;
+  }
+
+  .search-filter__filter-toggle {
+    display: block;
+  }
+
+  .search-filter__filter {
+    display: none;
+    grid-area: auto;
+  }
+
+  &.show-filters {
+    .search-filter__filter {
+      display: grid;
+      grid-template-columns: repeat(calc(var(--field-count) - 1), 1fr);
+    }
+  }
+}
+
+@mixin mobile-filters {
+  @include a.bp(m) {
+    grid-template-columns: 100%;
+
+    .search-filter__search {
+      display: grid;
+      column-gap: var(--e-space-4);
+      grid-template-columns: auto min-content;
+      grid-area: auto;
+    }
+
+    .search-filter__filter {
+      display: none;
+      grid-area: auto;
+      grid-template-columns: 1fr;
+    }
+
+    .search-filter__filter-toggle {
+      flex: 0 0 auto;
+      display: block;
+    }
+
+    &.show-filters {
+      .search-filter__filter {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+
+.search-filter {
+  --field-count: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--field-count), minmax(0, 240px));
+  gap: var(--e-space-6) var(--e-space-4);
+
+  @include a.bp(xl) {
+    grid-template-columns: repeat(var(--field-count), 1fr);
+  }
+
+  .search-filter__search {
+    grid-area: 1 / var(--field-count) / 1 / calc(var(--field-count) + 1);
+  }
+
+  .search-filter__filter {
+    display: grid;
+    grid-template-columns: repeat(calc(var(--field-count) - 1), minmax(0, #{a.rem(240)}));
+    gap: var(--e-space-6) var(--e-space-4);
+    grid-area: 1 / 1 / 1 / var(--field-count);
+
+    @include a.bp(xl) {
+      grid-template-columns: repeat(calc(var(--field-count) - 1), 1fr);
+    }
+  }
+
+  .search-filter__filter-toggle {
+    display: none;
+  }
+
+  &.show-filters {
+    .search-filter__filter-toggle .icon-button {
+      &::before {
+        background-color: var(--e-c-primary-01-100);
+        border-color: var(--e-c-primary-01-100);
+      }
+    }
+  }
+
+  @include mobile-filters;
+}
+
+.search-filter.collapsed-desktop {
+  @include collapsed-desktop;
+  @include mobile-filters;
+}

package/modules/search-filter/u-search-filter.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, useTemplateRef, onMounted } from 'vue'
+import { UIconButton } from '../../elements'
+import { UBadge } from '../../components'
+
+interface Props {
+  activeFilter?: boolean
+}
+
+defineProps<Props>()
+
+const showFilters = ref(false)
+const filtersEl = useTemplateRef('filters')
+const filterCount = ref(0)
+
+onMounted(() => {
+  filterCount.value = filtersEl.value.children.length
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'search-filter',
+      { 'show-filters': showFilters, 'collapsed-desktop': filterCount + 1 >= 4 },
+    ]"
+    :style="{
+      '--field-count': filterCount + 1,
+    }"
+  >
+    <div class="search-filter__search">
+      <slot name="search" />
+
+      <div class="search-filter__filter-toggle">
+        <UBadge
+          dot
+          border
+          :show="activeFilter && !showFilters"
+          color="var(--e-c-secondary-05-500)"
+          :top="11"
+          :right="11"
+        >
+          <UIconButton icon="filter" variant="plain" @click="showFilters = !showFilters" />
+        </UBadge>
+      </div>
+    </div>
+
+    <div ref="filters" class="search-filter__filter">
+      <slot name="filters" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./search-filter.scss"></style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -11,9 +11,11 @@
     "./elements": "./elements/index.js",
     "./components": "./components/index.js",
     "./modules": "./modules/index.js",
+    "./layout": "./layout/index.js",
     "./wizard": "./wizard/index.js",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",
+    "./utils/*": "./utils/*",
     "./base/abstracts": "./base/abstracts/index.scss",
     "./styles/form": "./elements/form/form.scss",
     "./styles/form-grid": "./layout/form-grid/form-grid.scss"

package/utility/elements/form.scss

@@ -0,0 +1 @@
+@use '../../elements/form/form';

package/utility/layout/form-grid.scss

@@ -0,0 +1 @@
+@use '../../layout/form-grid/form-grid';

package/utils/array/intersect.js

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param {Array} a
+ * @param {Array} b
+ * @returns {Array}
+ */
+export const intersect = (a, b) => a.filter((x) => b.includes(x))

package/utils/functions/breakpoint.js

@@ -1,11 +1,6 @@
 import { mediaquery } from '@energie360/design-tokens/design-tokens.json'
 
-// TODO: return .matches value
-
-export const isSmall = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.s})`)
-
-export const isMedium = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.m})`)
-
-export const isLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.lg})`)
-
-export const isXLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.xl})`)
+export const isSmall = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.s})`).matches
+export const isMedium = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.m})`).matches
+export const isLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.lg})`).matches
+export const isXLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.xl})`).matches

package/utils/functions/format-bytes.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * @param {number} bytes
+ * @param decimals
+ * @returns {string}
+ */
+export const formatBytes = (bytes, decimals = 2) => {
+  if (!+bytes) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+}

package/utils/global/mime-types.js

@@ -0,0 +1,8 @@
+// TODO: Add more possible types.
+export const mimeTypes = {
+  'image/png': ['png'],
+  'application/pdf': ['pdf'],
+  'image/jpeg': ['jpeg', 'jpg'],
+  'image/svg+xml': ['svg'],
+  'image/gif': ['gif'],
+}

package/utils/translations/translate.js

@@ -8,6 +8,14 @@ const getLanguage = () => {
   return langAttr === '' ? DEFAULT_LANGUAGE : langAttr
 }
 
-export const getTranslation = (key) => {
-  return translations[getLanguage()][key]
+export const getTranslation = (key, replace) => {
+  let translation = translations[getLanguage()][key]
+
+  if (replace) {
+    for (key in replace) {
+      translation = translation.replace(key, replace[key])
+    }
+  }
+
+  return translation
 }