@exakt/ui 0.0.21 → 0.0.23

package/README.md

@@ -9,7 +9,9 @@ a simple nuxt ui library focused on doing as much as possible with css
 
 - [✨  Release Notes](/CHANGELOG.md)
 <!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
+### DO NOT USE THIS LIBRARY IN YOUR PROJECT.
+### THIS LIBRARY IS VERY UNSTABLE AND EXPERIMENTAL
+### first rule of exakt is to be yourself and have fun :)
 ## Features
 
 <!-- Highlight some of the features your module provide here -->

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.21"
+  "version": "0.0.23"
 }

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

@@ -190,9 +190,9 @@ const onActivatorClick = () => {
 
 .list {
   position: absolute;
-  left: v-bind('(state.x) + "px"');
-  top: v-bind('(state.y) + "px"');
-  width: v-bind('state.width + "px"');
+  left: v-bind('(state.x) + `px`');
+  top: v-bind('(state.y) + `px`');
+  width: v-bind('state.width + `px`');
   display: flex;
 
   background-color: var(--e-color-elev-2);

package/dist/runtime/components/e/input/text.vue

@@ -93,8 +93,8 @@ const props = withDefaults(
   }>(),
   {
     icon: undefined,
-    label: "Search",
-    solid: false,
+    label: "",
+    solid: true,
     type: "text",
     modelValue: "",
     autocomplete: "off",

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

@@ -0,0 +1,51 @@
+<template>
+  <e-btn
+    :solid="false"
+    justify="stretch"
+    block
+    background="transparent"
+    class="pa-0 ma-0 btn"
+  >
+    <div class="icon">
+      <e-icon
+        v-if="icon"
+        :icon="icon"
+        size="22"
+      /><slot
+        v-else
+        name="icon"
+      />
+    </div>
+    <div class="ml-4 d-flex flex-column onhover">
+      <slot />
+    </div>
+  </e-btn>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    icon?: string;
+    iconWidth?: string;
+  }>(),
+  { icon: "" }
+);
+</script>
+<style lang="scss" scoped>
+.icon {
+  width: calc(
+   v-bind(iconWidth) - 0.1rem * 2
+  ); // Compensate the btn's accessibility border
+}
+
+
+
+.btn {
+  transition: all 0.25s ease-in-out;
+  height: v-bind(iconWidth);
+  width: v-bind(iconWidth);
+}
+
+.onhover{
+    display: none;
+}
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="sidebar"
+    @mouseenter="state.hover = true"
+    @mouseleave="state.hover = false"
+  >
+    <e-btn
+      :solid="false"
+      justify="stretch"
+      block
+      background="transparent"
+      class="pa-0 ma-0 btn"
+    >
+      <div class="icon">
+        <e-icon
+          :icon="mdiHome"
+          size="22"
+        />
+      </div>
+      <div class="ml-4 d-flex flex-column btn-text">
+        <div class="mb-1">
+          John Pork
+        </div>
+        <div class="text-secondary">
+          Hey I was wondering if you've got your bogos
+          binted
+        </div>
+      </div>
+    </e-btn>
+  </div>
+  <div class="app-content">
+    <slot name="app" />
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive } from "#imports";
+import { mdiHome } from "@mdi/js";
+const props = withDefaults(
+  defineProps<{
+    collapsedWidth?: number | string;
+    width?: number | string;
+  }>(),
+  { width: "3.5rem" }
+);
+const state = reactive({
+  hover: false,
+});
+</script>
+<style lang="scss" scoped>
+.sidebar,
+.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)
+    );
+}
+.sidebar {
+  height: 100vh;
+  width: var(--collapsed-sidebar-width);
+  z-index: 5;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-color: var(--e-color-elev-2);
+  overflow-x: hidden;
+  transition: width 0.25s ease-in-out;
+  .btn-text {
+    text-align: left;
+    max-width: calc(var(--expansion-amount) - 0.1rem*2);
+  }
+
+  &:hover ~ .app-content {
+
+   // transform: translateX(var(--expansion-amount));
+  }
+  &:hover {
+    width: var(--expanded-sidebar-width);
+
+  }
+  &:hover .btn-text {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;
+  }
+  .btn {
+    width: 100%;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+.app-content {
+  transition: transform 0.25s ease-in-out;
+  background-color: var(--e-color-light);
+  width: 100%;
+  height: 100%;
+  left: 3.5rem;
+  top: 0rem;
+  position: absolute;
+}
+
+.icon {
+  min-width: calc(
+    var(--collapsed-sidebar-width) - 0.1rem * 2
+  ); // Compensate the btn's accessibility border
+
+  display: block;
+}
+
+
+</style>

package/dist/runtime/css/main.scss

@@ -88,7 +88,7 @@ a,
 
     --e-color-dark: #{$root-light};
     --e-color-dark-rgb: #{$root-light-rgb};
-
+color-scheme: dark;
     @include elev($root-dark, 5%);
   }
 }

package/dist/runtime/plugin.mjs

@@ -3,6 +3,24 @@ export default defineNuxtPlugin(() => {
   return {
     provide: {
       exakt: {
+        /**
+         * Converts a color to an RGB object by creating a temporary element and reading the color.
+         *
+         * @param x Input color string
+         * @returns The RGB object
+         */
+        computeColor: (input) => {
+          const div = document.createElement("div");
+          document.body.appendChild(div);
+          div.style.color = input;
+          const c = getComputedStyle(div).color;
+          const res = c.match(/[.\d]+/g).map(Number);
+          div.remove();
+          return { r: res[0], g: res[1], b: res[2] };
+        },
+        /**
+         * Parses exakt-specific color strings to CSS variable names.
+         */
         parseColor: (p, suffix = "") => {
           let result = null;
           if (p === "primary") {
@@ -15,13 +33,18 @@ export default defineNuxtPlugin(() => {
           }
           return p;
         },
+        /**
+         * Generates an alphanumeric ID of a given length.
+         */
         makeid: (length) => {
           let result = "";
           const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
           const charactersLength = characters.length;
           let counter = 0;
           while (counter < length) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            result += characters.charAt(
+              Math.floor(Math.random() * charactersLength)
+            );
             counter += 1;
           }
           return result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -67,7 +67,7 @@
     "url": "https://github.com/wd-4000/exakt/issues"
   },
   "resolutions": {
-    "mkdist": "npm:@wd4000/mkdist-no-scss@1.2.0"
+    "mkdist": "npm:@wd4000/mkdist-no-scss@1.4.1"
   },
   "homepage": "https://github.com/wd-4000/exakt#readme",
   "packageManager": "yarn@3.5.1"