@energie360/ui-library 0.1.20 → 0.1.22

package/layout/portal-main/portal-main.scss

@@ -0,0 +1,98 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container' as c;
+
+.portal-main {
+  --panel-width: 300px;
+  --panel-height-mobile: 180px;
+
+  width: 100%;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 0 minmax(0, 1fr);
+  grid-template-areas: 'panel main';
+  transition: grid a.$trs-default;
+
+  &.show-panel {
+    grid-template-columns: var(--panel-width) minmax(0, 1fr);
+
+    .portal-main__panel {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  @include a.bp(lg) {
+    grid-template-areas: none;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 0 auto;
+    height: 100%;
+
+    &.show-panel {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: var(--panel-height-mobile) auto;
+    }
+  }
+}
+
+.portal-main__main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+
+  @include a.bp(lg) {
+    grid-area: auto;
+  }
+}
+
+.portal-main__panel {
+  grid-area: panel;
+  position: sticky;
+  top: 0;
+  min-width: 0;
+  height: 100vh;
+  width: var(--panel-width);
+  opacity: 0;
+  transform: translateX(-100%);
+  overflow: hidden;
+  transition:
+    transform a.$trs-default,
+    opacity a.$trs-default;
+
+  @include a.bp(lg) {
+    grid-area: auto;
+    position: static;
+    width: 100%;
+    height: var(--panel-height-mobile);
+    transform: translateY(-100%);
+  }
+}
+
+.portal-main__sub-navigation {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--e-c-mono-00);
+
+  @include a.bp(lg) {
+    background-color: var(--e-c-mono-50);
+  }
+}
+
+.portal-main__content {
+  padding-top: var(--e-space-10);
+  padding-bottom: var(--e-space-10);
+
+  @include c.portal-content-container;
+
+  @include a.bp(lg) {
+    padding-top: var(--e-space-8);
+  }
+
+  @include a.bp(m) {
+    padding-top: var(--e-space-6);
+  }
+}
+
+.portal-main__footer {
+  margin-top: auto;
+}

package/layout/portal-main/u-portal-main.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface Props {
+  showPanel?: boolean
+}
+
+defineProps<Props>()
+
+const portalFooterSlot = inject('portal-footer-slot')
+</script>
+
+<template>
+  <div :class="['portal-main', { 'show-panel': showPanel }]">
+    <div class="portal-main__panel">
+      <slot name="panel"></slot>
+    </div>
+
+    <div class="portal-main__main">
+      <div class="portal-main__sub-navigation">
+        <slot name="subNavigation"></slot>
+      </div>
+
+      <div class="portal-main__content">
+        <slot></slot>
+      </div>
+
+      <div v-if="portalFooterSlot || $slots.footer" class="portal-main__footer">
+        <slot name="footer">
+          <component :is="vnode" v-for="(vnode, idx) in portalFooterSlot()" :key="idx" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-main.scss"></style>

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

@@ -13,3 +13,10 @@ const { width = '1' } = defineProps<Props>()
 </template>
 
 <style scoped lang="scss" src="./tile-item.scss"></style>
+<style lang="scss">
+.tile-item {
+  .card {
+    height: 100%;
+  }
+}
+</style>

package/modules/dialog/u-dialog.vue

@@ -12,11 +12,19 @@ interface Props {
   contentImage?: Image
   closeBtnLabel?: string
   autoHeight?: boolean
+  modal?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
-const { mobileDialogStyle = 'modal', closeBtnLabel = getTranslation('close') } =
-  defineProps<Props>()
+const {
+  modal = false,
+  title = '',
+  text = '',
+  headerImage = undefined,
+  contentImage = undefined,
+  mobileDialogStyle = 'modal',
+  closeBtnLabel = getTranslation('close'),
+} = defineProps<Props>()
 
 const visible = defineModel<boolean>('visible')
 const dialogEl = useTemplateRef('dialog')
@@ -53,10 +61,12 @@ watch(visible, (newV) => {
       allowArrowLeftRight: true,
     })
 
-    requestAnimationFrame(() => {
-      window.addEventListener('keydown', onKeydown)
-      document.addEventListener('click', onDocumentClick)
-    })
+    if (!modal) {
+      requestAnimationFrame(() => {
+        window.addEventListener('keydown', onKeydown)
+        document.addEventListener('click', onDocumentClick)
+      })
+    }
   } else {
     focusTrapInstance.release()
 

package/modules/index.js

@@ -5,8 +5,7 @@ export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-nav
 export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'
 export { default as UNavigationPanel } from './navigation-panel/u-navigation-panel.vue'
 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 UToast, toast } from './toast/u-toast.vue'
 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/navigation-panel/navigation-panel.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-panel {
   overflow: auto;
@@ -61,5 +61,16 @@
     @include a.type(200, strong);
 
     margin-bottom: var(--e-space-4);
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+
+    // This is a bit experimental.
+    // Because we accept here an HTML string, which can contain <div> or <p>, we'll 'ignore' these tags.
+    // This way the text-overflow: ellipsis works as intended.
+    * {
+      display: contents;
+    }
   }
 }

package/modules/toast/u-toast.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+import { toast } from './useToast'
+
+export { toast }
+</script>
+
 <script setup lang="ts">
 import UToastMessage from './u-toast-message.vue'
 import { toasts } from './useToast'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,21 +24,21 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.1",
-    "@types/node": "^22.14.0",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.16.5",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "chokidar": "^4.0.3",
-    "postcss": "^8.5.3",
-    "sass": "^1.86.3",
+    "postcss": "^8.5.6",
+    "sass": "^1.89.2",
     "typescript": "^5.8.3"
   },
   "dependencies": {
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "sass": "^1.86.3"
+    "sass": "^1.86.3",
+    "vue": "^3.5.0"
   },
   "scripts": {
     "watch": "node ./watch.js",

package/wizard/wizard-outro/u-wizard-outro.vue

@@ -10,7 +10,7 @@ interface Props {
   cta?: Cta
 }
 
-const { text, cta } = defineProps<Props>()
+const { text = '', image = undefined, cta = undefined, title = '' } = defineProps<Props>()
 
 const slots = useSlots()
 const hasCta = computed(() => !!slots.cta || cta)