@energie360/ui-library 0.1.17 → 0.1.19

package/layout/portal/portal.scss

@@ -1,19 +1,47 @@
 @use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
 
 .portal {
-  display: flex;
+  --side-nav-width: 80px;
+}
+
+.portal__side-navigation {
+  position: fixed;
   height: 100vh;
+  display: flex;
 }
 
 .portal__top-navigation {
   display: none;
 }
 
+.portal__sub-navigation {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--e-c-mono-00);
+}
+
 .portal__main {
-  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  padding-left: var(--side-nav-width);
+  min-height: 100vh;
+}
+
+.portal__content-container {
+  @include c.portal-content-container;
+
+  padding-top: var(--e-space-10);
+  padding-bottom: var(--e-space-10);
+
+  @include a.bp(lg) {
+    padding-top: var(--e-space-8);
+  }
+
+  @include a.bp(m) {
+    padding-top: var(--e-space-6);
+  }
 }
 
 .portal__footer {
@@ -21,10 +49,6 @@
 }
 
 @include a.bp(lg) {
-  .portal {
-    flex-direction: column;
-  }
-
   .portal__top-navigation {
     display: block;
   }
@@ -32,4 +56,8 @@
   .portal__side-navigation {
     display: none;
   }
+
+  .portal__sub-navigation {
+    background-color: var(--e-c-mono-50);
+  }
 }

package/layout/portal/u-portal.vue

@@ -1,6 +1,30 @@
+<script setup lang="ts">
+import { useTemplateRef, onMounted, ref } from 'vue'
+
+const sideNavObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    if (entry.target === sideNavEl.value) {
+      sideNavWidth.value = entry.contentBoxSize[0].inlineSize
+    }
+  }
+})
+
+const sideNavEl = useTemplateRef('sideNavigation')
+const sideNavWidth = ref(0)
+
+onMounted(() => {
+  sideNavObserver.observe(sideNavEl.value)
+})
+</script>
+
 <template>
-  <div class="portal">
-    <div class="portal__side-navigation">
+  <div
+    class="portal"
+    :style="{
+      '--side-nav-width': `${sideNavWidth}px`,
+    }"
+  >
+    <div ref="sideNavigation" class="portal__side-navigation">
       <slot name="side-navigation"></slot>
     </div>
 
@@ -9,7 +33,13 @@
     </div>
 
     <div class="portal__main">
-      <slot></slot>
+      <div class="portal__sub-navigation">
+        <slot name="sub-navigation"></slot>
+      </div>
+
+      <div class="portal__content-container">
+        <slot></slot>
+      </div>
 
       <div class="portal__footer">
         <slot name="footer"></slot>
@@ -18,5 +48,4 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
 <style scoped lang="scss" src="./portal.scss"></style>

package/layout/portal-content-aside/portal-content-aside.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+
+.portal-content-aside-container {
+  container-type: inline-size;
+
+  @container (width <= 1020px) {
+    .portal-content-aside {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--e-space-6);
+    }
+  }
+}
+
+.portal-content-aside {
+  display: grid;
+  grid-template-columns: auto a.rem(320);
+  grid-template-rows: repeat(2, auto);
+  grid-column-gap: var(--e-space-24);
+  grid-row-gap: var(--e-space-12);
+
+  // @include a.bp(lg) {
+  //   display: flex;
+  //   flex-direction: column;
+  //   row-gap: var(--e-space-6);
+  // }
+}
+
+.portal-content-aside__main {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
+.portal-content-aside__aside {
+  grid-area: 1 / 2 / 3 / 3;
+}

package/layout/portal-content-aside/u-portal-content-aside.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="portal-content-aside-container">
+    <div class="portal-content-aside">
+      <div class="portal-content-aside__main">
+        <slot />
+      </div>
+
+      <aside class="portal-content-aside__aside">
+        <slot name="aside"></slot>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-content-aside.scss"></style>

package/layout/responsive-container/u-responsive-container.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue'
+
+interface Props {
+  breakpoint: number
+}
+
+const root = useTemplateRef('root')
+const containerWidth = ref(0)
+const resizeObserver = new ResizeObserver((entries) => {
+  containerWidth.value = entries[0].contentBoxSize[0].inlineSize
+})
+
+defineProps<Props>()
+
+onMounted(() => {
+  resizeObserver.observe(root.value)
+})
+
+onUnmounted(() => {
+  resizeObserver.disconnect()
+})
+</script>
+
+<template>
+  <div ref="root" class="responsive-container">
+    <template v-if="containerWidth >= breakpoint">
+      <slot name="above"></slot>
+    </template>
+
+    <template v-else>
+      <slot name="below"></slot>
+    </template>
+  </div>
+</template>

package/layout/tile-grid/tile-grid.scss

@@ -0,0 +1,13 @@
+@use '../../base/abstracts' as a;
+
+.tile-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: var(--e-space-6);
+  container: tile-grid / inline-size;
+
+  @include a.bp(m) {
+    gap: var(--e-space-4);
+  }
+}

