@exakt/ui 0.0.3 → 0.0.4

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

@@ -1,18 +1,42 @@
 <template>
   <div class="flex-stretch">
     <!-- class="flex-stretch fullwidth" -->
-    <div @click="onClick" ref="activator">
+    <div
+      ref="activator"
+      @click="onClick"
+    >
       <slot />
     </div>
     <e-focus-sheet v-model="state.active" />
     <e-tr-scale>
-      <div class="list rounded" v-if="state.active">
-        <component v-for="(item, i) in items" :key="i" class="fullwidth" :is="item.href ? 'a' : 'div'"
-          :href="item.href ? item.href : undefined">
-          <e-btn justify="start" @click="select(i)" class="item fullwidth" :color="item.color" :solid="false" 
-            :background="item.background || 'transparent'" :class="{ active: currentItem === i }"><e-icon v-if="item.icon"
-              :size="20" :icon="item.icon" class="mr-2" />
-            {{ item.name }}</e-btn>
+      <div
+        v-if="state.active"
+        class="list rounded"
+      >
+        <component
+          :is="item.href ? 'a' : 'div'"
+          v-for="(item, i) in items"
+          :key="i"
+          class="fullwidth"
+          :href="item.href ? item.href : undefined"
+        >
+          <e-btn
+            justify="start"
+            class="item fullwidth"
+            :color="item.color"
+            :solid="false"
+            :background="item.background || 'transparent'" 
+            :class="{ active: currentItem === i }"
+            @click="select(i)"
+          >
+            <e-icon
+              v-if="item.icon"
+              :size="20"
+              :icon="item.icon"
+              class="mr-2"
+            />
+            {{ item.name }}
+          </e-btn>
         </component>
       </div>
     </e-tr-scale>
