@exakt/ui 0.0.1 → 0.0.4

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

@@ -14,6 +14,7 @@ interface ModuleOptions {
         xl?: string;
     };
     borderRadius: string;
+    corePaddingX: string;
     font: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.1"
+  "version": "0.0.4"
 }

package/dist/module.mjs

@@ -15,6 +15,7 @@ const defaults = {
     xl: "60em"
   },
   borderRadius: "8px",
+  corePaddingX: "1rem",
   font: "Roboto, sans-serif"
 };
 const module = defineNuxtModule({
@@ -27,21 +28,30 @@ const module = defineNuxtModule({
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     addPlugin(resolver.resolve("./runtime/plugin"));
-    await fs.promises.mkdir("node_modules/.cache/exakt-ui", {
-      recursive: true
-    });
-    let variables = "";
+    await fs.promises.mkdir(
+      resolver.resolve("../node_modules/.cache/exakt-ui"),
+      {
+        recursive: true
+      }
+    );
+    let SCSSvariables = "";
+    let CSSvariables = ":root{";
     for (const [key, value] of Object.entries(options.colors)) {
-      variables += `$root-${key}: ${value}; `;
+      SCSSvariables += `$root-${key}: ${value}; `;
     }
     for (const [key, value] of Object.entries(options.breakpoints)) {
-      variables += `$${key}-screen-breakpoint: ${value}; `;
+      SCSSvariables += `$e-${key}-screen-breakpoint: ${value}; `;
     }
-    variables += `$font-family: ${options.font}; `;
-    variables += `$rounded-border-radius: ${options.borderRadius}; `;
+    CSSvariables += `--e-font-family: ${options.font}; `;
+    CSSvariables += `--e-rounded-border-radius: ${options.borderRadius}; `;
+    CSSvariables += `--e-core-padding-x: ${options.corePaddingX}; `;
     await fs.promises.writeFile(
-      "node_modules/.cache/exakt-ui/variables.scss",
-      new Uint8Array(Buffer.from(variables))
+      resolver.resolve("../node_modules/.cache/exakt-ui/variables.scss"),
+      new Uint8Array(Buffer.from(SCSSvariables))
+    );
+    await fs.promises.writeFile(
+      resolver.resolve("../node_modules/.cache/exakt-ui/variables.css"),
+      new Uint8Array(Buffer.from(CSSvariables + "}"))
     );
     extendViteConfig((config) => {
       Object.assign(config, {
@@ -56,8 +66,12 @@ const module = defineNuxtModule({
         }
       });
     });
-    nuxt.options.css.push(resolver.resolve("./css/main.scss"));
-    addComponentsDir({ path: resolver.resolve("./components") });
+    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")
+    );
+    addComponentsDir({ path: resolver.resolve("./runtime/components") });
   }
 });
 

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

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex-center color-red">
+    <e-icon
+      :icon="mdiAlert"
+      size="19"
+      class="mr-2"
+    /><small><slot /></small>
+  </div>
+</template>
+<script setup lang="ts">
+import { mdiAlert } from "@mdi/js";
+</script>

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

@@ -0,0 +1,128 @@
+<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="pf-wrap">
+      <slot name="right" />
+    </div>
+  </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="md-and-up-only flex-stretch">
+          <slot name="center" />
+        </div>
+        <slot name="nav-items" />
+        <div class="md-and-up-only flex-stretch">
+          <slot
+            name="right"
+            class="fullwidth"
+          />
+        </div>
+      </div>
+    </e-container>
+  </div>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean;
+  }>(),
+  { loading: false }
+);
+
+</script>
+
+<style lang="scss" scoped>
+.title-bar {
+  display: none;
+  position: relative;
+}
+
+.bar {
+  display: flex;
+  justify-content: flex-start;
+  justify-items: flex-start;
+  background-color: var(--e-color-elev-2);
+  width: 100%;
+  overflow: clip;
+  position: relative;
+}
+
+.bar-container {
+  width: 100%;
+  top: 1rem;
+
+  height: 4rem;
+  padding-bottom: 1rem;
+
+  display: flex;
+  justify-content: center;
+  position: sticky;
+  align-self: flex-start;
+  z-index: 4;
+}
+
+@media screen and (max-width: ($e-md-screen-breakpoint)) {
+  .title-bar {
+    display: unset;
+    top: 0px;
+    left: 0px;
+    height: 4rem;
+    width: 100%;
+    z-index: 4;
+    background-color: var(--e-color-elev-2);
+    position: fixed;
+    display: flex;
+    justify-content: space-between;
+    align-content: stretch;
+    justify-items: space-between;
+    align-items: stretch;
+
+    .pf-wrap {
+      display: flex;
+      align-items: stretch;
+      width: 5rem;
+    }
+  }
+
+  .md-and-up-only {
+    display: none;
+  }
+
+  .bar-container {
+    bottom: 0px;
+    left: 0px;
+    top: unset;
+    position: fixed;
+    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));
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex-center a-container">
+    <slot />
+    <e-image-lazy-view
+      v-if="src"
+      class="avatar"
+      :width="size"
+      :height="size"
+      :contain="true"
+      :immediate-render="true"
+      :src="src"
+      border-radius="100%"
+    />
+    <div v-else>
+      <e-icon
+        :size="size"
+        :icon="mdiAccountCircle"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { mdiAccountCircle } from "@mdi/js";
+const size = 120;
+
+defineProps<{
+  src?: string;
+}>();
+</script>
+<style lang="scss" scoped>
+.avatar {
+  border-radius: 100%;
+  width: fie-content;
+  height: fie-content;
+  background-color: var(--e-color-elev);
+}
+
+.a-container {
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,266 @@
+<template>
+  <button
+    class="e-btn "
+    :style="{ width, justifyContent: justifyWrapper }"
+    :type="type"
+    :disabled="disabled || loading"
+    :class="{
+      active,
+      inactive,
+      solid,
+      block,
+      rounded: solid,
+      'e-disabled': disabled,
+      'my-2':solid,
+      loading,
+      fab,
+      loadingGradient,
+      colored: background !== 'transparent' || color || solid,
+    }"
+  >
+    <e-progress-gradient
+      v-if="loading && loadingGradient"
+      class="prog-grad"
+      color="primary"
+    />
+
+    <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">
+
+        <slot />
+      </span>
+    </div>
+  </button>
+</template>
+<script lang="ts" setup>
+import { computed, reactive, ref, onMounted } from "vue";
+//import { IonSpinner } from "@ionic/vue";
+const { $exakt } = useNuxtApp();
+const props = withDefaults(
+  defineProps<{
+    width?: number | string;
+    justify?: string;
+    active?: boolean;
+    inactive?: boolean;
+    solid?: boolean;
+    color?: string;
+    background?: string;
+    block?: boolean;
+    loading?: boolean;
+    loadingGradient?: boolean;
+    fab?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+  }>(),
+  { type: "button", background: "primary", solid: true }
+);
+
+
+
+
+
+
+
+const justifyWrapper = computed(() => {
+  if (props.justify === "space-between") {
+    return "stretch";
+  }
+  return props.justify;
+});
+
+const contentStyles = computed(() => {
+  if (props.justify === "space-between") {
+    return "justify-content:space-between; flex-grow: 1";
+  }
+
+  return "";
+});
+
+function parseColor(input: string) {
+  const div = document.createElement("div");
+  document.body.appendChild(div);
+  div.style.color = input;
+  const c = getComputedStyle(div).color as any;
+  const res = c.match(/[.\d]+/g).map(Number);
+
+  div.remove();
+  return { r: res[0], g: res[1], b: res[2] };
+}
+
+const backgroundColorRgb = computed(() => {
+  if (!props.background || process.server) {
+    return { r: 0, g: 0, b: 0 };
+  }
+  return parseColor(parsedBackgroundProp.value);
+});
+
+const parsedBackgroundProp = computed(() => $exakt.parseColor(props.background));
+
+const textColor = computed(() => {
+  if (props.color) {
+    return props.color;
+  }
+
+  const rgb = backgroundColorRgb.value;
+
+  const brightness = Math.round(
+    (299 * rgb.r + 224490 + 587 * rgb.g + 114 * rgb.b) / 2000
+  );
+  if (brightness > 150) {
+    // Dark Text
+    return "#000000";
+  }
+  return "#FFFFFF";
+});
+
+const hoverColor = computed(() => {
+  if (parsedBackgroundProp.value === 'transparent') {
+    return 'rgba(98, 98, 98, 0.15)';
+  }
+
+  const rgb = backgroundColorRgb.value;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.9)`;
+});
+</script>
+<style lang="scss" scoped>
+.prog-grad {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.e-btn-content {
+  transition: transform 0.1s ease-in-out;
+  flex-direction: row;
+  display: flex;
+  position: relative;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.e-btn {
+  user-select: none;
+  background: rgba(0, 0, 0, 0);
+  display: flex;
+  font-size: 1rem;
+
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  padding: 0.3rem var(--e-core-padding-x);
+  overflow: hidden;
+  color: var(--e-color-dark);
+  outline: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 1;
+
+  transition: background 0.4s, color 0.3s, opacity 0.4s;
+
+  font-family: var(--e-font-family);
+
+  &.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: $e-md-screen-breakpoint) {
+  .e-btn.fab {
+    right: 1rem;
+  }
+}
+
+.loading-spinner {
+  max-height: 1rem;
+}
+
+.load-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="container"
+    :class="{ 'no-btn-padding': noBtnPadding }"
+  >
+    <div
+      class="content"
+      :class="{ forceFullWidth }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps(["noBtnPadding", "forceFullWidth"]);
+</script>
+<style lang="scss" scoped>
+.content {
+  word-wrap: break-word;
+
+  width: 95%;
+
+  @media (max-width: $e-md-screen-breakpoint) {
+    &.forceFullWidth {
+      width: 100%;
+    }
+  }
+
+  $padding: 0rem;
+
+  @media (min-width: $e-md-screen-breakpoint) {
+    width: calc(85% - $padding);
+  }
+
+  @media (min-width: var(--e-l-screen-breakpoint)) {
+    width: calc(65% - $padding);
+  }
+}
+
+.container.no-btn-padding {
+  padding: 0px 0px;
+  .content {
+    margin: 0px 0px;
+  }
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  word-wrap: break-word;
+  box-sizing: border-box; /* Opera/IE 8+ */
+
+  padding: 0px var(--e-core-padding-x);
+}
+</style>