@exakt/ui 0.0.48 → 0.0.50

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.48"
+  "version": "0.0.50"
 }

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

@@ -15,7 +15,7 @@
       <e-icon
         :size="props.size"
       >
-        person_circle
+        account_circle
       </e-icon>
     </div>
   </div>
@@ -30,8 +30,8 @@ const props = withDefaults(defineProps<{
 <style lang="scss" scoped>
 .avatar {
   border-radius: 100%;
-  width: fie-content;
-  height: fie-content;
+  width: fit-content;
+  height: fit-content;
   background-color: var(--e-color-elev);
 }
 

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

@@ -1,9 +1,16 @@
 <template>
-  <!-- <div class="pos-wrap">-->
+  <div
+    v-if="label"
+    class="mb-3 mt-6"
+  >
+    <label :for="id">
+      {{ label }} </label>
+  </div>
+
   <div
     class="wrapper fullwidth"
     :style="inputState.overtakeStyle"
-    :class="{ rounded: rounded==undefined?solid:rounded, solid }"
+    :class="{ rounded: rounded == undefined ? solid : rounded, solid }"
     @click="focus"
   >
     <e-icon
@@ -19,7 +26,7 @@
       ref="input"
       v-model="currentText"
       class="input"
-      :placeholder="label"
+      :placeholder="placeholder"
       autocomplete="off"
       auto-grow
       rows="5"
@@ -28,6 +35,7 @@
     />
     <input
       v-else
+      :id="id"
       ref="input"
       v-model="currentText"
       :disabled="disabled"
@@ -44,10 +52,9 @@
     >
     <slot />
   </div>
-  <!-- </div>-->
 </template>
 <script setup lang="ts">
-import { ref, watch, reactive, computed } from "#imports";
+import { ref, watch, reactive, computed, useId } from "#imports";
 
 const inputState = reactive({
   overtakeStyle: "",
@@ -55,6 +62,8 @@ const inputState = reactive({
   focused: false,
 });
 
+const id = useId();
+
 const input = ref<HTMLInputElement>();
 const emit = defineEmits(["update:modelValue"]);
 
@@ -81,8 +90,10 @@ const currentText = computed({
 
 const props = withDefaults(
   defineProps<{
-    icon?: string | undefined;
+    icon?: string;
     label: string;
+    placeholder?: string;
+
     modelValue?: string;
     solid?: boolean;
     rounded?: boolean;
@@ -102,7 +113,7 @@ const props = withDefaults(
     modelValue: "",
     autocomplete: "off",
     height: "unset",
-    rounded:undefined,
+    rounded: undefined,
   }
 );
 
@@ -116,7 +127,7 @@ watch(
 );
 
 const getInputStyle = (prop: string) => {
-  if(input.value === undefined) return;
+  if (input.value === undefined) return;
   const c = getComputedStyle(input.value).getPropertyValue(prop);
   return c;
 };
@@ -144,6 +155,7 @@ const transitionEnd = () => {
 
   // padding: 0px var(--e-core-padding-x);
 }
+
 .input {
   border: none;
   box-sizing: border-box;
@@ -200,7 +212,7 @@ const transitionEnd = () => {
   transition: outline ease-in-out 0.15s, background-color ease-in-out 0.15s;
 }
 
-.wrapper.solid:has(:focus){
+.wrapper.solid:has(:focus) {
   outline: var(--e-color-primary) solid 0.125rem;
   //box-shadow: 0 0 0 0.125rem  var(--e-color-primary);
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex-stretch nav-btn">
-    <e-link
+    <e-undecorated-link
       :to="to"
       class="flex-stretch fullwidth"
     >
@@ -38,7 +38,7 @@
         </div>
         <slot />
       </e-btn>
-    </e-link>
+    </e-undecorated-link>
   </div>
 </template>
 <script setup lang="ts">

package/dist/runtime/css/main.scss

@@ -54,17 +54,25 @@ $color-map: (
   }
 }
 
-a,
-.e-link {
-  color: $root-blue;
+a {
+  color: var(--e-color-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  text-decoration-thickness: 0.05rem;
+
 
   &:visited {
-    color: color.scale($root-blue, $lightness: -10%);
+    color: var(--e-color-primary);
+  }
+
+  &:active{
+    color: var(--e-color-i);
   }
 
-  &:active,
-  .e-link-active {
-    color: color.scale($root-blue, $lightness: 10%);
+  &:hover {
+  text-underline-offset: 0.15rem;
+    text-decoration-thickness: 0.1rem;
+
   }
 }
 
@@ -139,6 +147,6 @@ a,
     --e-color-dark: #{$root-light};
     --e-color-dark-rgb: #{$root-light-rgb};
     color-scheme: dark;
-    @include elev(10%, 0);
+    @include elev(15%, 0);
   }
 }

package/dist/runtime/css/util.scss

@@ -189,8 +189,6 @@ body {
   cursor: not-allowed !important;
 }
 
-router-link,
-a,
 input,
 label {
   text-decoration: none !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",