@energie360/ui-library 0.1.9 → 0.1.11

package/modules/navigation-toolbar-side/navigation-toolbar-side.scss

@@ -0,0 +1,89 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-toolbar-side {
+  --nav-width-expanded: #{a.rem(280)};
+  --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
+
+  display: flex;
+  flex-direction: column;
+  padding: var(--e-space-6);
+  width: var(--nav-width-expanded);
+  height: 100%;
+  background-color: var(--e-c-secondary-01-1000);
+
+  &.collapsed {
+    width: a.rem(88);
+
+    .navigation-toolbar-side__logo {
+      width: a.rem(40);
+    }
+
+    .navigation-toolbar-side__nav-links,
+    .navigation-toolbar-side__menu-cta {
+      padding: 0 var(--e-space-0_5);
+    }
+  }
+}
+
+.navigation-toolbar-side__logo {
+  width: a.rem(196);
+  height: a.rem(40);
+  margin-bottom: var(--e-space-12);
+}
+
+.navigation-toolbar-side__nav-links {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.navigation-toolbar-side__menu-ctas {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+  margin-top: auto;
+}
+
+.navigation-toolbar-side__menu-cta {
+  display: block;
+  width: 100%;
+}
+
+.navigation-toolbar-side__top-bar-logo {
+  img {
+    height: a.rem(24);
+  }
+}
+
+.navigation-toolbar-side__top-bar-ctas {
+  display: flex;
+  column-gap: var(--e-space-4);
+}
+
+// Animation
+.navigation-toolbar-side {
+  &.is-collapsing {
+    will-change: width;
+    transition: width var(--e-trs-duration-faster) var(--transition-ease-out);
+    width: a.rem(88);
+    overflow: hidden;
+
+    .navigation-toolbar-side__nav-links,
+    .navigation-toolbar-side__menu-ctas {
+      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      padding: 0 var(--e-space-0_5);
+    }
+  }
+
+  &.is-expanding {
+    will-change: width;
+    transition: all var(--e-trs-duration-faster) var(--transition-ease-out);
+    width: var(--nav-width-expanded);
+
+    .navigation-toolbar-side__nav-links,
+    .navigation-toolbar-side__menu-ctas {
+      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      padding: 0;
+    }
+  }
+}

package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { UNavigationToolbarLink } from '../../components'
+import { UContextMenu } from '../../components'
+import { Image } from '../../elements/types'
+import { ref, watch, useTemplateRef } from 'vue'
+
+interface MenuButton {
+  icon: string
+  label: string
+}
+
+interface Props {
+  logoLink: {
+    href: string
+    target: string
+  }
+  menuButton: MenuButton
+  collapsed?: boolean
+  logoImage: Image
+  logoMinifiedImage: Image
+}
+
+const { collapsed = false } = defineProps<Props>()
+
+const el = useTemplateRef('el')
+const isCollapsed = ref(collapsed)
+const isCollapsing = ref(false)
+const isExpanding = ref(false)
+
+const onTransitionEnd = () => {
+  el.value?.removeEventListener('transitionend', onTransitionEnd)
+  isCollapsed.value = !isCollapsed.value
+
+  isCollapsing.value = false
+  isExpanding.value = false
+}
+
+watch(
+  () => collapsed,
+  (newV) => {
+    el.value?.addEventListener('transitionend', onTransitionEnd)
+
+    if (newV) {
+      isCollapsing.value = true
+    } else {
+      isExpanding.value = true
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    ref="el"
+    :class="[
+      'navigation-toolbar-side',
+      {
+        collapsed: isCollapsed,
+        'is-collapsing': isCollapsing,
+        'is-expanding': isExpanding,
+      },
+    ]"
+  >
+    <a class="navigation-toolbar-side__logo" :href="logoLink.href" :target="logoLink.target">
+      <img
+        v-if="isCollapsed || isExpanding"
+        :src="logoMinifiedImage.src"
+        :alt="logoMinifiedImage.alt"
+      />
+      <img v-else :src="logoImage.src" :alt="logoImage.alt" />
+    </a>
+
+    <nav ref="mobile-panel" class="navigation-toolbar-side__nav-panel">
+      <div class="navigation-toolbar-side__nav-links">
+        <slot name="navLinks"></slot>
+      </div>
+    </nav>
+
+    <div class="navigation-toolbar-side__menu-ctas">
+      <UContextMenu placement="right-bottom">
+        <template #trigger>
+          <button class="navigation-toolbar-side__menu-cta" type="button">
+            <UNavigationToolbarLink v-bind="menuButton" :collapsed />
+          </button>
+        </template>
+
+        <slot name="contextMenuLinks"></slot>
+      </UContextMenu>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./navigation-toolbar-side.scss" scoped></style>

package/modules/navigation-toolbar-top/navigation-toolbar-top.scss

@@ -0,0 +1,89 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-toolbar-top {
+  --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
+
+  display: block;
+  width: 100%;
+  padding: 0 var(--e-space-5);
+  height: a.rem(56);
+  background-color: var(--e-c-secondary-01-1000);
+}
+
+.navigation-toolbar-top__top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.navigation-toolbar-top__nav-panel-logo {
+  display: block;
+  height: a.rem(48);
+  padding-bottom: a.rem(24);
+  margin-bottom: var(--e-space-14);
+
+  img {
+    height: 100%;
+  }
+}
+
+.navigation-toolbar-top__nav-panel-close {
+  display: block;
+  position: absolute;
+  top: var(--e-space-4);
+  right: var(--e-space-5);
+  z-index: 1;
+}
+
+.navigation-toolbar-top__nav-panel {
+  position: fixed;
+  padding: var(--e-space-4) var(--e-space-5);
+  top: 0;
+  left: 0;
+  background-color: var(--e-c-secondary-01-1000);
+  width: 100%;
+  height: 100%;
+  transform: translate3d(100%, 0, 0);
+
+  .navigation-toolbar-mobile-open & {
+    transform: translate3d(0, 0, 0);
+  }
+
+  // Animation
+  &.is-opening {
+    transition: transform var(--e-trs-duration-faster) var(--transition-ease-out);
+    transform: translate3d(0, 0, 0);
+  }
+
+  &.is-closing {
+    transition: transform var(--e-trs-duration-faster) var(--transition-ease-out);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.navigation-toolbar-top__nav-links {
+  row-gap: var(--e-space-4);
+}
+
+.navigation-toolbar-top__nav-links {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.navigation-toolbar-top__top-bar-logo {
+  img {
+    height: a.rem(24);
+  }
+}
+
+.navigation-toolbar-top__top-bar-ctas {
+  display: flex;
+  column-gap: var(--e-space-4);
+}
+
+// Global
+.navigation-toolbar-mobile-open {
+  overflow: hidden;
+}

package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { UNavigationToolbarLink } from '../../components'
+import { UIconButton } from '../../elements'
+import { UContextMenu } from '../../components'
+import { Image } from '../../elements/types'
+import { getTranslation } from '../../utils/translations/translate'
+import { ref, watch, useTemplateRef } from 'vue'
+
+interface MenuButton {
+  icon: string
+  label: string
+}
+
+interface Props {
+  logoLink: {
+    href: string
+    target: string
+  }
+  menuButton: MenuButton
+  logoImage: Image
+  logoMinifiedImage: Image
+}
+
+defineProps<Props>()
+
+const mobilePanelEl = useTemplateRef('mobile-panel')
+const mobileOpen = ref(false)
+const isMobilePanelOpening = ref(false)
+const isMobilePanelClosing = ref(false)
+
+const onToggleMenu = () => {
+  mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
+
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', true)
+  isMobilePanelOpening.value = true
+}
+
+const onNavClose = () => {
+  mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
+
+  isMobilePanelClosing.value = true
+}
+
+const onMobilePanelTransitionEnd = (e) => {
+  if (e.target !== mobilePanelEl.value) {
+    return
+  }
+
+  mobilePanelEl.value?.removeEventListener('transitionend', onMobilePanelTransitionEnd)
+
+  mobileOpen.value = !mobileOpen.value
+  isMobilePanelOpening.value = false
+  isMobilePanelClosing.value = false
+
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', !mobileOpen.value)
+}
+
+watch(mobileOpen, (newV) => {
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', newV)
+})
+</script>
+
+<template>
+  <div
+    ref="el"
+    :class="[
+      'navigation-toolbar-top',
+      {
+        'mobile-open': mobileOpen,
+      },
+    ]"
+  >
+    <div class="navigation-toolbar-top__top-bar">
+      <a
+        class="navigation-toolbar-top__top-bar-logo"
+        :href="logoLink.href"
+        :target="logoLink.target"
+      >
+        <img :src="logoImage.src" :alt="logoImage.alt" />
+      </a>
+
+      <div class="navigation-toolbar-top__top-bar-ctas">
+        <UContextMenu placement="bottom-full">
+          <template #trigger>
+            <UNavigationToolbarLink v-bind="menuButton" collapsed label-hidden />
+          </template>
+
+          <slot name="contextMenuLinks"></slot>
+        </UContextMenu>
+
+        <UNavigationToolbarLink
+          icon="menu"
+          :label="getTranslation('openMenu')"
+          collapsed
+          label-hidden
+          @click="onToggleMenu"
+        />
+      </div>
+    </div>
+
+    <nav
+      ref="mobile-panel"
+      class="navigation-toolbar-top__nav-panel"
+      :class="{ 'is-opening': isMobilePanelOpening, 'is-closing': isMobilePanelClosing }"
+    >
+      <a
+        class="navigation-toolbar-top__nav-panel-logo"
+        :href="logoLink.href"
+        :target="logoLink.target"
+      >
+        <img :src="logoImage.src" :alt="logoImage.alt" />
+      </a>
+
+      <div class="navigation-toolbar-top__nav-panel-close">
+        <UIconButton
+          icon="close"
+          variant="outlined-inverted"
+          :label="getTranslation('closeMenu')"
+          @click="onNavClose"
+        />
+      </div>
+
+      <div class="navigation-toolbar-top__nav-links">
+        <slot name="navLinks"></slot>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<style lang="scss" src="./navigation-toolbar-top.scss" scoped></style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -14,7 +14,9 @@
     "./wizard": "./wizard/index.js",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",
-    "./abstracts": "./base/abstracts/index.scss"
+    "./base/abstracts": "./base/abstracts/index.scss",
+    "./styles/form": "./elements/form/form.scss",
+    "./styles/form-grid": "./layout/form-grid.scss"
   },
   "keywords": [],
   "author": "",

package/utils/a11y/focus-trap.js

@@ -0,0 +1,128 @@
+export const getFocusableElements = (parent) => {
+  const focusableElements = [
+    'button:not([disabled]):not([tabindex="-1"])',
+    '[href]',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    'iframe',
+    'details',
+  ]
+
+  return Array.from(parent.querySelectorAll(focusableElements.join(', ')))
+}
+
+/**
+ *
+ * @param parent
+ * @param {Object} options
+ * @param {Boolean} options.focusFirstElement
+ * @param {Boolean} options.allowArrowUpDown
+ * @param {Boolean} options.allowArrowLeftRight
+ * @returns {{release: release}}
+ */
+export const focusTrap = (parent, options = {}) => {
+  const TAB = 'Tab'
+  const ARROW_DOWN = 'ArrowDown'
+  const ARROW_UP = 'ArrowUp'
+  const ARROW_LEFT = 'ArrowLeft'
+  const ARROW_RIGHT = 'ArrowRight'
+
+  const allFocusable = getFocusableElements(parent)
+  const firstFocusable = allFocusable[0]
+  const lastFocusable = allFocusable[allFocusable.length - 1]
+
+  const focusNext = () => {
+    let currentIdx = allFocusable.findIndex((el) => el === document.activeElement)
+
+    if (currentIdx === allFocusable.length - 1) {
+      currentIdx = 0
+    } else {
+      currentIdx++
+    }
+
+    allFocusable[currentIdx].focus()
+  }
+
+  const focusPrevious = () => {
+    let currentIdx = allFocusable.findIndex((el) => el === document.activeElement)
+
+    if (currentIdx === 0) {
+      currentIdx = allFocusable.length - 1
+    } else {
+      currentIdx--
+    }
+
+    allFocusable[currentIdx].focus()
+  }
+
+  const onKeydown = (e) => {
+    // Tab
+    if (e.code === TAB && !e.shiftKey) {
+      if (document.activeElement === lastFocusable) {
+        firstFocusable.focus()
+        e.preventDefault()
+      }
+
+      return
+    }
+
+    // Shift + Tab
+    if (e.code === TAB && e.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        lastFocusable.focus()
+        e.preventDefault()
+      }
+
+      return
+    }
+
+    if (options.allowArrowUpDown) {
+      if (e.code === ARROW_DOWN) {
+        focusNext()
+        return
+      }
+
+      if (e.code === ARROW_UP) {
+        focusPrevious()
+        return
+      }
+    }
+
+    if (options.allowArrowLeftRight) {
+      if (e.code === ARROW_RIGHT) {
+        focusNext()
+        return
+      }
+
+      if (e.code === ARROW_LEFT) {
+        focusPrevious()
+      }
+    }
+  }
+
+  const release = () => {
+    parent.removeEventListener('keydown', onKeydown)
+
+    // Is this necessary?
+    document.activeElement.blur()
+  }
+
+  // Set initial focus
+  if (options.focusFirstElement) {
+    firstFocusable.focus()
+  } else {
+    if (parent.tabIndex < 0) {
+      parent.tabIndex = 0
+    }
+
+    parent.focus()
+  }
+
+  parent.addEventListener('keydown', onKeydown)
+
+  return {
+    release,
+  }
+}