@exakt/ui 0.0.58 → 0.0.60

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.58"
+  "version": "0.0.60"
 }

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"
@@ -38,7 +39,7 @@
         <slot />
       </span>
     </div>
-  </button>
+  </component>
 </template>
 <script lang="ts" setup>
 import { computed, useNuxtApp, } from "#imports";
@@ -59,6 +60,7 @@ const props = withDefaults(
     disabled?: boolean;
     align?: string;
     type?: "button" | "submit" | "reset";
+    button?: boolean;
   }>(),
   {
     type: "button",
@@ -69,6 +71,7 @@ const props = withDefaults(
     compact: false,
     align: "center",
     color: undefined,
+    button: true
   }
 );
 
@@ -90,7 +93,7 @@ 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 } = {}
 
@@ -163,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;
 
@@ -243,7 +246,7 @@ const textColor = computed(() => {
       background: rgba(var(--e-color-primary-rgb), 0.1);
 
       &:hover {
-        background: rgba(var(--e-color-primary-rgb),0.075);
+        background: rgba(var(--e-color-primary-rgb), 0.075);
         opacity: 1;
       }
     }

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>
@@ -39,15 +40,15 @@ withDefaults(
   $padding: 0rem;
 
   @media (min-width: exakt.$e-md-screen-breakpoint) {
-    width: calc(100% - $padding);
+    width: calc(v-bind('`${sizes[0]}vw`') - $padding);
   }
 
   @media (min-width: exakt.$e-lg-screen-breakpoint) {
-    width: calc(95% - $padding);
+    width: calc(v-bind('`${sizes[1]}vw`') - $padding);
   }
 
   @media (min-width: exakt.$e-xl-screen-breakpoint) {
-    width: calc(85% - $padding);
+    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">

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, position: 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,23 @@ 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;
+    //Too far right :(
+    console.log(list.value);
+    if (list.value) {
+      if (window?.innerWidth > list.value?.getBoundingClientRect().right) {
+        state.x = -1 * activatorRect.width;
+      }
     }
-  state.x = 0;
-  state.y = 0;
-
+  } //else{
+  //console.log(activator.value,  list.value)
+  //}
   /* await nextTick();
   if (!list.value) return;
 
@@ -157,7 +133,20 @@ const updatePosition = async () => {
   } */
 };
 
-const debouncedUpdatePosition = _.debounce(updatePosition, 200);
+watch(
+  () => list.value,
+  (newList) => {
+    const activatorRect = activator.value?.getBoundingClientRect();
+
+    if (newList && activatorRect) {
+      if (window?.innerWidth < newList.getBoundingClientRect().right) {
+        state.x = -1 * activatorRect.width * 2;
+      }
+    }
+  },
+);
+
+const debouncedUpdatePosition = debounce(updatePosition, 200);
 
 watch(visibleComputed, (value) => {
   if (value) {
@@ -178,7 +167,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 +183,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 +194,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 +201,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);

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

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/input/checkbox.vue

@@ -0,0 +1,103 @@
+<template>
+  <label class="d-flex flex-align-center mt-3">
+    <input
+      v-bind="{ name }"
+      v-model="selected"
+      type="checkbox"
+    >
+    <slot />
+  </label>
+</template>
+<script setup lang="ts">
+import { computed } from '#imports';
+
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps<{ modelValue: boolean, name?: string }>();
+
+
+const selected = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(v) {
+        emit("update:modelValue", v);
+    },
+});
+</script>
+<style lang="scss" scoped>
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--e-color-i-inactive);
+
+    margin: 0;
+    outline: var(--e-color-i-outline) solid 0.1rem;
+
+    font-family: 'Material Symbols Outlined';
+    color: transparent;
+
+    width: 1rem;
+    margin-right: 0.6rem;
+    height: 1rem;
+    border-radius: 0.15em;
+
+    display: flex;
+
+    transition: background-color 0.15s, transform 0.15s;
+
+
+    &:hover {
+        background-color: var(--e-color-elev-2);
+    }
+
+    &::before {
+        content: "check";
+        background-color: var(--e-color-primary);
+        border-radius: 0.15em;
+        width: 100%;
+        text-align: center;
+        transform: scale(0);
+        transition: transform 0.15s ease-in-out, color 0.15s;
+    }
+
+    &:checked::before {
+        transform: scale(1);
+        color: var(--e-color-i-inactive);
+
+    }
+}
+
+
+
+input[type="checkbox"]:active {
+    transform: scale(0.9);
+
+    &::before {
+        color: transparent;
+        transform: scale(0.65);
+    }
+}
+
+
+
+
+
+
+
+
+
+input[type="checkbox"]:focus {
+    outline: var(--e-color-primary) solid 0.125rem;
+    background-color: var(--e-color-i-depressed-active);
+    &::before {
+        opacity: 0.7;
+    }
+}
+
+input[type="checkbox"]:disabled {
+    --form-control-color: var(--form-control-disabled);
+
+    color: var(--form-control-disabled);
+    cursor: not-allowed;
+}
+</style>

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

