@exakt/ui 0.0.64 → 0.0.67

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.64"
+  "version": "0.0.67"
 }

package/dist/module.mjs

@@ -54,7 +54,9 @@ const module = defineNuxtModule({
     SCSSvariables += `$root-hue: ${options.hue}; `;
     for (const mode of ["light", "dark"]) {
       SCSSvariables += `$root-colors-${mode}: (`;
-      for (const [key, value] of Object.entries(options.colors[mode])) {
+      for (const [key, value] of Object.entries(
+        options.colors[mode]
+      )) {
         SCSSvariables += `"${key}": ${value}, `;
       }
       SCSSvariables += ");";

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

@@ -15,7 +15,7 @@
       loading,
       fab,
       compact,
-      ...backgroundClass
+      ...backgroundClass,
     }"
   >
     <div
@@ -42,7 +42,7 @@
   </component>
 </template>
 <script lang="ts" setup>
-import { computed, useNuxtApp, } from "#imports";
+import { computed, useNuxtApp } from "#imports";
 const { $exakt } = useNuxtApp();
 const props = withDefaults(
   defineProps<{
@@ -71,8 +71,8 @@ const props = withDefaults(
     compact: false,
     align: "center",
     color: undefined,
-    button: true
-  }
+    button: true,
+  },
 );
 
 function parseColor(input: string) {
@@ -93,28 +93,33 @@ const backgroundColorRgb = computed(() => {
   return parseColor($exakt.parseColor(props.background));
 });
 
-const isRootColor = computed(() => $exakt && $exakt.rootColors && $exakt.rootColors.includes(props.background))
+const isRootColor = computed(
+  () =>
+    $exakt && $exakt.rootColors && $exakt.rootColors.includes(props.background),
+);
 const backgroundClass = computed(() => {
-  const c: { [key: string]: boolean } = {}
+  const c: { [key: string]: boolean } = {};
 
-  if (props.background == 'transparent') {
-    c['transparent'] = true;
+  if (props.background == "transparent") {
+    c["transparent"] = true;
   } else if (isRootColor.value) {
-    c["bg-" + props.background] = true
+    c["bg-" + props.background] = true;
   } else {
-    c['custom-color'] = true
+    c["custom-color"] = true;
   }
 
-  return c
-})
+  return c;
+});
 const backgroundColor = computed(() => {
-  if (isRootColor.value) { return 'unset' } else {
-    return props.background
+  if (isRootColor.value) {
+    return "unset";
+  } else {
+    return props.background;
   }
-})
+});
 const textColor = computed(() => {
   if (isRootColor.value) {
-    return 'unset';
+    return "unset";
   }
   if (props.color) {
     return props.color;
@@ -125,7 +130,7 @@ const textColor = computed(() => {
   const rgb = backgroundColorRgb.value;
 
   const brightness = Math.round(
-    (299 * rgb.r + 224490 + 587 * rgb.g + 114 * rgb.b) / 2000
+    (299 * rgb.r + 224490 + 587 * rgb.g + 114 * rgb.b) / 2000,
   );
   if (brightness > 150) {
     // Dark Text
@@ -133,8 +138,6 @@ const textColor = computed(() => {
   }
   return "#FFFFFF";
 });
-
-
 </script>
 <style lang="scss" scoped>
 .e-btn-content {
@@ -165,7 +168,10 @@ const textColor = computed(() => {
   cursor: pointer;
   flex-shrink: 1;
   position: relative;
-  transition: background 0.4s, color 0.3s, opacity 0.4s;
+  transition:
+    background 0.4s,
+    color 0.3s,
+    opacity 0.4s;
   white-space: nowrap;
   font-family: var(--e-font-family);
   box-sizing: border-box;
@@ -264,7 +270,6 @@ const textColor = computed(() => {
   }
 }
 
-
 .load-overlay {
   position: absolute;
   top: 0;

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

@@ -3,9 +3,14 @@
     <!-- class="flex-stretch fullwidth" -->
     <div
       ref="activator"
+      class="flex-1"
       @click="onActivatorClick"
     >
-      <slot />
+      <slot
+        :current-item="
+          typeof currentItem == 'number' ? items[currentItem] : undefined
+        "
+      />
     </div>
     <e-focus-sheet v-model="visibleComputed" />
     <e-tr-scale>
@@ -15,6 +20,12 @@
         class="list bg-elev-2 rounded"
         :style="{ position: fixed ? 'fixed' : undefined }"
       >
+        <div
+          v-if="title"
+          class="mx-4 my-2 fullwidth text-secondary"
+        >
+          {{ title }}
+        </div>
         <component
           :is="item.to ? EUndecoratedLink : item.href ? 'a' : 'div'"
           v-for="(item, i) in items"
@@ -30,8 +41,8 @@
             :solid="false"
             :background="item.background || 'transparent'"
             :class="{
-              'rounded-top': i === 0,
-              'rounded-bottom': i === items.length - 1,
+              'rounded-top': i === 0 && !title,
+              'rounded-bottom': i === items.length - 1 && !hint,
               active: currentItem === i,
             }"
             @click="select(i)"
@@ -68,15 +79,18 @@ interface DropdownItem {
   callback?: () => void;
   color?: string;
   background?: string;
+  id?: string | number;
 }
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: number;
+    modelValue?: number | string;
     width?: string | "100%";
     center?: boolean;
     items: DropdownItem[];
     hint?: string;
+    title?: string;
+    useIds?: boolean;
     visible?: boolean | null;
     fixed?: boolean;
   }>(),
@@ -87,6 +101,9 @@ const props = withDefaults(
     modelValue: undefined,
     position: undefined,
     width: undefined,
+    useIds: false,
+    hint: undefined,
+    title: undefined,
   },
 );
 
@@ -123,7 +140,6 @@ const updatePosition = async () => {
     state.x = 0;
 
     //Too far right :(
-    console.log(list.value);
     if (list.value) {
       if (window?.innerWidth > list.value?.getBoundingClientRect().right) {
         state.x = -1 * activatorRect.width;
@@ -153,6 +169,10 @@ watch(
         state.x =
           window?.innerWidth - newList.getBoundingClientRect().right - 15;
       }
+      if (window?.innerHeight < newList.getBoundingClientRect().bottom) {
+        const { bottom, top } = newList.getBoundingClientRect();
+        state.y = window?.innerHeight - bottom;
+      }
     }
   },
 );
@@ -171,8 +191,12 @@ watch(visibleComputed, (value) => {
 const emit = defineEmits(["update:modelValue", "update:visible"]);
 
 const currentItem = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
+  get: () =>
+    props.useIds
+      ? props.items.findIndex(({ id }) => props.modelValue == id)
+      : props.modelValue,
+  set: (value: number) =>
+    emit("update:modelValue", props.useIds ? props.items[value]?.id : value),
 });
 
 const select = (i: number) => {
@@ -216,7 +240,7 @@ a {
     // color: var(--e-color-text);
     font-size: 1rem;
     padding: 0.7rem;
-    text-transform: capitalize;
+   // text-transform: capitalize;
     position: relative;
     white-space: nowrap;
     &:hover {

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

@@ -11,19 +11,22 @@ import { computed } from "#imports";
 
 const props = withDefaults(
   defineProps<{
-    iconStyle?: 'outlined' | 'rounded' | 'sharp', size?: number|`${number}`, fill?:boolean|"0"|"1"|`${boolean}`, grade?:number|`${number}`, weight?: number|`${number}`
+    iconStyle?: "outlined" | "rounded" | "sharp";
+    size?: number | `${number}`;
+    fill?: boolean | "0" | "1" | `${boolean}`;
+    grade?: number | `${number}`;
+    weight?: number | `${number}`;
   }>(),
-  { iconStyle: 'outlined', size: 24, fill:true, weight: 400, grade:0}
+  { iconStyle: "outlined", size: 24, fill: true, weight: 400, grade: 0 },
 );
 
-const sizePx = computed(() => props.size + "px")
-const fillNum = computed(()=> {
-  if([true, "true", "1"].includes(props.fill)){
+const sizePx = computed(() => props.size + "px");
+const fillNum = computed(() => {
+  if ([true, "true", "1"].includes(props.fill)) {
     return 1;
   }
   return 0;
-})
-
+});
 </script>
 <style lang="scss">
 .material-symbol {
@@ -37,26 +40,30 @@ const fillNum = computed(()=> {
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
-
+  user-select: none;
 }
 
 .material-symbol[icon-style="outlined"] {
-  font-family: 'Material Symbols Outlined';
+  font-family: "Material Symbols Outlined";
 }
 
 .material-symbol[icon-style="rounded"] {
-  font-family: 'Material Symbols Rounded';
+  font-family: "Material Symbols Rounded";
 }
 
 .material-symbol[icon-style="sharp"] {
-  font-family: 'Material Symbols 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');
+  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>
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <e-input-text
+    type="number"
+    v-bind="{ ...props, modelValue: props.modelValue?.toString() }"
+    @update:model-value="updateNum($event)"
+  />
+</template>
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    icon?: string;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    modelValue?: number;
+    defaultValue?: string;
+    solid?: boolean;
+    rounded?: boolean;
+    autocomplete?: string;
+    disabled?: boolean;
+    required?: boolean;
+    focus?: boolean;
+    spellcheck?: boolean;
+    height?: string;
+    width?: string;
+    compact?: boolean;
+  }>(),
+  {
+    icon: undefined,
+    label: "",
+    solid: true,
+    modelValue: undefined,
+    autocomplete: "off",
+    height: "unset",
+    width: "100%",
+    compact: false,
+    rounded: undefined,
+    placeholder: undefined,
+    name: undefined,
+    defaultValue: undefined,
+  },
+);
+
+const emit = defineEmits(["update:model-value", "update:validity"]);
+const updateNum = (newValue: string) => {
+  const parsed = Number.parseInt(newValue);
+  if (Number.isNaN(parsed)) {
+    emit("update:validity", false);
+    return;
+  }
+
+  emit("update:validity", true);
+  emit("update:model-value", parsed);
+};
+</script>

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

@@ -0,0 +1,95 @@
+<template>
+  <div
+    v-if="label"
+    class="my-3"
+  >
+    <label> {{ label }} </label>
+  </div>
+  <e-dropdown
+    v-slot="{ currentItem }"
+    :items="items"
+    :visible="focus"
+    :width="width"
+    :model-value="props.modelValue"
+    :use-ids="useIds"
+    @update:model-value="emit('update:modelValue', $event)"
+    @update:visible="focus = $event"
+  >
+    <div
+      :class="{ focus }"
+      class="btn rounded"
+    >
+      <div class="d-flex justify-space-between">
+        <div
+          v-if="currentItem"
+          class="flex-center"
+        >
+          <e-icon
+            v-if="currentItem?.icon"
+            size="20"
+            class="mr-2"
+          >
+            {{ currentItem?.icon }}
+          </e-icon>
+          {{ currentItem?.name }}
+        </div>
+        <div v-else />
+        <e-icon
+          class="text-secondary ml-1"
+          size="20"
+        >
+          arrow_drop_down
+        </e-icon>
+      </div>
+    </div>
+  </e-dropdown>
+</template>
+<script setup lang="ts">
+import { ref } from "#imports";
+const focus = ref(false);
+
+interface DropdownItem {
+  name: string;
+  icon?: string;
+  href?: string;
+  to?: string;
+  callback?: () => void;
+  color?: string;
+  background?: string;
+}
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = withDefaults(
+  defineProps<{
+    items: DropdownItem[] | [];
+    label?: string;
+    useIds?: boolean;
+    modelValue: number | undefined;
+    width?: string | "100%";
+  }>(),
+  {
+    items: () => [],
+    modelValue: undefined,
+    label: undefined,
+    useIds: false,
+  },
+);
+</script>
+<style lang="scss" scoped>
+.btn {
+  outline: var(--e-color-i-outline) solid 0.1rem;
+  transition:
+    outline ease-in-out 0.15s,
+    background-color ease-in-out 0.15s;
+  margin: 0.125rem;
+  user-select: none;
+  cursor: pointer;
+  padding: 0.7rem 0.9rem;
+  width: v-bind("props.width");
+  background-color: var(--e-color-i-depressed);
+  &.focus {
+    outline: var(--e-color-primary) solid 0.125rem;
+  }
+}
+</style>

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

@@ -11,8 +11,6 @@ defineProps<{
 //const colorFromScriptSetup = "green";
 </script>
 <style lang="scss" scoped>
-
-
 nav {
   z-index: 5;
   min-height: 3.5rem;
@@ -21,7 +19,9 @@ nav {
   overflow-y: none;
   display: flex;
   align-items: center;
- // position: sticky;
+  gap: 0.4rem;
+
+  // position: sticky;
   top: 0;
   left: 0;
 }
@@ -31,7 +31,6 @@ nav.fixed {
   width: 100%;
 }
 
-
 @media screen and (max-width: exakt.$e-md-screen-breakpoint) {
   nav {
     position: fixed;
@@ -41,9 +40,9 @@ nav.fixed {
     width: 100%;
     justify-content: stretch;
     margin: 0 !important;
-    padding: 0.2rem 0.6rem calc(0.2rem + env(safe-area-inset-bottom)) 0.6rem ;
+    padding: 0.2rem 0.6rem calc(0.2rem + env(safe-area-inset-bottom)) 0.6rem;
+    gap: 0.2rem;
     background: var(--e-color-elev);
   }
 }
-
 </style>

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

@@ -23,8 +23,9 @@
         >
           <e-icon
             class="icon"
-            :size="label ? 20 : 25"
             :fill="active"
+            icon-style="outlined"
+            :size="label ? 20 : 25"
           >
             {{ icon }}
           </e-icon>
@@ -54,6 +55,7 @@ const props = withDefaults(
     icon?: string;
     alert?: boolean;
     responsive?: boolean;
+    excludeActive?: string[];
   }>(),
   { to: "", label: "", icon: "", responsive: true },
 );
@@ -61,7 +63,23 @@ const props = withDefaults(
 const route = useRoute();
 
 const active = computed(() => {
-  return route && route.path && route.path.startsWith(props.to);
+  if (props.to == "/") {
+    return route.path == "/";
+  }
+  if (!route || !route.path) {
+    return false;
+  }
+
+  let excluded = false;
+  if (props.excludeActive) {
+    for (const e of props.excludeActive) {
+      if (route.path.startsWith(e)) {
+        excluded = true;
+        break;
+      }
+    }
+  }
+  return !excluded && route.path.startsWith(props.to);
 });
 </script>
 
@@ -126,7 +144,7 @@ a {
     p {
       margin: 0px;
       white-space: nowrap;
-      font-size: small;
+      font-size: 0.6rem;
     }
   }
 }

package/dist/runtime/css/main.scss

@@ -9,8 +9,8 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -103,10 +103,13 @@ a {
 
   $full: 0;
   $factor: 1;
+  $elev-factor: 1;
 
   @if $light ==1 {
     $full: 100;
     $factor: -1;
+    $elev-factor: -0.1;
+
   }
   $color-map: map.set($color-map, "source", $source);
 
@@ -125,9 +128,9 @@ a {
   $color-map: map.set($color-map, "fg", color.adjust($source, $lightness: 2%));
 
 
-  $color-map: map.set($color-map, "elev", color.scale(map.get($color-map, "fg"), $lightness: $lightness*0.25));
-  $color-map: map.set($color-map, "elev-2", color.scale(map.get($color-map, "fg"), $lightness: $lightness*0.5));
-  $color-map: map.set($color-map, "elev-3", color.scale(map.get($color-map, "fg"), $lightness: $lightness));
+  $color-map: map.set($color-map, "elev", color.scale(map.get($color-map, "fg"), $lightness: $lightness*$elev-factor*0.25));
+  $color-map: map.set($color-map, "elev-2", color.scale(map.get($color-map, "fg"), $lightness: $lightness*$elev-factor*0.5));
+  $color-map: map.set($color-map, "elev-3", color.scale(map.get($color-map, "fg"), $lightness: $lightness*$elev-factor));
 
 
 
@@ -144,7 +147,7 @@ a {
   color-scheme: light;
 }
 
-@include elev(95%,1, 1, exakt.$root-colors-light);
+@include elev(98%,1, 1, exakt.$root-colors-light);
 
 
 @media (prefers-color-scheme: dark) {
@@ -155,4 +158,4 @@ a {
   @include elev(8%,1,0, exakt.$root-colors-dark);
 
 
-}
+}

package/dist/runtime/plugin.mjs

@@ -33,7 +33,15 @@ export default defineNuxtPlugin(() => {
           }
           return p;
         },
-        rootColors: ["primary", "red", "text", "yellow", "elev", "i"],
+        rootColors: [
+          "primary",
+          "red",
+          "text",
+          "yellow",
+          "elev",
+          "i",
+          "i-depressed"
+        ],
         isRootColor: (c) => ["primary", "red", "text", "yellow", "elev", "i"].includes(c),
         /**
          * Generates an alphanumeric ID of a given length.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.64",
+  "version": "0.0.67",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -34,9 +34,9 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
-    "@nuxt/kit": "^3.16.2",
+    "@nuxt/kit": "^4.1.3",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.16.2",
+    "@nuxt/schema": "^4.1.3",
     "@nuxt/test-utils": "^3.2.3",
     "@types/lodash": "^4.14.191",
     "@types/lodash-es": "^4.17.9",
@@ -45,7 +45,7 @@
     "eslint": "^8.35.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "mkdist": "^1.2.0",
-    "nuxt": "^3.16.2",
+    "nuxt": "^4.1.3",
     "vitest": "^0.29.2"
   },
   "directories": {