@exakt/ui 0.0.56 → 0.0.59

package/dist/module.d.ts

@@ -28,6 +28,6 @@ interface ModuleOptions {
         weight?: number;
     };
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { ModuleOptions, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.56"
+  "version": "0.0.59"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addImportsSources, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, extendViteConfig, addComponentsDir } from '@nuxt/kit';
 import fs from 'fs';
 
 const defaults = {
@@ -31,7 +31,7 @@ const defaults = {
   },
   borderRadius: "8px",
   corePaddingX: "1rem",
-  font: { family: "Roboto, sans-serif", weight: 400 }
+  font: { family: "Open Sans, sans-serif", weight: 400 }
 };
 const module = defineNuxtModule({
   meta: {
@@ -79,20 +79,18 @@ const module = defineNuxtModule({
         css: {
           preprocessorOptions: {
             scss: {
-              additionalData: `@use "sass:color"; @use "sass:map"; @import "${resolver.resolve(
+              api: "modern-compiler",
+              additionalData: `@use "sass:color"; @use "sass:map"; @use "${resolver.resolve(
                 "../node_modules/.cache/exakt-ui/variables.scss"
-              )}";  `
+              )}" as exakt;  `
             }
           }
         }
       });
     });
-    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("material-symbols");
     nuxt.options.css.push(
       resolver.resolve("../node_modules/.cache/exakt-ui/variables.css")
     );

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

@@ -1,13 +1,20 @@
 <template>
-  <div class="flex-center color-red">
+  <div
+    class="flex-center"
+    :class="{ [severityMatrix[severity].class]: true }"
+  >
     <e-icon
-      
       size="19"
       class="mr-2"
     >
-      warning
-    </e-icon><small><slot /></small>
+      {{ severityMatrix[severity].icon }}
+    </e-icon><small>
+      <slot />
+    </small>
   </div>
 </template>
 <script setup lang="ts">
+withDefaults(defineProps<{ severity?: 0 | 1 | 2 }>(), { severity: 2 })
+
+const severityMatrix = { 0: { icon: "info", class: "" }, 1: { icon: "warning", class: "color-yellow" }, 2: { icon: "warning", class: "color-red" } }
 </script>

package/dist/runtime/components/e/app-bars.vue

@@ -93,7 +93,7 @@ const props = withDefaults(
   align-items: stretch;
 }
 