@@ -1,43 +1,93 @@
 <template>
-  <e-dropdown
-    v-model="dropdownActive"
-    :items="items"
-    width="100%"
-    :center="false"
-    :visible="dropdownVisible"
-    padding-y="0.25rem"
-    @update:visible="dropdownVisible = $event"
-  >
-    <e-input-text
-      v-model="searchField"
-      label="Input"
-      solid
-    />
-  </e-dropdown>
+  <div>
+    <e-dropdown
+      v-model="dropdownActive"
+      :items="items"
+      :visible="disabled ? false : dropdownVisible"
+      v-bind="{ width, hint }"
+      @update:visible="dropdownVisible = $event"
+      @update:model-value="updateSelection"
+    >
+      <e-input-text
+        v-model="searchFieldComputed"
+        v-bind="{ label, placeholder, icon }"
+        solid
+        @input="inputHandler"
+        :disabled="disabled"
+        :class="{ 'e-disabled': props.disabled }"
+      >
+        <slot />
+      </e-input-text>
+    </e-dropdown>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "#imports";
-const items = [{ name: "test" }, { name: "test2" }, { name: "test3" }];
+import { ref, watch, computed } from "#imports";
 const dropdownActive = ref<undefined | number>(undefined);
 const dropdownVisible = ref<boolean>(false);
-
+const props = defineProps<{
+  label?: string;
+  placeholder?: string;
+  width?: string;
+  items: { name: string; id: string | number }[];
+  modelValue?: number | string;
+  value?: string;
+  hint?: string;
+  icon?: string;
+  disabled?: boolean;
+}>();
 const searchField = ref("");
+const emit = defineEmits(["update:modelValue", "update:searchValue"]);
+const modified = ref(false);
+const updateSelection = ($event: number) => {
+  emit("update:modelValue", props.items[$event]?.id);
+};
 
