@exakt/ui 0.0.3 → 0.0.5

package/README.md

@@ -3,7 +3,7 @@ Get your module up and running quickly.
 
 Find and replace all on all files (CMD+SHIFT+F):
 - Name: exakt
-- Package name: exakt-ui
+- Package name: @exakt/ui
 - Description: My new Nuxt module
 -->
 
@@ -28,25 +28,25 @@ a simple nuxt ui library focused on doing as much as possible with css
 
 ## Quick Setup
 
-1. Add `exakt-ui` dependency to your project
+1. Add `@exakt/ui` dependency to your project
 
 ```bash
 # Using pnpm
-pnpm add -D exakt-ui
+pnpm add -D @exakt/ui
 
 # Using yarn
-yarn add --dev exakt-ui
+yarn add --dev @exakt/ui
 
 # Using npm
-npm install --save-dev exakt-ui
+npm install --save-dev @exakt/ui
 ```
 
-2. Add `exakt-ui` to the `modules` section of `nuxt.config.ts`
+2. Add `@exakt/ui` to the `modules` section of `nuxt.config.ts`
 
 ```js
 export default defineNuxtConfig({
   modules: [
-    'exakt-ui'
+    '@exakt/ui'
   ]
 })
 ```
@@ -80,14 +80,14 @@ npm run release
 ```
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/exakt-ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/exakt-ui
+[npm-version-src]: https://img.shields.io/npm/v/@exakt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@exakt/ui
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/exakt-ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/exakt-ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@exakt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@exakt/ui
 
-[license-src]: https://img.shields.io/npm/l/exakt-ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/exakt-ui
+[license-src]: https://img.shields.io/npm/l/@exakt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@exakt/ui
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/dist/module.d.ts

@@ -9,8 +9,9 @@ interface ModuleOptions {
         blue?: string;
     };
     breakpoints: {
+        sm?: string;
         md?: string;
-        l?: string;
+        lg?: string;
         xl?: string;
     };
     borderRadius: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.3"
+  "version": "0.0.5"
 }

package/dist/module.mjs

@@ -10,8 +10,9 @@ const defaults = {
     blue: "#2196f3"
   },
   breakpoints: {
+    sm: "16em",
     md: "33em",
-    l: "48em",
+    lg: "48em",
     xl: "60em"
   },
   borderRadius: "8px",
@@ -40,7 +41,7 @@ const module = defineNuxtModule({
       SCSSvariables += `$root-${key}: ${value}; `;
     }
     for (const [key, value] of Object.entries(options.breakpoints)) {
-      CSSvariables += `--e-${key}-screen-breakpoint: ${value}; `;
+      SCSSvariables += `$e-${key}-screen-breakpoint: ${value}; `;
     }
     CSSvariables += `--e-font-family: ${options.font}; `;
     CSSvariables += `--e-rounded-border-radius: ${options.borderRadius}; `;
@@ -66,14 +67,8 @@ const module = defineNuxtModule({
         }
       });
     });
-    await fs.promises.copyFile(
-      resolver.resolve("./runtime/css/main.scssx"),
-      resolver.resolve("../node_modules/.cache/exakt-ui/main.scss")
-    );
-    nuxt.options.css.push(
-      resolver.resolve("../node_modules/.cache/exakt-ui/main.scss")
-    );
-    nuxt.options.css.push(resolver.resolve("./runtime/css/util.css"));
+    nuxt.options.css.push(resolver.resolve("./runtime/css/main.scss"));
+    nuxt.options.css.push(resolver.resolve("./runtime/css/util.scss"));
     nuxt.options.css.push(
       resolver.resolve("../node_modules/.cache/exakt-ui/variables.css")
     );

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

@@ -1,7 +1,10 @@
 <template>
   <div class="flex-center color-red">
-    <e-icon :icon="mdiAlert" size="19" class="mr-2"></e-icon
-    ><small><slot /></small>
+    <e-icon
+      :icon="mdiAlert"
+      size="19"
+      class="mr-2"
+    /><small><slot /></small>
   </div>
 </template>
 <script setup lang="ts">

package/dist/runtime/components/e/app-bars.vue

@@ -1,48 +1,53 @@
 <template>
+  <div class="title-bar">
+    <e-progress-linear :model-value="props.loading" />
+    <div class="pf-wrap">
+      <slot name="left" />
+    </div>
+    <slot name="center" />
 
-    <div class="title-bar">
-        <e-progress-linear :model-value="props.loading" />
-        <div class="pf-wrap">
-            <slot name="left"></slot>
-        </div>
-        <slot name="center"></slot>
-
-        <div class="pf-wrap">
-            <slot name="right"></slot>
-        </div>
+    <div class="pf-wrap">
+      <slot name="right" />
     </div>
+  </div>
 
-    <div class="bar-container">
-        <e-container class="bar-e-container" :forceFullWidth="true">
-            <div class="rounded bar">
-                <e-progress-linear :model-value="props.loading" class="md-and-up-only" />
-
-                <div class="md-and-up-only flex-stretch">
-                    <slot name="center"></slot>
-                </div>
-                <slot name="nav-items"></slot>
-                <div class="md-and-up-only flex-stretch">
-                    <slot name="right" class="fullwidth"></slot>
-                </div>
+  <div class="bar-container">
+    <e-container class="bar-e-container" :force-full-width="true">
+      <div class="rounded bar">
+        <e-progress-linear
+          :model-value="props.loading"
+          class="md-and-up-only"
+        />
+        <div class="bar-content">
+      
+          <div class="bar-section">
+                <!-- Normally the logo -->
+            <div class="md-and-up-only flex-stretch">
+              <slot name="center" />
             </div>
-        </e-container>
-    </div>
+            <!-- All the links-->
+            <slot name="nav-items" />
+          </div>
 
+          <!-- Normally the sign in button -->
+          <div class="md-and-up-only bar-section">
+            <slot name="right" class="fullwidth" />
+          </div>
+        </div>
+      </div>
+    </e-container>
+  </div>
 </template>
 <script setup lang="ts">
-
 const props = withDefaults(
   defineProps<{
-    loading?: boolean
+    loading?: boolean;
   }>(),
-  { loading:false }
+  { loading: false }
 );
-
-const { $store, $platform } = useNuxtApp();
-
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .title-bar {
   display: none;
   position: relative;
@@ -61,8 +66,10 @@ const { $store, $platform } = useNuxtApp();
 .bar-container {
   width: 100%;
   top: 1rem;
+
   height: 4rem;
   padding-bottom: 1rem;
+
   display: flex;
   justify-content: center;
   position: sticky;
@@ -70,7 +77,19 @@ const { $store, $platform } = useNuxtApp();
   z-index: 4;
 }
 
-@media screen and (max-width: var(--e-md-screen-breakpoint)) {
+.bar-content{
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  width: 100%;
+}
+
+.bar-section{
+  display:flex;
+  align-items: stretch;
+}
+
+@media screen and (max-width: ($e-md-screen-breakpoint)) {
   .title-bar {
     display: unset;
     top: 0px;
@@ -85,15 +104,18 @@ const { $store, $platform } = useNuxtApp();
     align-content: stretch;
     justify-items: space-between;
     align-items: stretch;
+
+    .pf-wrap {
+      display: flex;
+      align-items: stretch;
+      width: 5rem;
+    }
   }
-  .title-bar .pf-wrap {
-    display: flex;
-    align-items: stretch;
-    width: 5rem;
-  }
+
   .md-and-up-only {
     display: none;
   }
+
   .bar-container {
     bottom: 0px;
     left: 0px;
@@ -102,15 +124,28 @@ const { $store, $platform } = useNuxtApp();
     padding: 0px;
     z-index: 3;
   }
+
   .bar-e-container {
     padding: 0px;
     margin: 0px;
   }
+
   .bar {
     border-radius: 0px;
     width: 100%;
     height: 100%;
-    padding-bottom: calc(env(safe-area-insee-bottom));
+
+    padding-bottom: calc(env(safe-area-inset-bottom));
+  }
+
+  .bar-content{
+    justify-content: stretch;
+ 
+  }
+
+  .bar-section{
+    justify-content: stretch;
+    width: 100%;
   }
 }
-</style>
+</style>

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

@@ -11,7 +11,12 @@
       :src="src"
       border-radius="100%"
     />
-    <div v-else><e-icon :size="size" :icon="mdiAccountCircle"></e-icon></div>
+    <div v-else>
+      <e-icon
+        :size="size"
+        :icon="mdiAccountCircle"
+      />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -22,7 +27,7 @@ defineProps<{
   src?: string;
 }>();
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .avatar {
   border-radius: 100%;
   width: fie-content;

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

@@ -1,5 +1,9 @@
 <template>
-  <button class="e-btn " :style="{ width, justifyContent: justifyWrapper }" :type="type" :disabled="disabled || loading"
+  <button
+    class="e-btn "
+    :style="{ width, justifyContent: justifyWrapper }"
+    :type="type"
+    :disabled="disabled || loading"
     :class="{
       active,
       inactive,
@@ -12,14 +16,24 @@
       fab,
       loadingGradient,
       colored: background !== 'transparent' || color || solid,
-    }">
-      <e-progress-gradient class="prog-grad" color="primary" v-if="loading && loadingGradient" />
+    }"
+  >
+    <e-progress-gradient
+      v-if="loading && loadingGradient"
+      class="prog-grad"
+      color="primary"
+    />
 
-    <div ref="content" class="e-btn-content" :style="contentStyles">
-
-      <div class="load-overlay" v-if="loading  && !loadingGradient">
+    <div
+      ref="content"
+      class="e-btn-content"
+      :style="contentStyles"
+    >
+      <div
+        v-if="loading && !loadingGradient"
+        class="load-overlay"
+      >
         <e-loading-spinner />
-
       </div>
       <span class="actual-content flex-center">
 
@@ -46,7 +60,6 @@ const props = withDefaults(
     loadingGradient?: boolean;
     fab?: boolean;
     disabled?: boolean;
-    to?: string;
     type?: "button" | "submit" | "reset";
   }>(),
   { type: "button", background: "primary", solid: true }
@@ -119,7 +132,7 @@ const hoverColor = computed(() => {
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.9)`;
 });
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .prog-grad {
   position: absolute;
   top: 0;
@@ -141,6 +154,7 @@ const hoverColor = computed(() => {
   background: rgba(0, 0, 0, 0);
   display: flex;
   font-size: 1rem;
+
   justify-content: center;
   align-content: center;
   align-items: center;
@@ -154,65 +168,85 @@ const hoverColor = computed(() => {
   cursor: pointer;
   position: relative;
   flex-shrink: 1;
+
   transition: background 0.4s, color 0.3s, opacity 0.4s;
+
   font-family: var(--e-font-family);
-}
-.e-btn.loading {
-  pointer-events: none;
-}
-.e-btn.loading.loadingGradient {
-  background: rgba(0, 0, 0, 0) !important;
-  color: var(--e-color-dark) !important;
-  transition: background 0.8s, color 0.5s, opacity 0.4s;
-}
-.e-btn.loading.loadingGradient .actual-content {
-  opacity: 0.8;
-  transition: opacity 0.5s;
-}
-.e-btn.loading .actual-content {
-  opacity: 0;
-}
-.e-btn:hover {
-  background: rgba(98, 98, 98, 0.15);
-}
-.e-btn:active .e-btn-content {
-  transform: scale(0.85);
-}
-.e-btn.fab {
-  position: fixed;
-  right: 5rem;
-  bottom: 5rem;
-  aspect-ratio: 1;
-  border-radius: 100%;
-  height: 4.2rem;
-  z-index: 3;
-}
-.e-btn.block {
-  width: 100%;
-}
-.e-btn.colored {
-  background-color: v-bind(parsedBackgroundProp);
-  color: v-bind(textColor);
-}
-.e-btn.colored:hover {
-  background-color: v-bind(hoverColor);
-}
-.e-btn.solid {
-  padding: 0.7rem 0.9rem;
-}
-.e-btn.active {
-  color: var(--e-color-primary);
-}
-.e-btn.inactive {
-  color: var(--e-color-dark);
-  opacity: 80%;
+
+  &.loading {
+    pointer-events: none;
+
+    &.loadingGradient {
+      background: rgba(0, 0, 0, 0) !important;
+      color: var(--e-color-dark) !important;
+      transition: background 0.8s, color 0.5s, opacity 0.4s;
+
+      .actual-content {
+
+        opacity: 0.8;
+        transition: opacity 0.5s;;
+      }
+    }
+
+    .actual-content {
+      opacity: 0;
+    }
+
+  }
+
+  &:hover {
+    background: rgba(98, 98, 98, 0.15);
+  }
+
+  &:active {
+    .e-btn-content {
+      transform: scale(0.85);
+    }
+  }
+
+  &.fab {
+    position: fixed;
+    right: 5rem;
+    bottom: 5rem;
+    aspect-ratio: 1;
+    border-radius: 100%;
+    height: 4.2rem;
+    z-index: 3;
+  }
+
+  &.block {
+    width: 100%;
+  }
+
+  &.colored {
+    background-color: v-bind(parsedBackgroundProp);
+    color: v-bind(textColor);
+
+    &:hover {
+      background-color: v-bind(hoverColor);
+    }
+  }
+
+  &.solid {
+    padding: 0.7rem 0.9rem;
+  }
+
+  &.active {
+    color: var(--e-color-primary);
+  }
+
+  &.inactive {
+    color: var(--e-color-dark);
+    opacity: 80%;
+  }
 }
 
-@media screen and (max-width: var(--e-md-screen-breakpoint)) {
+@media screen and (max-width: $e-md-screen-breakpoint) {
   .e-btn.fab {
     right: 1rem;
   }
 }
+
 .loading-spinner {
   max-height: 1rem;
 }

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

@@ -8,32 +8,38 @@
 <script setup lang="ts">
 defineProps(["noBtnPadding", "forceFullWidth"]);
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .content {
   word-wrap: break-word;
+
   width: 95%;
-}
-@media (max-width: var(--e-md-screen-breakpoint)) {
-  .content.forceFullWidth {
-    width: 100%;
+
+  @media (max-width: $e-md-screen-breakpoint) {
+    &.forceFullWidth {
+      width: 100%;
+    }
   }
-}
-@media (min-width: var(--e-md-screen-breakpoint)) {
-  .content {
-    width: calc(85% - 0rem);
+
+  $padding: 0rem;
+
+  @media (min-width: $e-md-screen-breakpoint) {
+    width: calc(100% - $padding);
   }
-}
-@media (min-width: var(--e-l-screen-breakpoint)) {
-  .content {
-    width: calc(65% - 0rem);
+
+  @media (min-width: $e-lg-screen-breakpoint) {
+    width: calc(95% - $padding);
+  }
+
+  @media (min-width: $e-xl-screen-breakpoint) {
+    width: calc(85% - $padding);
   }
 }
 
 .container.no-btn-padding {
   padding: 0px 0px;
-}
-.container.no-btn-padding .content {
-  margin: 0px 0px;
+  .content {
+    margin: 0px 0px;
+  }
 }
 
 .container {
@@ -43,6 +49,7 @@ defineProps(["noBtnPadding", "forceFullWidth"]);
   justify-content: center;
   word-wrap: break-word;
   box-sizing: border-box; /* Opera/IE 8+ */
+
   padding: 0px var(--e-core-padding-x);
 }
 </style>

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

@@ -1,10 +1,16 @@
 <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)"
+    />
 
     <e-tr-scale :multiplier="1.3">
-      <div class="dialog-wrap flex-center" v-if="modelValue">
+      <div
+        v-if="modelValue"
+        class="dialog-wrap flex-center"
+      >
         <div class="dialog rounded px-6 pe-6 pb-2">
           <div class="mb-4">
             <h2 class="ma-0 pa-0">
@@ -13,7 +19,7 @@
           </div>
           <slot />
           <div class="button-bar me-4 mb-3">
-            <slot name="buttons"></slot>
+            <slot name="buttons" />
           </div>
         </div>
       </div>
@@ -28,7 +34,7 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue"]);
 const state = reactive({ active: false });
 </script>
-<style scoped>
+<style scoped lang="scss">
 .dialog-wrap {
   position: fixed;
   pointer-events: none;
@@ -48,17 +54,19 @@ const state = reactive({ active: false });
   overflow: clip;
 }
 
-@media (max-width: var(--e-md-screen-breakpoint)) {
+@media (max-width: $e-md-screen-breakpoint) {
   .dialog {
     width: 100%;
     max-width: 100vw;
     min-width: unset;
   }
+
   .dialog-wrap {
     align-content: flex-end;
     align-items: flex-end;
   }
 }
+
 .button-bar {
   display: flex;
   align-items: stretch;