@energie360/ui-library 0.1.8 → 0.1.10

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.8",
+  "version": "0.1.10",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -9,16 +9,12 @@
     "./package.json": "./package.json",
     "./base-style.css": "./dist/base-style.css",
     "./elements": "./elements/index.js",
-    "./elements/*": "./elements/*/index.js",
     "./components": "./components/index.js",
-    "./components/*": "./components/*",
     "./modules": "./modules/index.js",
-    "./modules/*": "./modules/*",
     "./wizard": "./wizard/index.js",
-    "./wizard/*": "./wizard/*",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",
-    "./abstracts": "./base/abstracts/index.scss"
+    "./base/abstracts": "./base/abstracts/index.scss"
   },
   "keywords": [],
   "author": "",
@@ -37,7 +33,8 @@
     "@energie360/design-tokens": "^1.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "sass": "^1.86.3"
   },
   "scripts": {
     "watch": "node ./watch.js",

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,
+  }
+}

package/elements/button/index.js

@@ -1 +0,0 @@
-export { default as UButton } from './u-button.vue'

package/elements/button-chip/index.js

@@ -1 +0,0 @@
-export { default as UButtonChip } from './u-button-chip.vue'

package/elements/icon/index.js

@@ -1 +0,0 @@
-export { default as UIcon } from './u-icon.vue'

package/elements/icon-button/index.js

@@ -1 +0,0 @@
-export { default as UIconButton } from './u-icon-button.vue'

package/elements/image/index.js

@@ -1 +0,0 @@
-export { default as UImage } from './u-image.vue'

package/elements/loader/index.js

@@ -1 +0,0 @@
-export { default as ULoader } from './u-loader.vue'

package/elements/numeric-stepper/index.js

@@ -1 +0,0 @@
-export { default as UNumericStepper } from './u-numeric-stepper.vue'

package/elements/password-progress/index.js

@@ -1 +0,0 @@
-export { default as UPasswordProgress } from './u-password-progress.vue'

package/elements/radio/index.js

@@ -1 +0,0 @@
-export { default as URadio } from './u-radio.vue'

package/elements/radio-group/index.js

@@ -1 +0,0 @@
-export { default as URadioGroup } from './u-radio-group.vue'

package/elements/select/index.js

@@ -1 +0,0 @@
-export { default as USelect } from './u-select.vue'

package/elements/select-chip/index.js

@@ -1 +0,0 @@
-export { default as USelectChip } from './u-select-chip.vue'

package/elements/select-chips/index.js

@@ -1 +0,0 @@
-export { default as USelectChips } from './u-select-chips.vue'

package/elements/spectro/index.js

@@ -1 +0,0 @@
-export { default as USpectro } from './u-spectro.vue'

package/elements/text-field/index.js

@@ -1 +0,0 @@
-export { default as UTextField } from './u-text-field.vue'

package/elements/textarea/index.js

@@ -1 +0,0 @@
-export { default as UTextarea } from './u-textarea.vue'

package/elements/toggle-switch/index.js

@@ -1 +0,0 @@
-export { default as UToggleSwitch } from './u-toggle-switch.vue'