@exakt/ui 0.0.35 → 0.0.37

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.35"
+  "version": "0.0.37"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addImportsSources, addComponentsDir } from '@nuxt/kit';
 import fs from 'fs';
 
 const defaults = {
@@ -69,6 +69,10 @@ const module = defineNuxtModule({
         }
       });
     });
+    addImportsSources({
+      from: "material-symbols",
+      imports: ["material-symbols"]
+    });
     nuxt.options.css.push(resolver.resolve("./runtime/css/main.scss"));
     nuxt.options.css.push(resolver.resolve("./runtime/css/util.scss"));
     nuxt.options.css.push(

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

@@ -1,12 +1,13 @@
 <template>
   <div class="flex-center color-red">
     <e-icon
-      :icon="mdiAlert"
+      
       size="19"
       class="mr-2"
-    /><small><slot /></small>
+    >
+      warning
+    </e-icon><small><slot /></small>
   </div>
 </template>
 <script setup lang="ts">
-import { mdiAlert } from "@mdi/js";
 </script>

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

@@ -14,13 +14,13 @@
     <div v-else>
       <e-icon
         :size="props.size"
-        :icon="mdiAccountCircle"
-      />
+      >
+        person_circle
+      </e-icon>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { mdiAccountCircle } from "@mdi/js";
 
 const props = withDefaults(defineProps<{
   src?: string;

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 />
@@ -49,7 +41,7 @@
   </button>
 </template>
 <script lang="ts" setup>
-import { computed, useNuxtApp } from "#imports";
+import { computed, useNuxtApp,  } from "#imports";
 //import { IonSpinner } from "@ionic/vue";
 const { $exakt } = useNuxtApp();
 const props = withDefaults(
@@ -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/chat-renderer.vue

@@ -19,11 +19,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { mdiDelete, mdiFlag, mdiMinusCircle } from "@mdi/js";
 import { reactive, computed } from "#imports";
 
 const status = reactive({ dropdown: { visible: false, x: 0, y: 0 } });
-const items = [{ icon: mdiDelete, name: "Delete" }, { icon: mdiMinusCircle, name: "Delete just for me" }, { icon: mdiFlag, name: "Dox" }];
+const items = [{ icon: 'delete', name: "Delete" }, { icon: 'remove', name: "Delete just for me" }, { icon: 'flag', name: "Dox" }];
 
 const openDropdown = ({ clientX, clientY }: MouseEvent) => {
     status.dropdown.visible = true;

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

@@ -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

@@ -38,9 +38,10 @@
             <e-icon
               v-if="item.icon"
               :size="20"
-              :icon="item.icon"
               class="mr-2"
-            />
+            >
+              {{ item.icon }}
+            </e-icon>
             {{ item.name }}
           </e-btn>
         </component>

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

@@ -1,30 +1,61 @@
 <template>
-  <svg
-    :viewBox="'0 0 ' + 24 + ' ' + 24"
-    :height="size"
-    :width="size"
-    :fill="color"
+  <div
+    class="material-symbol"
+    :icon-style="iconStyle"
   >
-    <path :d="icon" />
-  </svg>
+    person
+  </div>
 </template>
 <script setup lang="ts">
- withDefaults(
+import { computed } from "#imports";
+
+const props = withDefaults(
   defineProps<{
-    icon: string;
-    color?: string;
-    size?: number | string;
+    iconStyle?: 'outlined' | 'rounded' | 'sharp', size?: number|`${number}`, fill?:boolean|"0"|"1"|`${boolean}`, grade?:number|`${number}`, weight?: number|`${number}`
   }>(),
-  {
-    icon: "",
-    color: "",
-    size: "21",
-  }
+  { iconStyle: 'rounded', size: 24, fill:false, weight: 400, grade:0}
 );
 
+const sizePx = computed(() => props.size + "px")
+const fillNum = computed(()=> {
+  if([true, "true", "1"].includes(props.fill)){
+    return 1;
+  }
+  return 0;
+})
+
 </script>
-<style scoped lang="css">
-svg {
-  fill: currentColor;
+<style lang="scss">
+.material-symbol {
+  font-weight: normal;
+  font-style: normal;
+  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.material-symbol[icon-style="outlined"] {
+  font-family: 'Material Symbols Outlined';
+}
+
+.material-symbol[icon-style="rounded"] {
+  font-family: 'Material Symbols Rounded';
+}
+
+.material-symbol[icon-style="sharp"] {
+  font-family: 'Material Symbols Sharp';
 }
 </style>
+<style scoped lang="scss">
+.material-symbol {
+  font-size: v-bind('sizePx');
+  width: v-bind('sizePx');
+  height: v-bind('sizePx');
+  font-variation-settings: 'FILL' v-bind('fillNum'), 'wght' v-bind('props.weight'), 'GRAD' v-bind('props.grade'), 'opsz' v-bind('props.size');
+}
+</style>

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

@@ -8,9 +8,11 @@
   >
     <e-icon
       v-if="icon"
-      :icon="icon"
+      
       :size="size"
-    />
+    >
+      {{ icon }}
+    </e-icon>
     <slot />
   </e-btn>
 </template>

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

@@ -8,10 +8,12 @@
   >
     <e-icon
       v-if="icon"
-      :icon="icon"
       class="mr-2"
-      size="21"
-    />
+      size="24"
+      :fill="inputState.focused"
+    >
+      {{ icon }}
+    </e-icon>
     <textarea
       v-if="type === 'textarea'"
       ref="input"

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

@@ -19,10 +19,12 @@
             :class="{ 'mr-2': label, 'mx-4': !label }"
           >
             <e-icon
-              :icon="icon"
+              
               class="icon"
               :size="size"
-            />
+            >
+              {{ icon }}
+            </e-icon>
             <transition name="fade">
               <div
                 v-if="alert"

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"
     >
@@ -12,9 +12,11 @@
         class="e-sidebar-btn-icon"
       >
         <e-icon
-          :icon="icon"
+      
           size="22"
-        />
+        >
+          {{ icon }}
+        </e-icon>
       </div>
       <div class="ml-4 d-flex flex-column e-sidebar-btn-text">
         <div class="mb-1">
@@ -49,9 +51,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,30 @@
+<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
+       
+        size="22"
+      >
+        home
+      </e-icon>
+    </e-btn>
+  </nuxt-link>
+</template>
+<script lang="ts" setup>
+</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,200 @@
 <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 size="22">
+            {{ item.icon }}
+          </e-icon>
+        </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 size="22">
+              {{ item.icon }}
+            </e-icon>
+          </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/components/e/passwordEye.vue

@@ -2,12 +2,11 @@
   <e-icon-button
     class="rounded pa-1"
     size="20"
-    :icon="modelValue ? mdiEye : mdiEyeOff"
+    :icon="modelValue ? 'visibility' : 'visibility_off'"
     @click.stop="emit('update:modelValue', !modelValue)"
   />
 </template>
 <script setup lang="ts">
-import { mdiEye, mdiEyeOff } from "@mdi/js";
 const emit = defineEmits(["update:modelValue"]);
 
 withDefaults(

package/dist/runtime/css/main.scss

@@ -8,7 +8,6 @@ $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);
 }
@@ -66,17 +65,20 @@ 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)};
 
   --e-color-elev-2: #{$root-elev-2};
   --e-color-elev-2-rgb: #{red($root-elev-2), green($root-elev-2),
- blue($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 {
@@ -101,4 +103,4 @@ a,
     color-scheme: dark;
     @include elev($root-dark, 5%);
   }
-}
+}

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,3 @@
+import 'material-symbols';
 declare const _default: any;
 export default _default;

package/dist/runtime/plugin.mjs

@@ -1,4 +1,5 @@
 import { defineNuxtPlugin } from "#app";
+import "material-symbols";
 export default defineNuxtPlugin(() => {
   return {
     provide: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build",
-    "dev": "nuxi dev playground",
+    "dev": "nuxi dev playground --host 0.0.0.0",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
@@ -27,10 +27,10 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@mdi/js": "^7.1.96",
     "@nuxt/kit": "^3.2.3",
     "blurhash": "^2.0.5",
     "lodash-es": "^4.17.21",
+    "material-symbols": "latest",
     "sass": "^1.62.1"
   },
   "devDependencies": {
@@ -45,7 +45,7 @@
     "eslint": "^8.35.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "mkdist": "^1.2.0",
-    "nuxt": "^3.7.1",
+    "nuxt": "^3.12.4",
     "vitest": "^0.29.2"
   },
   "directories": {
@@ -68,4 +68,4 @@
   },
   "homepage": "https://github.com/wd-4000/exakt#readme",
   "packageManager": "yarn@3.5.1"
-}
+}