@exakt/ui 0.0.3 → 0.0.5

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

@@ -0,0 +1,138 @@
+<template>
+  <div class="flex-stretch nav-btn">
+    <e-link
+      :to="to"
+      class="flex-stretch fullwidth"
+    >
+      <e-btn
+        :active="active"
+        class="button fullwidth"
+        :inactive="inactive"
+        :solid="false"
+        background="transparent"
+        :class="{ responsive }"
+      >
+        <div class="content">
+          <div
+            v-if="icon"
+            class="icon-wrapper flex-center"
+            :class="{ 'mr-2': label, 'mx-4': !label }"
+          >
+            <e-icon
+              :icon="icon"
+              class="icon"
+              :size="size"
+            />
+            <transition name="fade">
+              <div
+                v-if="alert"
+                class="icon-alert"
+              />
+            </transition>
+          </div>
+          <p v-if="label">
+            {{ label }}
+          </p>
+        </div>
+        <slot />
+      </e-btn>
+    </e-link>
+  </div>
+</template>
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    to?: string;
+    label?: string;
+    icon?: string;
+    size?: string;
+    responsive?: boolean;
+    alert?: boolean;
+  }>(),
+  { to: "", label: "", icon: "", responsive: true, size: "20" }
+);
+
+const route = useRoute();
+
+const aspect = computed(() => {
+  if (props.icon) {
+    return "3/2";
+  }
+
+  return "unset";
+});
+
+const active = computed(() => {
+  return route && route.path === props.to;
+});
+const inactive = computed(() => {
+  return !active.value && Boolean(props.icon);
+});
+</script>
+
+<style scoped lang="scss">
+
+.nav-btn{
+  flex-grow: 1;
+}
+.button:first-child {
+  aspect-ratio: unset;
+
+  .content {
+    display: flex;
+
+    flex-direction: row;
+
+    justify-content: center;
+    align-content: center;
+    justify-items: center;
+    align-items: center;
+
+    .icon {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+.icon-wrapper {
+  position: relative;
+  box-sizing: border-box;
+  aspect-ratio: 1;
+
+  .icon-alert {
+    // Add a blue dot to the bottom right of the icon
+    content: "";
+    position: absolute;
+    width: 0.5rem;
+    z-index: 2;
+    height: 0.5rem;
+    border-radius: 100%;
+    bottom: 0.1rem;
+    right: 0px;
+    background-color: var(--t-color-primary);
+    outline: 0.1rem solid var(--t-elev-2);
+  }
+}
+
+@media screen and (max-width: $e-md-screen-breakpoint) {
+  .button.responsive {
+    aspect-ratio: v-bind(aspect);
+
+    p {
+      margin: 0px;
+      white-space: nowrap;
+    }
+
+    .content {
+      flex-direction: column;
+
+      .icon-wrapper {
+        margin-right: 0rem;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,7 @@
 <template>
-  <e-icon-button class="rounded pa-1" size="20"
+  <e-icon-button
+    class="rounded pa-1"
+    size="20"
     :icon="modelValue ? mdiEye : mdiEyeOff"
     @click.stop="emit('update:modelValue', !modelValue)"
   />

package/dist/runtime/components/e/progress/gradient.vue

@@ -1,5 +1,5 @@
 <template>
-    <div></div>
+  <div />
 </template>
 <script setup lang="ts">
 const { $exakt } = useNuxtApp()
@@ -12,31 +12,44 @@ const props = withDefaults(
 const parsedColor = computed(() => $exakt.parseColor(props.color, 'rgb'));
 
 </script>
-<style scoped>
+<style scoped lang="scss">
 div {
-  display: block;
-  width: 100%;
-  height: 100%;
-  --pc: v-bind(parsedColor);
-  background-image: linear-gradient(90deg, rgba(var(--pc), 0) 0%, rgba(var(--pc), 0.5) 50%, rgba(var(--pc), 0) 50.1%, rgba(var(--pc), 0) 100%);
-  background-size: 200% 100%;
-  animation: pos 3.5s linear infinite;
+    display: block;
+    width: 100%;
+    height: 100%;
+    --pc: v-bind(parsedColor);
+    background-image: linear-gradient(90deg,
+            rgba(var(--pc), 0) 0%,
+            rgba(var(--pc), 0.5) 50%,
+            rgba(var(--pc), 0) 50.1%,
+            rgba(var(--pc), 0) 100%,
+
+        );
+
+
+    background-size: 200% 100%;
+
+    animation: pos 3.5s linear infinite;
 }
 
 @keyframes pos {
-  0%, 10% {
-    background-position: 100% 0%;
-    opacity: 1;
-  }
-  40% {
-    opacity: 1;
-  }
-  70% {
-    opacity: 0;
-  }
-  100% {
-    background-position: -100% 0%;
-    opacity: 0;
-  }
+    0%,10% {
+        background-position: 100% 0%;
+        opacity: 1;
+    }
+   40% {
+        opacity: 1;
+    }
+
+   70% {
+        opacity: 0;
+    }
+
+    100% {
+        background-position: -100% 0%;
+        opacity: 0;
+    }
+
+
 }
 </style>

package/dist/runtime/components/e/progress/linear.vue

@@ -1,6 +1,10 @@
 <template>
   <Transition name="fade">
-    <div class="e-progress-linear" v-if="modelValue" :class="posClass"></div>
+    <div
+      v-if="modelValue"
+      class="e-progress-linear"
+      :class="posClass"
+    />
   </Transition>
 </template>
 <script setup lang="ts">
@@ -23,7 +27,7 @@ const posClass = computed(() => {
   return null
 })
 </script>
-<style scoped>
+<style scoped lang="scss">
 .pos-top,
 .pos-bottom {
   position: absolute !important;
@@ -40,9 +44,11 @@ const posClass = computed(() => {
 
 .e-progress-linear {
   position: relative;
+
   width: 100%;
   height: 0.2rem;
   overflow: clip;
+
   background-color: var(--e-color-elev);
 }
 
@@ -52,6 +58,7 @@ const posClass = computed(() => {
   height: 100%;
   width: 100%;
   content: "";
+
   background-color: var(--e-color-primary);
   animation: progressLinear 1.8s linear infinite;
 }
@@ -60,9 +67,11 @@ const posClass = computed(() => {
   0% {
     transform: translateX(-40%) scaleX(40%);
   }
+
   50% {
     transform: translateX(40%) scaleX(80%);
   }
+
   100% {
     transform: translateX(200%) scaleX(100%);
   }

package/dist/runtime/components/e/tr/scale.vue

@@ -1,8 +1,8 @@
 <template>
-    <!-- wrap the built-in Transition component -->
-    <Transition name="e-tr-scale">
-        <slot></slot> <!-- pass down slot content -->
-    </Transition>
+  <!-- wrap the built-in Transition component -->
+  <Transition name="e-tr-scale">
+    <slot /> <!-- pass down slot content -->
+  </Transition>
 </template>
 
 <script setup lang="ts">

package/dist/runtime/css/util.scss

@@ -0,0 +1,177 @@
+$directions: (
+  "t": "top",
+  "r": "right",
+  "b": "bottom",
+  "l": "left",
+);
+
+@for $i from 0 through 6 {
+  @each $name, $direction in $directions {
+    .m#{$name}-#{$i} {
+      margin-#{$direction}: #{0.2rem * $i};
+    }
+  }
+  .my-#{$i} {
+    margin-top: #{0.2rem * $i};
+    margin-bottom: #{0.2rem * $i};
+  }
+  .mx-#{$i} {
+    margin-left: #{0.2rem * $i};
+    margin-right: #{0.2rem * $i};
+  }
+  .ma-#{$i} {
+    margin: #{0.2rem * $i} !important;
+  }
+
+  @each $name, $direction in $directions {
+    .p#{$name}-#{$i} {
+      padding-#{$direction}: #{0.2rem * $i};
+    }
+  }
+  .py-#{$i} {
+    padding-top: #{0.2rem * $i};
+    padding-bottom: #{0.2rem * $i};
+  }
+  .px-#{$i} {
+    padding-left: #{0.2rem * $i};
+    padding-right: #{0.2rem * $i};
+  }
+  .pa-#{$i} {
+    padding: #{0.2rem * $i} !important;
+  }
+
+  .op-#{$i} {
+    opacity: calc(#{$i}/ 6);
+  }
+}
+
+/* Flex */
+
+.d-flex {
+  display: flex;
+}
+
+.flex-stretch-y {
+  display: flex;
+  align-content: stretch;
+  align-items: stretch;
+}
+
+.flex-stretch-x {
+  display: flex;
+  justify-content: stretch;
+  justify-items: stretch;
+}
+
+.flex-stretch {
+  @extend .flex-stretch-x;
+  @extend .flex-stretch-y;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-start {
+  display: flex;
+  align-content: flex-start;
+  justify-content: flex-start;
+  justify-items: flex-start;
+  align-items: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  align-content: flex-end;
+  justify-content: flex-end;
+  justify-items: flex-end;
+  align-items: flex-end;
+}
+
+.flex-center {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+}
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Transitions */
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.15s ease-in-out;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(90%) translateY(-6%);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Other */
+
+body {
+  background-color: var(--e-color-light);
+  color: var(--e-color-dark);
+  font-family: var(--e-font-family);
+}
+
+.fullheight {
+  height: 100%;
+}
+
+.fullwidth {
+  width: 100%;
+}
+
+.fullsize {
+  @extend .fullheight;
+  @extend .fullwidth;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.e-blur {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+    .e-blur {
+      backdrop-filter: blur(12px);
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+.e-disabled {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+router-link,
+a,
+input,
+label {
+  text-decoration: none !important;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}

package/dist/runtime/plugin.mjs

@@ -1,5 +1,5 @@
 import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(() => {
   console.log("Plugin injected by exakt-ui!");
   return {
     provide: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "@nuxt/kit": "^3.2.3",
     "blurhash": "^2.0.5",
     "lodash": "^4.17.21",
-    "sass": "^1.58.3"
+    "sass": "^1.62.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",