-watch(searchField, (value) => {
-  if (value.length > 0) {
+const inputHandler = () => {
+  emit("update:searchValue", searchField.value);
+  modified.value = true;
+  if (searchField.value.length > 0) {
     //dropdownActive.value = 0;
     dropdownVisible.value = true;
+    return;
+  }
+  if (props.hint) {
+    dropdownVisible.value = true;
   } else {
-    dropdownActive.value = undefined;
     dropdownVisible.value = false;
   }
+  dropdownActive.value = undefined;
+};
+
+watch(
+  () => props.modelValue,
+  (modelValue) => {
+    if (modelValue) {
+      const foundItem = props.items.find(({ id }) => id == modelValue);
+      searchField.value = foundItem?.name || "";
+    } else {
+      searchField.value = "";
+    }
+  },
+);
+
+const searchFieldComputed = computed({
+  get: () => {
+    if (modified.value) {
+      return searchField.value;
+    }
+    return searchField.value || props.value || "";
+  },
+  set: (newValue) => {
+    searchField.value = newValue;
+  },
 });
 
 watch(dropdownActive, (value) => {
   if (value == undefined) {
     searchField.value = "";
   } else {
-    searchField.value = items[value].name;
+    searchField.value = props.items[value].name;
   }
 });
 </script>

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

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div v-if="label" class="pb-2">
+      <label :for="id" class="text-secondary">{{ label }}</label>
+    </div>
+    <input
+      :id="id"
+      v-model="currentText"
+      v-bind="{ required, disabled, type, name }"
+      class="py-3 px-4"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, useId, onMounted } from "#imports";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    name?: string;
+    modelValue?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    required?: boolean;
+    type?: string;
+  }>(),
+  {
+    label: "",
+    modelValue: "",
+    name: undefined,
+    type: "datetime-local",
+    defaultValue: undefined,
+  },
+);
+
+const id = useId();
+
+const internalText = ref<string | null>(null);
+const emit = defineEmits(["update:modelValue"]);
+
+const currentText = computed({
+  get: () => {
+    const setValue =
+      props.modelValue === undefined ? internalText.value : props.modelValue;
+
+    if (!setValue || !setValue.length) {
+      return props.defaultValue || "";
+    }
+
+    return setValue;
+  },
+  set: (value) => {
+    if (props.modelValue === undefined) {
+      internalText.value = value;
+    } else {
+      emit("update:modelValue", value);
+    }
+  },
+});
+
+onMounted(() => {
+  if (props.defaultValue) {
+    currentText.value = props.defaultValue;
+  }
+});
+</script>
+<style lang="scss" scoped>
+input[type="datetime-local"],
+input[type="date"] {
+  border-radius: var(--e-rounded-border-radius);
+  border: none;
+  outline: var(--e-color-i-outline) solid 0.1rem;
+  background-color: var(--e-color-i-depressed);
+  font-family: var(--e-font-family);
+
+  transition:
+    outline ease-in-out 0.15s,
+    background-color ease-in-out 0.15s;
+
+  &:active {
+    background-color: var(--e-color-i-depressed-2) !important;
+    outline: var(--e-color-primary) solid 0.2rem !important;
+  }
+
+  &:focus-within {
+    outline: var(--e-color-primary) solid 0.125rem;
+    //box-shadow: 0 0 0 0.125rem  var(--e-color-primary);
+    background-color: var(--e-color-i-depressed-active);
+  }
+}
+
+::-webkit-datetime-edit,
+::-webkit-date-edit {
+  font-family: var(--e-font-family);
+}
+</style>

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

@@ -5,6 +5,10 @@
     class="label mb-5"
   >
     {{ item[useKey] }}
+    <div
+      v-if="useSecondaryKey && item[useSecondaryKey]"
+      class="text-secondary"
+    >{{ item[useSecondaryKey] }}</div>
     <input
       v-model="selected"
       type="radio"
@@ -17,9 +21,10 @@
 <script lang="ts" setup>
 import {computed} from '#imports';
 const props = defineProps<{
-  items: { [shot: string]: string }[];
-  modelValue: number;
+  items: { [key: string]: string }[];
+  modelValue?: number;
   useKey: string;
+  useSecondaryKey?:string;
 }>();
 
 const emit = defineEmits(["update:modelValue"]);