-@media screen and (max-width: ($e-md-screen-breakpoint)) {
+@media screen and (max-width: (exakt.$e-md-screen-breakpoint)) {
   .title-bar {
     display: unset;
     top: 0px;

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

@@ -25,7 +25,7 @@
 const props = withDefaults(defineProps<{
   src?: string;
   size?: number;
-}>(), { size: 120 });
+}>(), { size: 120, src: undefined });
 </script>
 <style lang="scss" scoped>
 .avatar {

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

@@ -1,5 +1,6 @@
 <template>
-  <button
+  <component
+    :is="button ? 'button' : 'div'"
     class="e-btn"
     :style="{ width }"
     :type="type"
@@ -11,9 +12,9 @@
       block,
       rounded: solid,
       'e-disabled': disabled,
-      'my-2': solid,
       loading,
       fab,
+      compact,
       ...backgroundClass
     }"
   >
@@ -38,7 +39,7 @@
         <slot />
       </span>
     </div>
-  </button>
+  </component>
 </template>
 <script lang="ts" setup>
 import { computed, useNuxtApp, } from "#imports";
@@ -50,6 +51,7 @@ const props = withDefaults(
     active?: boolean;
     inactive?: boolean;
     solid?: boolean;
+    compact?: boolean;
     color?: string;
     background?: string;
     block?: boolean;
@@ -58,6 +60,7 @@ const props = withDefaults(
     disabled?: boolean;
     align?: string;
     type?: "button" | "submit" | "reset";
+    button?: boolean;
   }>(),
   {
     type: "button",
@@ -65,8 +68,10 @@ const props = withDefaults(
     solid: true,
     width: undefined,
     justify: "center",
+    compact: false,
     align: "center",
     color: undefined,
+    button: true
   }
 );
 
@@ -88,13 +93,13 @@ const backgroundColorRgb = computed(() => {
   return parseColor($exakt.parseColor(props.background));
 });
 
-const isRootColor = computed(() => $exakt.rootColors.includes(props.background))
+const isRootColor = computed(() => $exakt && $exakt.rootColors && $exakt.rootColors.includes(props.background))
 const backgroundClass = computed(() => {
   const c: { [key: string]: boolean } = {}
 
-  if(props.background == 'transparent'){
+  if (props.background == 'transparent') {
     c['transparent'] = true;
-  }else if (isRootColor.value) {
+  } else if (isRootColor.value) {
     c["bg-" + props.background] = true
   } else {
     c['custom-color'] = true
@@ -161,7 +166,7 @@ const textColor = computed(() => {
   flex-shrink: 1;
   position: relative;
   transition: background 0.4s, color 0.3s, opacity 0.4s;
-
+  white-space: nowrap;
   font-family: var(--e-font-family);
   box-sizing: border-box;
 
@@ -170,9 +175,10 @@ const textColor = computed(() => {
   &.transparent {
     color: var(--e-color-text);
     background: rgba(0, 0, 0, 0);
+
     &:hover {
-       background: rgba(98, 98, 98, 0.15);
-       opacity: 1;
+      background: rgba(98, 98, 98, 0.15);
+      opacity: 1;
     }
   }
 
@@ -190,8 +196,8 @@ const textColor = computed(() => {
   }
 
   &:hover {
-   // background: rgba(98, 98, 98, 0.15);
-   opacity: 0.7;
+    // background: rgba(98, 98, 98, 0.15);
+    opacity: 0.7;
     border: transparent solid 0.1rem;
   }
 
@@ -220,17 +226,30 @@ const textColor = computed(() => {
     background-color: v-bind(backgroundColor);
     color: v-bind(textColor);
 
-   /* &:hover {
+    /* &:hover {
       opacity: 0.9;
     } */
   }
 
   &.solid {
     padding: 0.7rem 0.9rem;
+
+    &.compact {
+      padding: 0.6rem 0.8rem;
+    }
   }
 
   &.active {
     color: var(--e-color-primary);
+
+    &.transparent {
+      background: rgba(var(--e-color-primary-rgb), 0.1);
+
+      &:hover {
+        background: rgba(var(--e-color-primary-rgb), 0.075);
+        opacity: 1;
+      }
+    }
   }
 
   &.inactive {
@@ -239,7 +258,7 @@ const textColor = computed(() => {
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   .e-btn.fab {
     right: 1rem;
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="e-chip py-3 px-4 ma-1 d-flex flex-center"
+    class="e-chip py-3 px-4 ma-1 flex-center"
     :class="{ active, 'bg-i-active':active, 'bg-i-inactive':!active }"
     @click="active = !active"
   >
@@ -46,6 +46,7 @@ const active = computed({
     user-select: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     cursor: pointer;
+    display: inline-flex;
 
     &>.check {
         display: none;

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

@@ -16,11 +16,12 @@ withDefaults(
   defineProps<{
     noBtnPadding?: boolean;
     forceFullWidth?: boolean;
-
+    sizes?: number[],
   }>(),
   {
     noBtnPadding: false,
-    forceFullWidth:false
+    forceFullWidth:false,
+    sizes: () => [100, 95, 85]
   }
 );
 </script>
@@ -30,7 +31,7 @@ withDefaults(
 
   width: 95%;
 
-  @media (max-width: $e-md-screen-breakpoint) {
+  @media (max-width: exakt.$e-md-screen-breakpoint) {
     &.forceFullWidth {
       width: 100%;
     }
@@ -38,16 +39,16 @@ withDefaults(
 
   $padding: 0rem;
 
-  @media (min-width: $e-md-screen-breakpoint) {
-    width: calc(100% - $padding);
+  @media (min-width: exakt.$e-md-screen-breakpoint) {
+    width: calc(v-bind('`${sizes[0]}vw`') - $padding);
   }
 
-  @media (min-width: $e-lg-screen-breakpoint) {
-    width: calc(95% - $padding);
+  @media (min-width: exakt.$e-lg-screen-breakpoint) {
+    width: calc(v-bind('`${sizes[1]}vw`') - $padding);
   }
 
-  @media (min-width: $e-xl-screen-breakpoint) {
-    width: calc(85% - $padding);
+  @media (min-width: exakt.$e-xl-screen-breakpoint) {
+    width: calc(v-bind('`${sizes[2]}vw`') - $padding);
   }
 }
 

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

@@ -1,24 +1,18 @@
 <template>
   <div>
-    <e-focus-sheet
-      :model-value="modelValue"
-      :opaque-on-desktop="true"
-      @update:model-value="emit('update:modelValue', $event)"
-    />
+    <e-focus-sheet :model-value="modelValue" :opaque-on-desktop="true"
+      @update:model-value="emit('update:modelValue', $event)" v-bind="{ dismissable }" />
 
     <e-tr-scale :multiplier="1.3">
-      <div
-        v-if="modelValue"
-        class="dialog-wrap flex-center"
-      >
+      <div v-if="modelValue" class="dialog-wrap flex-center">
         <div class="dialog bg-elev rounded px-6 pe-6 pb-2">
-          <div class="mb-4">
+          <div v-if="!!slots.title" class="my-4">
             <h2 class="ma-0 pa-0">
               <slot name="title" />
             </h2>
           </div>
           <slot />
-          <div class="button-bar me-4 mb-3">
+          <div class="button-bar mb-3">
             <slot name="buttons" />
           </div>
         </div>
@@ -28,9 +22,15 @@
 </template>
 
 <script setup lang="ts">
- defineProps<{
-  modelValue: boolean;
-}>();
+import { useSlots } from '#imports';
+withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    dismissable?: boolean;
+  }>(), { dismissable: true });
+
+const slots = useSlots();
+
 const emit = defineEmits(["update:modelValue"]);
 </script>
 <style scoped lang="scss">
@@ -51,7 +51,7 @@ const emit = defineEmits(["update:modelValue"]);
   overflow: clip;
 }
 
-@media (max-width: $e-md-screen-breakpoint) {
+@media (max-width: exakt.$e-md-screen-breakpoint) {
   .dialog {
     width: 100%;
     max-width: 100vw;

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

@@ -1,10 +1,7 @@
 <template>
   <div class="flex-stretch t-dropdown">
     <!-- class="flex-stretch fullwidth" -->
-    <div
-      ref="activator"
-      @click="onActivatorClick"
-    >
+    <div ref="activator" @click="onActivatorClick">
       <slot />
     </div>
     <e-focus-sheet v-model="visibleComputed" />
@@ -13,14 +10,15 @@
         v-if="visibleComputed"
         ref="list"
         class="list bg-elev-2 rounded"
-        :style="{position:(fixed?'fixed':undefined)}"
+        :style="{ position: fixed ? 'fixed' : undefined }"
       >
         <component
-          :is="item.href ? 'a' : 'div'"
+          :is="item.to ? EUndecoratedLink : item.href ? 'a' : 'div'"
           v-for="(item, i) in items"
           :key="i"
           class="fullwidth"
           :href="item.href ? item.href : undefined"
+          :to="item.to ? item.to : undefined"
         >
           <e-btn
             justify="start"
@@ -35,28 +33,28 @@
             }"
             @click="select(i)"
           >
-            <e-icon
-              v-if="item.icon"
-              :size="20"
-              class="mr-2"
-            >
+            <e-icon v-if="item.icon" :size="20" class="mr-2">
               {{ item.icon }}
             </e-icon>
             {{ item.name }}
           </e-btn>
         </component>
+        <div class="mx-4 my-2 fullwidth text-secondary" v-if="hint">
+          {{ hint }}
+        </div>
       </div>
     </e-tr-scale>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, reactive, watch/*, nextTick*/ } from "#imports";
-import  _ from "lodash-es";
+import { computed, ref, reactive, watch, resolveComponent } from "#imports";
+import { debounce } from "lodash-es";
 
 interface DropdownItem {
   name: string;
   icon?: string;
   href?: string;
+  to?: string;
   callback?: () => void;
   color?: string;
   background?: string;
@@ -65,27 +63,31 @@ interface DropdownItem {
 const props = withDefaults(
   defineProps<{
     modelValue?: number;
-    width: string | number | "100%";
+    width?: string | "100%";
     center?: boolean;
     items: DropdownItem[];
+    hint?: string;
     visible?: boolean | null;
-    paddingY?: string;
-    position?: { x: number, y: number }
-    fixed?:boolean;
+    fixed?: boolean;
   }>(),
-  { center: false, visible: null, paddingY: "", modelValue: undefined }
+  {
+    center: false,
+    visible: null,
+    paddingY: "",
+    modelValue: undefined,
+    position: undefined,
+    width: undefined,
+  },
 );
 
 const activator = ref<HTMLDivElement>();
 const list = ref<HTMLDivElement>();
-
+const EUndecoratedLink = resolveComponent("EUndecoratedLink");
 const state = reactive({
   visibleInternal: false,
   x: 0,
   y: 0,
-  width: 0,
 });
-
 // Visibility computed variable. We use the state unless we have a variable from the parent.
 const visibleComputed = computed<boolean>({
   get: () => {
@@ -103,49 +105,20 @@ const visibleComputed = computed<boolean>({
   },
 });
 
-function computeWidth(input: string | number) {
-  const div = document.createElement("div");
-  document.body.appendChild(div);
-  div.style.width = String(input);
-  const c = getComputedStyle(div).width as any;
-  // const res = c.match(/[.\d]+/g).map(Number);
-
-  div.remove();
-  return parseInt(c, 10);
-}
-
 const updatePosition = async () => {
-
-  if (!visibleComputed.value) {
-    window.removeEventListener("resize", debouncedUpdatePosition);
-    return;
-  }
-
   if (activator.value) {
     const activatorRect = activator.value.getBoundingClientRect();
 
-    if (props.width === "100%") {
-      state.width = activatorRect.width;
-    } else {
-      state.width = computeWidth(props.width);
-    }
-
-    state.y = activatorRect.height;
+    state.y = Math.round(activatorRect.height);
     state.x = 0;
 
-  } else {
-    state.width = computeWidth(props.width);
-
-
-  }
-  if (props.position) {
-      state.x = props.position.x;
-      state.y = props.position.y;
-      return;
-    }
-  state.x = 0;
-  state.y = 0;
-
+    // Too far right :(
+    //if (window.innerWidth > listRect.right) {
+    //state.x = -1 * activatorRect.width
+    // }
+  } //else{
+  //console.log(activator.value,  list.value)
+  //}
   /* await nextTick();
   if (!list.value) return;
 
@@ -157,7 +130,7 @@ const updatePosition = async () => {
   } */
 };
 
-const debouncedUpdatePosition = _.debounce(updatePosition, 200);
+const debouncedUpdatePosition = debounce(updatePosition, 200);
 
 watch(visibleComputed, (value) => {
   if (value) {
@@ -178,7 +151,7 @@ const currentItem = computed({
 const select = (i: number) => {
   visibleComputed.value = false;
   currentItem.value = i;
-  if(props.items[i].callback){
+  if (props.items[i].callback) {
     props.items[i].callback();
   }
 };
@@ -194,9 +167,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('props.width || "unset"');
   display: flex;
 
   z-index: 6;
@@ -205,7 +178,6 @@ const onActivatorClick = () => {
   flex-direction: column;
   overflow: clip;
   justify-items: stretch;
-  margin-top: v-bind("props.paddingY");
 
   .item {
     // color: var(--e-color-text);
@@ -213,12 +185,13 @@ const onActivatorClick = () => {
     padding: 0.7rem;
     text-transform: capitalize;
     position: relative;
-
+    white-space: nowrap;
     &:hover {
       background-color: rgba(var(--e-color-fg-rgb), 0.5);
     }
 
-    &:focus {}
+    &:focus {
+    }
 
     &.active {
       background-color: rgba(var(--e-color-primary-rgb), 0.2);
@@ -230,7 +203,7 @@ const onActivatorClick = () => {
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   .list {
     position: fixed;
     top: unset;

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

@@ -1,21 +1,24 @@
 <template>
   <div>
     <Transition name="fade">
-      <div
-        v-if="modelValue"
-        class="focus-sheet"
-        :class="{ 'opaque-on-desktop': opaqueOnDesktop }"
-        @click="emit('update:modelValue', false)"
-      />
+      <div v-if="modelValue" class="focus-sheet" :class="{ 'opaque-on-desktop': opaqueOnDesktop }" @click="dismiss" />
     </Transition>
   </div>
 </template>
 <script setup lang="ts">
-/*const props =*/ defineProps<{
+
+const props = withDefaults(defineProps<{
   modelValue: boolean;
   opaqueOnDesktop?: boolean;
-}>();
+  dismissable?: boolean;
+}>(), { dismissable: true });
 const emit = defineEmits(["update:modelValue"]);
+
+const dismiss = () => {
+  if (props.dismissable) {
+    emit('update:modelValue', false);
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -33,7 +36,7 @@ const emit = defineEmits(["update:modelValue"]);
   }
 }
 
-@media screen and (max-width: $e-md-screen-breakpoint) {
+@media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   .focus-sheet {
     background-color: rgba(var(--e-color-bg-rgb), 0.7);
   }

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

@@ -13,7 +13,7 @@ const props = withDefaults(
   defineProps<{
     iconStyle?: 'outlined' | 'rounded' | 'sharp', size?: number|`${number}`, fill?:boolean|"0"|"1"|`${boolean}`, grade?:number|`${number}`, weight?: number|`${number}`
   }>(),
-  { iconStyle: 'rounded', size: 24, fill:true, weight: 400, grade:0}
+  { iconStyle: 'outlined', size: 24, fill:true, weight: 400, grade:0}
 );
 
 const sizePx = computed(() => props.size + "px")
@@ -30,13 +30,14 @@ const fillNum = computed(()=> {
   font-weight: normal;
   font-style: normal;
   /* Preferred icon size */
-  display: inline-block;
+  display: inline;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
+
 }
 
 .material-symbol[icon-style="outlined"] {

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

@@ -8,7 +8,7 @@
   >
     <e-icon
       v-if="icon"
-      
+      :fill="fill"
       :size="size"
     >
       {{ icon }}
@@ -18,8 +18,8 @@
 </template>
 <script setup lang="ts">
 withDefaults(
-  defineProps<{ icon?: string; size?: string; loading?: boolean, type?: "button" | "submit" | "reset" }>(),
-  { size: "21" }
+  defineProps<{ icon?: string; size?: number|`${number}`; loading?: boolean, type?: "button" | "submit" | "reset", fill?: boolean }>(),
+  { size: "21", icon: undefined, type:undefined }
 );
 </script>
 <style scoped>