@exakt/ui 0.0.1 → 0.0.3

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.3"
 }

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}; `;
+      CSSvariables += `--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(
+      resolver.resolve("../node_modules/.cache/exakt-ui/variables.scss"),
+      new Uint8Array(Buffer.from(SCSSvariables))
+    );
     await fs.promises.writeFile(
-      "node_modules/.cache/exakt-ui/variables.scss",
-      new Uint8Array(Buffer.from(variables))
+      resolver.resolve("../node_modules/.cache/exakt-ui/variables.css"),
+      new Uint8Array(Buffer.from(CSSvariables + "}"))
     );
     extendViteConfig((config) => {
       Object.assign(config, {
@@ -56,8 +66,18 @@ const module = defineNuxtModule({
         }
       });
     });
-    nuxt.options.css.push(resolver.resolve("./css/main.scss"));
-    addComponentsDir({ path: resolver.resolve("./components") });
+    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("../node_modules/.cache/exakt-ui/variables.css")
+    );
+    addComponentsDir({ path: resolver.resolve("./runtime/components") });
   }
 });
 

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex-center color-red">
+    <e-icon :icon="mdiAlert" size="19" class="mr-2"></e-icon
+    ><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,116 @@
+<template>
+
+    <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>
+
+    <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>
+        </e-container>
+    </div>
+
+</template>
+<script setup lang="ts">
+
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean
+  }>(),
+  { loading:false }
+);
+
+const { $store, $platform } = useNuxtApp();
+
+</script>
+
+<style 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: var(--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;
+  }
+  .title-bar .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,36 @@
+<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"></e-icon></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { mdiAccountCircle } from "@mdi/js";
+const size = 120;
+
+defineProps<{
+  src?: string;
+}>();
+</script>
+<style 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,232 @@
+<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 class="prog-grad" color="primary" v-if="loading && loadingGradient" />
+
+    <div ref="content" class="e-btn-content" :style="contentStyles">
+
+      <div class="load-overlay" v-if="loading  && !loadingGradient">
+        <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;
+    to?: string;
+    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 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);
+}
+.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%;
+}
+
+@media screen and (max-width: var(--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,48 @@
+<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 scoped>
+.content {
+  word-wrap: break-word;
+  width: 95%;
+}
+@media (max-width: var(--e-md-screen-breakpoint)) {
+  .content.forceFullWidth {
+    width: 100%;
+  }
+}
+@media (min-width: var(--e-md-screen-breakpoint)) {
+  .content {
+    width: calc(85% - 0rem);
+  }
+}
+@media (min-width: var(--e-l-screen-breakpoint)) {
+  .content {
+    width: calc(65% - 0rem);
+  }
+}
+
+.container.no-btn-padding {
+  padding: 0px 0px;
+}
+.container.no-btn-padding .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>

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

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <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 class="dialog rounded px-6 pe-6 pb-2">
+          <div class="mb-4">
+            <h2 class="ma-0 pa-0">
+              <slot name="title" />
+            </h2>
+          </div>
+          <slot />
+          <div class="button-bar me-4 mb-3">
+            <slot name="buttons"></slot>
+          </div>
+        </div>
+      </div>
+    </e-tr-scale>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits(["update:modelValue"]);
+const state = reactive({ active: false });
+</script>
+<style scoped>
+.dialog-wrap {
+  position: fixed;
+  pointer-events: none;
+  z-index: 4;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+
+.dialog {
+  min-width: 25rem;
+  pointer-events: all;
+  background-color: var(--e-color-elev);
+  color: var(--e-color-dark);
+  position: relative;
+  overflow: clip;
+}
+
+@media (max-width: var(--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;
+  justify-content: space-between;
+  width: 100%;
+}
+</style>