@@ -67,7 +72,9 @@ const selected = computed({
   left: 0;
   height: var(--size);
   width: var(--size);
-  background-color: var(--e-color-elev);
+  background-color: var(--e-color-i-inactive);
+  outline: var(--e-color-i-outline) solid 0.1rem; 
+
   border-radius: 50%;
   transition: background-color 0.15s, transform 0.25s;
 }
@@ -84,7 +91,10 @@ const selected = computed({
 
   &~.checkmark::after {
     transform: scale(1) !important;
+    background-color: var(--e-color-primary);
   }
+
+
 }
 
 /* Checked */
@@ -116,7 +126,7 @@ const selected = computed({
   width: var(--size);
   height: var(--size);
   border-radius: 50%;
-  background: var(--e-color-text);
+  background: var(--e-color-i-active);
   transform: scale(0);
   transition: transform 0.25s;
   box-sizing: border-box;

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

@@ -2,16 +2,16 @@
   <div>
     <div
       v-if="label"
-      class="mb-3 mt-6"
+      class="my-3"
     >
       <label :for="id">
         {{ label }} </label>
     </div>
 
     <div
-      class="wrapper fullwidth"
+      class="wrapper"
       :style="inputState.overtakeStyle"
-      :class="{ rounded: rounded == undefined ? solid : rounded, solid, compact }"
+      :class="{ rounded: rounded === undefined ? solid : rounded, solid, compact }"
       @click="focus"
     >
       <e-icon
@@ -92,7 +92,7 @@ const internalText = ref<string | null>(null)
 
 const currentText = computed({
   get: () => {
-    const setValue = props.modelValue == undefined ? internalText.value : props.modelValue
+    const setValue = props.modelValue === undefined ? internalText.value : props.modelValue
 
     if (!setValue || !setValue.length) {
       return props.defaultValue || ''
@@ -100,7 +100,7 @@ const currentText = computed({
 
     return setValue
   },
-  set: (value) => { if (props.modelValue == undefined) { internalText.value = value } else { emit("update:modelValue", value) } },
+  set: (value) => { if (props.modelValue === undefined) { internalText.value = value } else { emit("update:modelValue", value) } },
 });
 
 onMounted(() => {
@@ -126,7 +126,7 @@ const props = withDefaults(
     focus?: boolean;
     spellcheck?: boolean;
     height?: string;
-
+    width?:string;
     compact?: boolean;
   }>(),
   {
@@ -137,6 +137,7 @@ const props = withDefaults(
     modelValue: "",
     autocomplete: "off",
     height: "unset",
+    width: "100%",
     compact: false,
     rounded: undefined,
     placeholder: undefined,
@@ -161,7 +162,7 @@ const getInputStyle = (prop: string) => {
 };
 
 const transitionEnd = () => {
-  inputState.autofilled = !inputState.autofilled;
+  //inputState.autofilled = !inputState.autofilled;
 
   if (inputState.autofilled) {
     inputState.overtakeStyle = `color: ${getInputStyle(
@@ -173,17 +174,6 @@ const transitionEnd = () => {
 };
 </script>
 <style scoped lang="scss">
-.pos-wrap {
-  display: flex;
-  align-content: stretch;
-  align-items: stretch;
-  justify-content: stretch;
-  width: 100%;
-  box-sizing: border-box;
-
-  // padding: 0px var(--e-core-padding-x);
-}
-
 .input {
   border: none;
   box-sizing: border-box;
@@ -196,6 +186,7 @@ const transitionEnd = () => {
   color: var(--e-color-text);
   font-family: var(--e-font-family);
   height: v-bind(height);
+
   transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
   &:-webkit-autofill {
@@ -227,7 +218,7 @@ const transitionEnd = () => {
   justify-content: stretch;
   align-items: center;
   justify-items: stretch;
-
+width: v-bind(width);
   position: relative;
 
   background-color: transparent;
@@ -242,8 +233,6 @@ const transitionEnd = () => {
 
 .wrapper.solid:has(:focus) {
   outline: var(--e-color-primary) solid 0.125rem;
-  //box-shadow: 0 0 0 0.125rem  var(--e-color-primary);
-
   background-color: var(--e-color-i-depressed-active);
 
 }
@@ -263,10 +252,6 @@ const transitionEnd = () => {
 
 
 
-.fullwidth {
-  width: 100%;
-}
-
 .wrapper:active {
   background-color: var(--e-color-i-depressed-2) !important;
   outline: var(--e-color-primary) solid 0.2rem !important;

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

@@ -1,32 +1,21 @@
 <template>
-  <e-undecorated-link
-    :to="to"
-    class="grow-on-mobile"
-  >
+  <e-undecorated-link :to="to" :class="{ 'grow-on-mobile': responsive }">
     <e-btn
       :solid="true"
       background="transparent"
-      class="nav-btn grow-on-mobile"
+      class="nav-btn"
+      :class="{ 'grow-on-mobile': responsive }"
       align="center"
       :active="active"
+      :button="false"
     >
-      <div class="content">
-        <div
-          v-if="icon"
-          class="icon-wrapper flex-center mr-2"
-        >
-          <e-icon
-            class="icon"
-            size="20"
-            :fill="active"
-          >
+      <div class="content" :class="{ responsive }">
+        <div v-if="icon" class="icon-wrapper flex-center mr-2">
+          <e-icon class="icon" size="20" :fill="active">
             {{ icon }}
           </e-icon>
           <transition name="fade">
-            <div
-              v-if="alert"
-              class="icon-alert"
-            />
+            <div v-if="alert" class="icon-alert" />
           </transition>
         </div>
         <p v-if="label">
@@ -47,18 +36,16 @@ const props = withDefaults(
     label?: string;
     icon?: string;
     alert?: boolean;
+    responsive?: boolean;
   }>(),
-  { to: "", label: "", icon: "" }
+  { to: "", label: "", icon: "", responsive: true },
 );
 
 const route = useRoute();
 
-
-
 const active = computed(() => {
-  return route && route.path === props.to;
+  return route && route.path && route.path.startsWith(props.to);
 });
-
 </script>
 
 <style scoped lang="scss">
@@ -67,7 +54,9 @@ const active = computed(() => {
   background-color: rgba(var(--e-color-primary-rgb), 0.075);
 }*/
 
-
+a {
+  border-radius: var(--e-rounded-border-radius);
+}
 
 .content {
   display: flex;
@@ -81,12 +70,9 @@ const active = computed(() => {
     margin: 0;
     padding: 0;
     white-space: nowrap;
-
   }
-
 }
 
-
 .icon-wrapper {
   position: relative;
   box-sizing: border-box;
@@ -107,27 +93,24 @@ const active = computed(() => {
   }
 }
 
-
 @media screen and (max-width: exakt.$e-md-screen-breakpoint) {
-
   .grow-on-mobile {
     flex-grow: 1;
     width: 100%;
   }
 
-  p {
-    margin: 0px;
-    white-space: nowrap;
-    font-size: small;
-
-  }
-
-  .content {
+  .content.responsive {
     flex-direction: column;
 
     .icon-wrapper {
       margin-right: 0rem;
     }
+
+    p {
+      margin: 0px;
+      white-space: nowrap;
+      font-size: small;
+    }
   }
 }
 </style>

package/dist/runtime/css/util.scss

@@ -102,6 +102,13 @@ $directions: (
   align-items: center;
 }
 
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+  justify-items: center;
+}
+
+
 .flex-align-center {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -34,9 +34,9 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
-    "@nuxt/kit": "latest",
+    "@nuxt/kit": "^3.16.2",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "latest",
+    "@nuxt/schema": "^3.16.2",
     "@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": "latest",
+    "nuxt": "^3.16.2",
     "vitest": "^0.29.2"
   },
   "directories": {
@@ -67,5 +67,5 @@
     "url": "https://github.com/wd-4000/exakt/issues"
   },
   "homepage": "https://github.com/wd-4000/exakt#readme",
-  "packageManager": "yarn@3.5.1"
+  "packageManager": "yarn@4.6.0"
 }

package/dist/runtime/components/e/input/datetime-local.vue

@@ -1,98 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="label"
-      class="pb-2"
-    >
-      <label
-        :for="id"
-        class="text-secondary"
-      >{{ label }}</label>
-    </div>
-    <input
-      :id="id"
-      v-model="currentText"
-      type="datetime-local"
-      class="py-3 px-4"
-      :name="name"
-      :required="required"
-      :disabled="disabled"
-    >
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, computed, useId, onMounted } from "#imports";
-
-
-const props = withDefaults(
-    defineProps<{
-        label?: string;
-        name?: string;
-        modelValue?: string;
-        defaultValue?: string;
-        disabled?: boolean;
-        required?: boolean;
-    }>(),
-    {
-        label: "",
-        modelValue: "",
-        name: undefined,
-        defaultValue: undefined
-    }
-);
-
-const id = useId();
-
-const internalText = ref<string | null>(null)
-const emit = defineEmits(["update:modelValue"]);
-
-
-const currentText = computed({
-    get: () => {
-        const setValue = props.modelValue == undefined ? internalText.value : props.modelValue
-
-        if (!setValue || !setValue.length) {
-            return props.defaultValue || ''
-        }
-
-        return setValue
-    },
-    set: (value) => { if (props.modelValue == undefined) { internalText.value = value } else { emit("update:modelValue", value) } },
-});
-
-onMounted(() => {
-    if (props.defaultValue) {
-        currentText.value = props.defaultValue
-    }
-})
-
-
-</script>
-<style lang="scss" scoped>
-
-input[type=datetime-local] {
-    border-radius: var(--e-rounded-border-radius);
-    border: none;
-    outline: var(--e-color-i-outline) solid 0.1rem;
-    background-color: var(--e-color-i-depressed);
-
-    transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
-
-    &:active {
-        background-color: var(--e-color-i-depressed-2) !important;
-        outline: var(--e-color-primary) solid 0.2rem !important;
-    }
-
-    &:focus-within {
-        outline: var(--e-color-primary) solid 0.125rem;
-        //box-shadow: 0 0 0 0.125rem  var(--e-color-primary);
-        background-color: var(--e-color-i-depressed-active);
-    }
-
-}
-
-
-::-webkit-datetime-edit {
-    font-family: var(--e-font-family);
-}
-</style>