@@ -108,43 +132,54 @@ const select = (i: number) => {
   currentItem.value = i;
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
 .list {
   position: fixed;
   left: v-bind('state.x + "px"');
   top: v-bind('state.y + "px"');
   width: v-bind(width);
   display: flex;
+
+
   background-color: var(--e-color-elev-2);
   color: var(--e-color-dark);
   z-index: 4;
+
   flex-shrink: 1;
   flex-direction: column;
   overflow: clip;
   justify-items: stretch;
+
+  .item {
+    // color: var(--e-color-dark);
+    font-size: 1rem;
+    padding: 0.7rem;
+    text-transform: capitalize;
+
+    &.active {
+      background-color: rgba(var(--e-color-primary-rgb), 0.2);
+
+    }
+  }
 }
-.list .item {
-  font-size: 1rem;
-  padding: 0.7rem;
-  text-transform: capitalize;
-}
-.list .item.active {
-  background-color: rgba(var(--e-color-primary-rgb), 0.2);
-}
 
-@media screen and (max-width: var(--e-md-screen-breakpoint)) {
+
+
+@media screen and (max-width: $e-md-screen-breakpoint) {
   .list {
     top: unset;
     bottom: 0px;
     left: 0px;
     width: 100vw;
     flex-shrink: 0;
-  }
-  .list .item {
-    padding: 1rem;
-    font-size: 1.1rem;
+
+    .item {
+      padding: 1rem;
+      font-size: 1.1rem;
+    }
   }
 }
+
 .main-btn {
   font-size: 1rem;
 }

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

@@ -2,12 +2,12 @@
   <div>
     <Transition name="fade">
       <div
+        v-if="modelValue"
         class="focus-sheet"
-        @click="emit('update:modelValue', false)"
         :class="{ 'opaque-on-desktop': opaqueOnDesktop }"
-        v-if="modelValue"
-      ></div
-    ></Transition>
+        @click="emit('update:modelValue', false)"
+      />
+    </Transition>
   </div>
 </template>
 <script setup lang="ts">
@@ -18,7 +18,7 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue"]);
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .focus-sheet {
   position: fixed;
   width: 100%;
@@ -26,12 +26,14 @@ const emit = defineEmits(["update:modelValue"]);
   left: 0px;
   top: 0px;
   z-index: 3;
-}
-.focus-sheet.opaque-on-desktop {
-  background-color: rgba(var(--e-color-light-rgb), 0.5);
+  //background-color: red;
+
+  &.opaque-on-desktop {
+    background-color: rgba(var(--e-color-light-rgb), 0.5);
+  }
 }
 
-@media screen and (max-width: var(--e-md-screen-breakpoint)) {
+@media screen and (max-width: $e-md-screen-breakpoint) {
   .focus-sheet {
     background-color: rgba(var(--e-color-light-rgb), 0.5);
   }

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

@@ -5,7 +5,7 @@
     :width="size"
     :fill="color"
   >
-    <path :d="icon"></path>
+    <path :d="icon" />
   </svg>
 </template>
 <script setup lang="ts">

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

@@ -1,6 +1,12 @@
 <template>
-  <e-btn class="a-btn" :loading="loading">
-    <e-icon :icon="icon" :size="size"></e-icon>
+  <e-btn
+    class="a-btn"
+    :loading="loading"
+  >
+    <e-icon
+      :icon="icon"
+      :size="size"
+    />
   </e-btn>
 </template>
 <script setup lang="ts">

package/dist/runtime/components/e/image-lazy-view.vue

@@ -30,7 +30,10 @@
         <!--     @transitionend.passive="transitionend" -->
       </div>
 
-      <div v-if="slotContentPresent" class="sc-sloe-content fullsize">
+      <div
+        v-if="slotContentPresent"
+        class="sc-sloe-content fullsize"
+      >
         <slot />
       </div>
     </div>
@@ -185,11 +188,10 @@ const initialize = (blur = props.blur) => {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .border-rad-custom {
   border-radius: v-bind(borderRadius);
 }
-
 .lv-wrapper {
   position: relative;
 }

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

@@ -1,8 +1,17 @@
 <template>
-  <label class="label mb-5" v-for="(item, i) in items" :key="i">
+  <label
+    v-for="(item, i) in items"
+    :key="i"
+    class="label mb-5"
+  >
     {{ item[useKey] }}
-    <input type="radio" name="radio" :value="i" v-model="selected" />
-    <span class="checkmark"></span>
+    <input
+      v-model="selected"
+      type="radio"
+      name="radio"
+      :value="i"
+    >
+    <span class="checkmark" />
   </label>
 </template>
 <script lang="ts" setup>
@@ -24,7 +33,7 @@ const selected = computed({
   },
 });
 </script>
-<style scoped>
+<style scoped lang="scss">
 * {
   box-sizing: border-box;
 }
@@ -52,6 +61,7 @@ const selected = computed({
 /* Create a custom radio button */
 .checkmark {
   --size: 1.5rem;
+
   position: absolute;
   top: 0;
   left: 0;
@@ -63,19 +73,22 @@ const selected = computed({
 }
 
 /* Hover */
-.label:hover input ~ .checkmark {
+.label:hover input~.checkmark {
   background-color: var(--e-color-elev-2);
 }
 
-.label:active input ~ .checkmark {
-  transform: scale(0.85);
-}
-.label:active input ~ .checkmark::after {
-  transform: scale(1) !important;
+.label:active input {
+  &~.checkmark {
+    transform: scale(0.85);
+  }
+
+  &~.checkmark::after {
+    transform: scale(1) !important;
+  }
 }
 
 /* Checked */
-.label input:checked ~ .checkmark {
+.label input:checked~.checkmark {
   background-color: var(--e-color-primary);
 }
 
@@ -87,13 +100,14 @@ const selected = computed({
 }
 
 /* Show the indicator (dot/circle) when checked */
-.label input:checked ~ .checkmark:after {
+.label input:checked~.checkmark:after {
   transform: scale(1);
 }
 
 /* Style the indicator (dot/circle) */
 .label .checkmark:after {
   --size: 0.6rem;
+
   display: block;
   top: 50%;
   left: 50%;
@@ -106,5 +120,7 @@ const selected = computed({
   transform: scale(0);
   transition: transform 0.25s;
   box-sizing: border-box;
+
+
 }
 </style>

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

@@ -2,15 +2,19 @@
   <div class="pos-wrap">
     <div
       class="wrapper fullwidth"
-      @click="focus"
       :style="inputState.overtakeStyle"
       :class="{ rounded: solid, solid }"
+      @click="focus"
     >
-      <e-icon :icon="icon" size="21" v-if="icon"></e-icon>
+      <e-icon
+        v-if="icon"
+        :icon="icon"
+        size="21"
+      />
       <textarea
         v-if="type === 'textarea'"
-        v-model="currentText"
         ref="input"
+        v-model="currentText"
         class="input"
         :placeholder="label"
         autocomplete="off"
@@ -21,20 +25,20 @@
       />
       <input
         v-else
+        ref="input"
+        v-model="currentText"
         :disabled="disabled"
         :type="type"
         :autocomplete="autocomplete"
         :spellcheck="spellcheck"
         class="input"
-        @click.stop=""
         :required="required"
-        v-model="currentText"
-        ref="input"
         :placeholder="label"
+        @click.stop=""
         @focus="inputState.focused = true"
         @blur="inputState.focused = false"
         @transitionend="transitionEnd"
-      />
+      >
       <slot />
     </div>
   </div>
@@ -111,7 +115,7 @@ const transitionEnd = (a) => {
   inputState.overtakeStyle = "";
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
 .pos-wrap {
   display: flex;
   align-content: stretch;
@@ -119,8 +123,9 @@ const transitionEnd = (a) => {
   justify-content: stretch;
   width: 100%;
   box-sizing: border-box;
-}
 
+  // padding: 0px var(--e-core-padding-x);
+}
 .input {
   border: none;
   box-sizing: border-box;
@@ -132,15 +137,23 @@ const transitionEnd = (a) => {
   font-size: 1rem;
   color: var(--e-color-dark);
   font-family: var(--e-font-family);
-  height: v-bind(height);
-}
-.input:-webkit-autofill {
-  animation-name: onAutoFillStart;
-  transition: background-color 0.1s ease-in-out 0s;
-}
-.input:not(:-webkit-autofill) {
-  animation-name: onAutoFillCancel;
-  transition: background-color 0.1s ease-in-out 0s;
+height:v-bind(height);
+
+  &:-webkit-autofill {
+    // Expose a hook for JavaScript when auto fill is shown.
+    // JavaScript can capture 'animationstart' events
+    animation-name: onAutoFillStart;
+    //color: white !important;
+    // Make the backgound color become yellow _really slowly_
+    transition: background-color 0.1s ease-in-out 0s;
+  }
+
+  &:not(:-webkit-autofill) {
+    // Expose a hook for JS onAutoFillCancel
+    // JavaScript can capture 'animationstart' events
+    animation-name: onAutoFillCancel;
+    transition: background-color 0.1s ease-in-out 0s;
+  }
 }
 
 .itemform.textarea {
@@ -155,10 +168,13 @@ const transitionEnd = (a) => {
   justify-content: stretch;
   align-items: center;
   justify-items: stretch;
+
   position: relative;
+
   background-color: transparent;
   color: var(--e-color-dark);
   padding: 10px;
+
   overflow: clip;
 }
 

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

@@ -1,6 +1,13 @@
 <template>
-  <div v-if="disabled || !to"><slot /></div>
-  <router-link :to="to" v-else><slot /></router-link>
+  <div v-if="disabled || !to">
+    <slot />
+  </div>
+  <router-link
+    v-else
+    :to="to"
+  >
+    <slot />
+  </router-link>
 </template>
 <script setup lang="ts">
 defineProps<{

package/dist/runtime/components/e/loading-spinner.vue

@@ -1,60 +1,85 @@
 <template>
   <div class="cont flex-center">
-<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-  <circle class="op-1" fill="none" stroke-width="9" cx="33" cy="33" r="25"></circle>
+    <svg
+      class="spinner"
+      width="65px"
+      height="65px"
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        class="op-1"
+        fill="none"
+        stroke-width="9"
+        cx="33"
+        cy="33"
+        r="25"
+      />
 
-   <circle class="path" fill="none" stroke-width="9" stroke-linecap="round" cx="33" cy="33" r="25"></circle>
-</svg>
-  
-</div>
+      <circle
+        class="path"
+        fill="none"
+        stroke-width="9"
+        stroke-linecap="round"
+        cx="33"
+        cy="33"
+        r="25"
+      />
+    </svg>
+  </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 svg {
   stroke: currentColor;
 }
 
-.cont {
+
+
+
+
+$offset: 120;
+$duration: 1.5s;
+
+.cont{
   position: relative;
   height: 100%;
-  width: 100%;
+  width:100%;
 }
-
 .spinner {
-  animation: rotator 1.5s linear infinite;
+  animation: rotator $duration linear infinite;
   position: absolute;
   z-index: 2;
-  top: 0;
+  top:0;
   height: 100%;
-  width: 100%;
+  width:100%;
   aspect-ratio: 1;
 }
 
 @keyframes rotator {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(270deg);
-  }
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
 }
+
 .path {
-  stroke-dasharray: 120;
+  stroke-dasharray: $offset;
   stroke-dashoffset: 0;
   transform-origin: center;
-  animation: dash 1.5s ease-in-out infinite;
+  animation:
+    dash $duration ease-in-out infinite, 
+
 }
 
+
+
 @keyframes dash {
-  0% {
-    stroke-dashoffset: 120;
-  }
-  50% {
-    stroke-dashoffset: 30;
-    transform: rotate(5deg);
-  }
-  100% {
-    stroke-dashoffset: 120;
-    transform: rotate(450deg);
-  }
+ 0% { stroke-dashoffset: $offset; }
+ 50% {
+   stroke-dashoffset: calc($offset / 4);
+   transform:rotate(5deg);
+ }
+ 100% {
+   stroke-dashoffset: $offset;
+   transform:rotate(450deg);
+ }
 }
 </style>

package/dist/runtime/components/e/{nav.vue → nav/bar.vue}

@@ -1,7 +1,13 @@
 <template>
-  <nav class="nav e-blur" :class="{ fixed }">
-    <e-container :noBtnPadding="true"
-      ><div class="nav-content">
+  <nav
+    class="nav e-blur"
+    :class="{ fixed }"
+  >
+    <e-container
+      :no-btn-padding="true"
+      :force-full-width="true"
+    >
+      <div class="nav-content">
         <slot />
       </div>
     </e-container>
@@ -14,7 +20,7 @@ defineProps<{
 }>();
 //const colorFromScriptSetup = "green";
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .nav-content {
   display: flex;
   align-items: stretch;
@@ -25,6 +31,7 @@ defineProps<{
   z-index: 5;
   height: 3.5rem;
   box-shadow: 0 0 0 0.06rem rgba(0, 0, 0, 0.12) !important;
+
   background-color: var(--e-color-elev);
   position: sticky;
   top: 0;