@exakt/ui 0.0.34 → 0.0.36

package/dist/module.d.ts

@@ -7,6 +7,7 @@ interface ModuleOptions {
         light?: string;
         red?: string;
         blue?: string;
+        yellow?: string;
     };
     breakpoints: {
         sm?: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.34"
+  "version": "0.0.36"
 }

package/dist/module.mjs

@@ -7,7 +7,8 @@ const defaults = {
     dark: "#212121",
     light: "#ffffff",
     red: "#f44336",
-    blue: "#2196f3"
+    blue: "#2196f3",
+    yellow: "#FFA000"
   },
   breakpoints: {
     sm: "16em",

package/dist/runtime/components/e/btn.vue

@@ -14,33 +14,25 @@
       'my-2': solid,
       loading,
       fab,
-      loadingGradient,
       colored: background !== 'transparent' || color || solid,
     }"
   >
-    <e-progress-gradient
-      v-if="loading && loadingGradient"
-      class="prog-grad"
-      color="primary"
-    />
-
     <div
       ref="content"
       class="e-btn-content"
-      :style="contentStyles"
     >
       <div
-        v-if="loading && !loadingGradient"
+        v-if="loading"
         class="load-overlay"
       >
         <e-loading-spinner />
       </div>
       <span
-        class="actual-content d-flex"
-        :class="{ fullwidth: props.justify == 'space-between' }"
+        class="actual-content d-flex fullwidth"
         :style="{
-          justifyContent:
-            justify, alignContent: props.align, alignItems: props.align
+          justifyContent: justify,
+          alignContent: props.align,
+          alignItems: props.align,
         }"
       >
         <slot />
@@ -63,7 +55,6 @@ const props = withDefaults(
     background?: string;
     block?: boolean;
     loading?: boolean;
-    loadingGradient?: boolean;
     fab?: boolean;
     disabled?: boolean;
     align?: string;
@@ -80,15 +71,6 @@ const props = withDefaults(
   }
 );
 