package/layout/tile-grid/tile-item.scss

@@ -0,0 +1,31 @@
+@use '../../base/abstracts' as a;
+
+.tile-item {
+  grid-column: span 12;
+
+  &[data-width='1'] {
+    grid-column: span 12;
+  }
+
+  &[data-width='1/2'] {
+    grid-column: span 6;
+  }
+
+  &[data-width='1/3'] {
+    grid-column: span 4;
+  }
+
+  &[data-width='2/3'] {
+    grid-column: span 8;
+  }
+}
+
+@container tile-grid (width < 920px) {
+  .tile-item {
+    &[data-width='1/2'],
+    &[data-width='1/3'],
+    &[data-width='2/3'] {
+      grid-column: span 12;
+    }
+  }
+}

package/layout/tile-grid/u-tile-grid.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="tile-grid">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./tile-grid.scss"></style>

package/layout/tile-grid/u-tile-item.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  width?: '1' | '1/2' | '1/3' | '2/3'
+}
+
+const { width = '1' } = defineProps<Props>()
+</script>
+
+<template>
+  <div class="tile-item" :data-width="width">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./tile-item.scss"></style>

package/modules/content-title/content-title.scss

@@ -0,0 +1,43 @@
+@use '../../base/abstracts' as a;
+
+.content-title {
+  display: flex;
+  align-items: center;
+  gap: var(--e-space-8);
+  justify-content: flex-end;
+
+  @include a.bp(xl) {
+    flex-wrap: wrap;
+  }
+
+  @include a.bp(m) {
+    row-gap: var(--e-space-6);
+  }
+}
+
+.content-title__content {
+  margin-right: auto;
+
+  @include a.bp(xl) {
+    width: 100%;
+  }
+}
+
+.content-title__title {
+  @include a.type(500, strong);
+
+  min-width: max-content;
+}
+
+.content-title__text {
+  @include a.type(100);
+
+  margin-top: var(--e-space-2);
+  color: var(--e-c-mono-700);
+}
+
+.content-title__custom-content {
+  @include a.bp(xl) {
+    width: 100%;
+  }
+}

package/modules/content-title/u-content-title.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="content-title">
+    <div class="content-title__content">
+      <h1 class="content-title__title">
+        <slot />
+      </h1>
+
+      <p v-if="$slots.text" class="content-title__text">
+        <slot name="text" />
+      </p>
+    </div>
+
+    <div v-if="$slots['custom']" class="content-title__custom-content">
+      <slot name="custom"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./content-title.scss"></style>

package/modules/dialog/dialog.scss

@@ -50,15 +50,21 @@
   padding: var(--e-space-7) var(--e-space-7) 0;
   height: a.rem(670);
   max-height: 80vh;
-  max-width: a.rem(480);
-  width: 100%;
+  max-width: a.rem(540);
+  min-width: a.rem(480);
+
+  &.auto-height {
+    height: auto;
+  }
 
   * + .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);
@@ -89,7 +95,8 @@
   }
 }
 
-.content-title + .content-text {
+.content-title + .content-text,
+.content-title + .content-custom {
   margin-top: var(--e-space-2);
 
   @include a.bp(m) {
@@ -109,6 +116,7 @@
   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);

package/modules/dialog/u-dialog.vue

@@ -11,6 +11,7 @@ interface Props {
   headerImage?: Image
   contentImage?: Image
   closeBtnLabel?: string
+  autoHeight?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
@@ -82,7 +83,7 @@ watch(visible, (newV) => {
       },
     ]"
   >
-    <div class="dialog">
+    <div :class="['dialog', { 'auto-height': autoHeight }]">
       <div class="dialog__header-image-container">
         <slot name="header-image">
           <img v-bind="headerImage" />
@@ -96,7 +97,7 @@ watch(visible, (newV) => {
           </h3>
         </div>
 
-        <div class="content-text">
+        <div v-if="$slots.text || text" class="content-text">
           <div class="richtext">
             <slot name="text">
               <div v-html="text"></div>
@@ -104,6 +105,10 @@ watch(visible, (newV) => {
           </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" />
@@ -112,6 +117,7 @@ watch(visible, (newV) => {
       </div>
 
       <div class="cta-container">
+        <slot name="cta"></slot>
         <UButton @click="visible = false">{{ closeBtnLabel }}</UButton>
       </div>
     </div>

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

@@ -8,3 +8,5 @@ export { default as UProgressIndicator } from './progress-indicator/u-progress-i
 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/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.17",
+  "version": "0.1.19",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -15,6 +15,7 @@
     "./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/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