@energie360/ui-library 0.1.17 → 0.1.19

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
 }

package/wizard/index.js

@@ -3,3 +3,4 @@ export { default as UWizardOutro } from './wizard-outro/u-wizard-outro.vue'
 export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
 export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
 export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'
+export { default as UWizardTopBar } from './wizard-top-bar/u-wizard-top-bar.vue'

package/wizard/wizard-top-bar/u-wizard-top-bar.vue

@@ -0,0 +1,31 @@
+<!--<script setup lang="ts">-->
+<!--import { UIcon } from '../../elements'-->
+
+<!--interface Props {-->
+<!--  objectAddress?: string-->
+<!--}-->
+<!--</script>-->
+
+<template>
+  <div class="wizard-top-bar">
+    <div class="container">
+      <div class="wizard-top-bar__inner">
+        <div class="wizard-top-bar__logo">
+          <img src="/static/ui-assets/images/logo.svg" alt="logo" />
+        </div>
+
+        <div class="wizard-top-bar__right-column">
+          <div class="wizard-top-bar__additional">
+            <slot name="additional"></slot>
+          </div>
+
+          <div class="wizard-top-bar__cta">
+            <slot name="cta"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./wizard-top-bar.scss"></style>

package/wizard/wizard-top-bar/wizard-top-bar.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container';
+
+.wizard-top-bar__inner {
+  height: a.rem(98);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wizard-top-bar__logo {
+  flex: 0 0 auto;
+
+  img {
+    height: a.rem(40);
+
+    @include a.bp(lg) {
+      height: a.rem(24);
+    }
+  }
+}
+
+.wizard-top-bar__cta,
+.wizard-top-bar__right-column {
+  display: flex;
+  column-gap: var(--e-space-6);
+}
+
+.wizard-top-bar__right-column {
+  .wizard-top-bar__additional {
+    @include a.bp(m) {
+      display: none;
+    }
+  }
+}

package/layout/settings/settings.scss

@@ -1,33 +0,0 @@
-@use '../../base/abstracts' as a;
-
-.settings-layout {
-  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);
-  padding: var(--e-space-10);
-
-  @include a.bp(lg) {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--e-space-6);
-    padding: var(--e-space-6) var(--e-space-5) var(--e-space-10);
-  }
-}
-
-.settings-layout__header {
-  grid-area: 1 / 1 / 2 / 3;
-}
-
-.settings-layout__main {
-  grid-area: 2 / 1 / 3 / 2;
-}
-
-.settings-layout__aside {
-  grid-area: 2 / 2 / 3 / 3;
-}
-
-.settings-layout__title {
-  @include a.type(500, strong);
-}

package/layout/settings/u-settings-layout.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="settings-layout">
-    <div class="settings-layout__header">
-      <h1 class="settings-layout__title">
-        <slot name="title"></slot>
-      </h1>
-    </div>
-
-    <div class="settings-layout__main">
-      <slot name="main"></slot>
-    </div>
-
-    <aside class="settings-layout__aside">
-      <slot name="aside"></slot>
-    </aside>
-  </div>
-</template>
-
-<style scoped lang="scss" src="./settings.scss"></style>