-
-const contentStyles = computed(() => {
-  if (props.justify === "space-between") {
-    return "justify-content:stretch; flex-grow: 1";
-  }
-
-  return "";
-});
-
 function parseColor(input: string) {
   const div = document.createElement("div");
   document.body.appendChild(div);
@@ -115,8 +97,8 @@ const textColor = computed(() => {
   if (props.color) {
     return props.color;
   }
-  if (props.background == 'transparent') {
-    return 'var(--e-color-dark)'
+  if (props.background == "transparent") {
+    return "var(--e-color-dark)";
   }
   const rgb = backgroundColorRgb.value;
 
@@ -140,12 +122,6 @@ const hoverColor = computed(() => {
 });
 </script>
 <style lang="scss" scoped>
-.prog-grad {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .e-btn-content {
   transition: transform 0.1s ease-in-out;
   flex-direction: row;
@@ -153,7 +129,8 @@ const hoverColor = computed(() => {
   position: relative;
   align-content: center;
   align-items: center;
-  justify-content: center;
+  justify-content: stretch;
+  flex-grow: 1;
 }
 
 .e-btn {
@@ -162,7 +139,7 @@ const hoverColor = computed(() => {
   display: flex;
   font-size: 1rem;
 
-  justify-content: center;
+  justify-content: stretch;
   align-content: center;
   align-items: center;
   padding: 0.3rem var(--e-core-padding-x);
@@ -190,17 +167,6 @@ const hoverColor = computed(() => {
   &.loading {
     pointer-events: none;
 
-    &.loadingGradient {
-      background: rgba(0, 0, 0, 0) !important;
-      color: var(--e-color-dark) !important;
-      transition: background 0.8s, color 0.5s, opacity 0.4s;
-
-      .actual-content {
-        opacity: 0.8;
-        transition: opacity 0.5s;
-      }
-    }
-
     .actual-content {
       opacity: 0;
     }

package/dist/runtime/components/e/dialog.vue

@@ -37,7 +37,7 @@ const emit = defineEmits(["update:modelValue"]);
 .dialog-wrap {
   position: fixed;
   pointer-events: none;
-  z-index: 4;
+  z-index: 6;
   width: 100%;
   height: 100%;
   top: 0px;
@@ -69,7 +69,7 @@ const emit = defineEmits(["update:modelValue"]);
 .button-bar {
   display: flex;
   align-items: stretch;
-  justify-content: space-between;
+  justify-content: flex-end;
   width: 100%;
 }
 </style>

package/dist/runtime/components/e/dropdown.vue

@@ -197,7 +197,7 @@ const onActivatorClick = () => {
 
   background-color: var(--e-color-elev-2);
   color: var(--e-color-dark);
-  z-index: 4;
+  z-index: 6;
 
   flex-shrink: 1;
   flex-direction: column;

package/dist/runtime/components/e/focus-sheet.vue

@@ -25,7 +25,7 @@ const emit = defineEmits(["update:modelValue"]);
   height: 100%;
   left: 0px;
   top: 0px;
-  z-index: 3;
+  z-index: 5;
   //background-color: red;
 
   &.opaque-on-desktop {

package/dist/runtime/components/e/nav/sidebar-btn.vue

@@ -2,8 +2,8 @@
   <nuxt-link :to="to">
     <e-btn
       :solid="false"
-      justify="stretch"
-      block
+      justify="start"
+      :block="true"
       background="transparent"
       class="pa-0 ma-0 e-sidebar-btn"
     >
@@ -49,9 +49,6 @@ defineProps<{
   position: relative;
 }
 .e-sidebar-btn {
-  width: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
   min-height: 5rem;
 }
 

package/dist/runtime/components/e/nav/sidebar-icon-btn.vue

@@ -0,0 +1,29 @@
+<template>
+  <nuxt-link to="/sidebar">
+    <e-btn
+      :solid="false"
+      justify="center"
+      :block="true"
+      background="transparent"
+      class="pa-0 ma-0 e-sidebar-icon"
+    >
+      <e-icon
+        :icon="mdiHome"
+        size="22"
+      />
+    </e-btn>
+  </nuxt-link>
+</template>
+<script lang="ts" setup>
+import { mdiHome } from '@mdi/js';
+</script>
+<style lang="scss">
+
+.router-link-active  .e-sidebar-icon, .router-link-exact-active  .e-sidebar-icon {
+  background-color: rgba(var(--e-color-primary-rgb), 0.25);
+}
+
+.e-sidebar-icon {
+  min-height: 5rem;
+}
+</style>

package/dist/runtime/components/e/nav/sidebar.vue

@@ -1,76 +1,202 @@
 <template>
-  <div
-    class="e-sidebar d-flex flex-column justify-start"
-    @mouseenter="state.hover = true"
-    @mouseleave="state.hover = false"
-  >
-    <slot />
-  </div>
-  <div class="e-sidebar-app-content">
-    <slot name="app" />
+  <div>
+    <div class="e-sidebar collapsed d-flex flex-column justify-start">
+      <slot name="collapsed" />
+
+      <nuxt-link
+        v-for="(item, i) in props.items"
+        :key="i"
+        :to="item.to"
+      >
+        <e-btn
+          :solid="false"
+          justify="center"
+          :block="true"
+          background="transparent"
+          class="pa-0 ma-0 e-sidebar-btn"
+        >
+          <e-icon
+            :icon="item.icon"
+            size="22"
+          />
+        </e-btn>
+      </nuxt-link>
+    </div>
+    <div class="extended e-sidebar">
+      <slot name="extension" />
+
+      <nuxt-link
+        v-for="(item, i) in props.items"
+        :key="i"
+        :to="item.to"
+      >
+        <e-btn
+          :solid="false"
+          justify="start"
+          :block="true"
+          background="transparent"
+          class="pa-0 ma-0 e-sidebar-btn"
+        >
+          <div
+            v-if="item.icon"
+            class="icon"
+          >
+            <e-icon
+              :icon="item.icon"
+              size="22"
+            />
+          </div>
+          <div class="ml-4 d-flex flex-column text">
+            <div :class="{ 'mb-1': item.subtitle }">
+              {{ item.title }}
+            </div>
+            <div
+              v-if="item.subtitle"
+              class="text-secondary"
+            >
+              {{ item.subtitle }}
+            </div>
+          </div>
+        </e-btn>
+      </nuxt-link>
+    </div>
+
+    <div class="app-content">
+      <slot name="app" />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import { reactive } from "#imports";
+import { computed, reactive } from "#imports";
 const props = withDefaults(
   defineProps<{
     collapsedWidth?: number | string;
-    width?: number | string;
+    expandedWidth?: number | string;
+    buttonHeight: string;
+    items: {
+      title: string;
+      icon: string;
+      subtitle?: string;
+      to: string;
+      position?: "top" | "bottom";
+    }[];
+    elev: 1 | 2 | 3 | "1" | "2" | "3";
+    moveContent: number;
+    nestingLevel: number;
   }>(),
-  { width: "3.5rem" }
+  {
+    collapsedWidth: "3.5rem",
+    expandedWidth: "20rem",
+    buttonHeight: "3.5rem",
+    elev: 2,
+    moveContent: 0.5,
+    nestingLevel: 0,
+  }
 );
 const state = reactive({
   hover: false,
 });
+
+const background = computed(() =>
+  Number(props.elev) == 1
+    ? "var(--e-color-elev)"
+    : `var(--e-color-elev-${props.elev})`
+);
 </script>
 <style lang="scss" scoped>
 .e-sidebar,
-.e-sidebar-app-content {
+.app-content {
   --collapsed-sidebar-width: v-bind(collapsedWidth);
-  --expanded-sidebar-width: 20rem; //v-bind(width);
-  --expansion-amount: calc(
-      var(--expanded-sidebar-width) - var(--collapsed-sidebar-width)
-    );
-
+  --expanded-sidebar-width: v-bind(expandedWidth);
+  --btn-height: v-bind(buttonHeight);
 
+  --expansion-amount: calc(
+    var(--expanded-sidebar-width) - var(--collapsed-sidebar-width)
+  );
+  --reveal-duration: 0.25s;
 }
 .e-sidebar {
-  
-  height: 100vh;
-  width: var(--collapsed-sidebar-width);
-  z-index: 5;
+  height: 100%;
   position: fixed;
   left: 0;
-  top: 0;
-  background-color: var(--e-color-elev-2);
-  overflow-x: hidden;
-  transition: width 0.25s ease-in-out;
+  
+  background-color: v-bind("background");
+  overflow: clip;
+  top: calc(var(--btn-height) * v-bind("props.nestingLevel"));
 
+  &:hover ~ .app-content {
+    transform: translateX(
+      calc(var(--expansion-amount) * v-bind("props.moveContent"))
+    );
+  }
 
-  &:hover ~ .e-sidebar-app-content {
+  &.collapsed {
+    width: var(--collapsed-sidebar-width);
+    z-index: 6;
+    padding-left: calc(
+      var(--collapsed-sidebar-width) * v-bind("props.nestingLevel")
+    );
 
-   // transform: translateX(var(--expansion-amount));
+    &:hover ~ .extended {
+      transform: translateX(
+        calc(var(--collapsed-sidebar-width) * v-bind("props.nestingLevel"))
+      );
+    }
   }
-  &:hover {
+
+  &.extended {
+    z-index: 5;
     width: var(--expanded-sidebar-width);
+    position: fixed;
+    // transform: translateX(calc(-1 * var(--expanded-sidebar-width)));
+    transform: translateX(-100%);
+    transition: transform var(--reveal-duration) ease-in-out;
 
+    &:hover {
+      transform: translateX(
+        calc(var(--collapsed-sidebar-width) * v-bind("props.nestingLevel"))
+      );
+    }
   }
-
-
 }
 
-.e-sidebar-app-content {
-  transition: transform 0.25s ease-in-out;
+.app-content {
+  transition: transform var(--reveal-duration) ease-in-out;
   background-color: var(--e-color-light);
   width: 100%;
-  width: -moz-available;          /* WebKit-based browsers will ignore this. */
-    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
-    width: fill-available;
+  width: fill-available;
   height: 100%;
-  left: 3.5rem;
+  left: 0;
+  padding-left: var(--collapsed-sidebar-width);
   top: 0rem;
-  position: absolute;
+ position: absolute;
+  transform: translateX(0);
 }
 
+.e-sidebar-btn {
+  min-height: var(--btn-height);
+
+  .icon {
+    min-width: calc(
+      var(--collapsed-sidebar-width) - 0.1rem * 2
+    ); // Compensate the btn's accessibility border
 
+    display: block;
+  }
+
+  .text {
+    text-align: left;
+    max-width: calc(var(--expansion-amount) - 0.1rem * 2);
+
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;
+  }
+}
+
+.router-link-active .e-sidebar-btn,
+.router-link-exact-active .e-sidebar-btn {
+  background-color: rgba(var(--e-color-primary-rgb), 0.25);
+}
 </style>

package/dist/runtime/components/e/nav/titlebar.vue

@@ -0,0 +1,17 @@
+
+
+<template>
+  <div class="titlebar d-flex flex-align-center">
+    <h4>Title</h4>
+  </div>
+</template>
+<style lang="scss" scoped>
+.titlebar{
+    position: sticky;
+    top:0;
+    left:0;
+    height:3.5rem;
+    padding-left: 3.5rem;
+    background-color: var(--e-color-elev-2);
+}
+</style>

package/dist/runtime/css/main.scss

@@ -6,10 +6,12 @@ $root-light-rgb: red($root-light), green($root-light), blue($root-light);
 $root-primary-rgb: red($root-primary), green($root-primary), blue($root-primary);
 $root-red-rgb: red($root-red), green($root-red), blue($root-red);
 $root-blue-rgb: red($root-blue), green($root-blue), blue($root-blue);
+$root-yellow-rgb: red($root-yellow), green($root-yellow), blue($root-yellow);
 
 .rounded {
   border-radius: var(--e-rounded-border-radius);
 }
+
 .rounded-top {
   border-top-left-radius: var(--e-rounded-border-radius);
   border-top-right-radius: var(--e-rounded-border-radius);
@@ -30,15 +32,18 @@ $color-map: (
   "primary": $root-primary,
   "dark": $root-dark,
   "light": $root-light,
+  "yellow": $root-yellow,
 );
 
 @each $name, $color in $color-map {
   :root {
     #{'--e-color-'+$name}: $color;
   }
+
   .bg-#{$name} {
     background: $color;
   }
+
   .color-#{$name} {
     color: $color;
   }
@@ -51,6 +56,7 @@ a,
   &:visited {
     color: color.scale($root-blue, $lightness: -10%);
   }
+
   &:active,
   .e-link-active {
     color: color.scale($root-blue, $lightness: 10%);
@@ -59,7 +65,9 @@ a,
 
 @mixin elev($source, $lightness) {
   $root-elev: color.scale($source, $lightness: $lightness);
-  $root-elev-2: color.scale($source, $lightness: $lightness * 2);
+  $root-elev-2: color.scale($source, $lightness: $lightness * 1.5);
+  $root-elev-3: color.scale($source, $lightness: $lightness * 2);
+
 
   --e-color-elev: #{$root-elev};
   --e-color-elev-rgb: #{red($root-elev), green($root-elev), blue($root-elev)};
@@ -67,6 +75,10 @@ a,
   --e-color-elev-2: #{$root-elev-2};
   --e-color-elev-2-rgb: #{red($root-elev-2), green($root-elev-2),
     blue($root-elev-2)};
+
+    --e-color-elev-3: #{$root-elev-3};
+    --e-color-elev-3-rgb: #{red($root-elev-3), green($root-elev-3),
+      blue($root-elev-3)};
 }
 
 :root {
@@ -88,7 +100,7 @@ a,
 
     --e-color-dark: #{$root-light};
     --e-color-dark-rgb: #{$root-light-rgb};
-color-scheme: dark;
+    color-scheme: dark;
     @include elev($root-dark, 5%);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",