@eodash/eodash 5.0.0-alpha.2.1 → 5.0.0-alpha.2.11

package/README.md

@@ -1,26 +1,59 @@
+# @eodash/eodash [![Version](https://badgen.net/npm/v/@eodash/eodash)](https://www.npmjs.com/package/@eodash/eodash)
+
+A package for creating earth observation dashboards. To learn more about eodash ecosystem visit [eodash.org](https://eodash.org)
+
+## Usage
+
+Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+
 ## Get Started
+
 Install all the required dependecies after cloning or downloading the repository using Node v18 or higher:
+
 ```bash
 npm run install
 ```
-Run the dev server and the app will open your default browser window to the landing page:
+
+Run the dev server:
+
 ```bash
 npm run dev
 ```
-To compile and minify for production:
+
+To compile and minify a demo instance:
+
 ```bash
 npm run build
 ```
+
 To preview the compiled production files :
+
 ```bash
 npm run preview
 ```
 
+To compile and minify a demo instance as a web component library:
+
+```bash
+npm run build -- --lib
+```
+
 ## Folder Structure
+
     .
-    ├── core               # Main source code that hosts the microfrontends and renders the dashboard
+    ├── core               # CLI & Client source code
     ├── docs               # Documentation files
+    ├── tests              # CLI & Client component tests folder
     ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md
 
+## Writing commits
+
+To ensure clear communication with the package consumers and enable machine-readable commits, we adhere to [The Conventional Commits](https://www.conventionalcommits.org/) specification that allows the generation of [semVer](https://semver.org) releases and associated change logs using [googleapis/release-please](https://github.com/googleapis/release-please).
+
+The most important prefixes you should have in mind are:
+
+- fix: which represents bug fixes, and correlates to a SemVer patch.
+- feat: which represents a new feature, and correlates to a SemVer minor.
+- feat!:, or fix!:, refactor!:, etc., which represent a breaking change (indicated by the !) and will result in a SemVer major.

package/core/client/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-app>
+    <Suspense>
+      <Dashboard />
+
+      <template #fallback>
+        <ErrorAlert v-model="error" />
+      </template>
+    </Suspense>
+  </v-app>
+</template>
+
+<script setup>
+import Dashboard from "@/views/Dashboard.vue";
+import ErrorAlert from "./components/ErrorAlert.vue";
+import { onErrorCaptured, ref } from "vue";
+
+const error = ref("");
+onErrorCaptured((e, inst, info) => {
+  error.value = `
+  ${e}.
+  component: ${inst?.$.type.name}.
+  info: ${info}.
+  `;
+});
+</script>

package/core/client/SuspensedDashboard.ce.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-app ref="vAppRef">
+    <Suspense>
+      <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
+
+      <template #fallback>
+        <ErrorAlert @vue:mounted="setStylesFromHead()" v-model="error" />
+      </template>
+    </Suspense>
+  </v-app>
+</template>
+<script setup>
+import Dashboard from "@/views/Dashboard.vue";
+import { createApp, getCurrentInstance, onErrorCaptured, ref } from "vue";
+import { registerPlugins } from "@/plugins";
+import { eodashKey } from "@/utils/keys";
+import ErrorAlert from "@/components/ErrorAlert.vue";
+
+defineProps({
+  config: {
+    type: String,
+  },
+});
+
+/** @type {import("vue").Ref<import("vuetify/components").VApp | null>} */
+const vAppRef = ref(null);
+const app = createApp({});
+registerPlugins(app);
+
+const inst = getCurrentInstance();
+
+Object.assign(inst?.appContext ?? {}, app._context);
+
+//@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
+Object.assign(inst?.provides ?? {}, app._context.provides);
+
+/**
+ * @param {import("vue").Ref<
+ *   HTMLElement | import("vue").ComponentPublicInstance
+ * >[]} [hiddenElements]
+ */
+function setStylesFromHead(hiddenElements) {
+  const eodashShadowRoot = vAppRef.value?.$el.getRootNode();
+  const styleSheet = new CSSStyleSheet();
+  const head = document.querySelector("head");
+  let stylesStr = "";
+
+  Array.from(head?.children ?? []).forEach((child) => {
+    if (child.getAttribute("type") === "text/css") {
+      stylesStr += `\n ${child.innerHTML}`;
+      return;
+    }
+
+    if (
+      child.tagName == "LINK" &&
+      child.getAttribute("rel")?.includes("stylesheet")
+    ) {
+      eodashShadowRoot?.appendChild(child.cloneNode(true));
+    }
+  });
+
+  stylesStr += `\n
+      ${
+        //@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
+        /** @type {import("@/types").Eodash} */ (inst?.provides[eodashKey])
+          ?.brand.noLayout
+          ? `div.v-application__wrap {
+          min-height: fit-content;
+        }`
+          : ""
+      }
+        `;
+  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"));
+  eodashShadowRoot?.adoptedStyleSheets.push(styleSheet);
+
+  if (
+    hiddenElements &&
+    !(
+      //@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
+      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand
+        .noLayout
+    )
+  ) {
+    hiddenElements.forEach((element) => {
+      if (element.value) {
+        if (element.value instanceof HTMLElement) {
+          element.value.style.opacity = "1";
+        } else {
+          /** @type {HTMLElement} */
+          (element.value.$el).style.opacity = "1";
+        }
+      }
+    });
+  }
+}
+
+const error = ref("");
+onErrorCaptured((e, comp, info) => {
+  error.value = `
+  ${e}.
+  component: ${comp?.$.type.name}.
+  info: ${info}.
+  `;
+});
+</script>

package/core/client/asWebComponent.d.ts

@@ -0,0 +1,23 @@
+/** @group WebComponent */
+type EodashConstructor = import("vue").VueElementConstructor<
+  import("vue").ExtractPropTypes<{ config: string }>
+>;
+/**
+ * Eodash Web Component constructor
+ *
+ * @group WebComponent
+ */
+export declare const Eodash: EodashConstructor;
+/**
+ * Registers `eo-dash` as Custom Element in the window
+ *
+ * @group WebComponent
+ */
+export declare function register(): void;
+
+/**
+ * Eodash store @see EodashStore
+ *
+ * @group WebComponent
+ */
+export declare const store: import("./types").EodashStore;

package/core/client/asWebComponent.js

@@ -0,0 +1,12 @@
+import SuspensedDashboard from "./SuspensedDashboard.ce.vue";
+import { defineCustomElement } from "vue";
+/** @type {import("./asWebComponent").EodashConstructor} */
+export const Eodash = defineCustomElement(SuspensedDashboard);
+
+export function register() {
+  customElements.define("eo-dash", Eodash);
+}
+
+export { default as store } from "@/store";
+
+register();

package/core/client/components/DashboardLayout.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-main>
+    <eox-layout :gap="eodash.template.gap ?? 2">
+      <eox-layout-item
+        v-if="bgWidget.component"
+        class="bg-panel"
+        x="0"
+        y="0"
+        h="12"
+        w="12"
+      >
+        <Suspense suspensible>
+          <component
+            id="bg-widget"
+            :is="bgWidget.component"
+            v-bind="bgWidget.props"
+          />
+        </Suspense>
+      </eox-layout-item>
+      <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+        <Transition name="fade">
+          <eox-layout-item
+            v-if="importedWidget.value.component"
+            :key="importedWidget.value.id"
+            class="panel bg-surface"
+            :h="importedWidget.value.layout.h"
+            :w="importedWidget.value.layout.w"
+            :x="importedWidget.value.layout.x"
+            :y="importedWidget.value.layout.y"
+          >
+            <Suspense suspensible>
+              <component
+                :key="importedWidget.value.id"
+                :is="importedWidget.value.component"
+                v-bind="importedWidget.value.props"
+              />
+            </Suspense>
+          </eox-layout-item>
+        </Transition>
+      </template>
+    </eox-layout>
+  </v-main>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import "@eox/layout";
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const importedWidgets = useDefineWidgets(eodash.template?.widgets);
+</script>
+<style scoped>
+.panel {
+  position: relative;
+  overflow: visible;
+  z-index: 1;
+  border-radius: 0px;
+}
+
+.bg-panel {
+  z-index: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/core/client/components/DynamicWebComponent.vue

@@ -0,0 +1,68 @@
+<template>
+  <span class="d-flex flex-column fill-height overflow-auto">
+    <component :is="tagName" v-bind="properties" ref="elementRef" />
+  </span>
+</template>
+
+<script async setup>
+import { useSTAcStore } from "@/store/stac";
+import { onUnmounted as whenUnMounted, onMounted as whenMounted } from "vue";
+import { ref } from "vue";
+
+const props = /** @type {import("@/types").WebComponentProps} */ (
+  defineProps({
+    link: {
+      type: [String, Function],
+      required: true,
+    },
+    constructorProp: String,
+    tagName: {
+      type: String,
+      required: true,
+    },
+    properties: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    onMounted: Function,
+    onUnmounted: Function,
+  })
+);
+
+const getWebComponent = async () =>
+  typeof props.link === "string"
+    ? await import(/* @vite-ignore */ props.link)
+    : await props.link();
+
+const imported = !customElements.get(props.tagName)
+  ? await getWebComponent().catch((e) => {
+      console.error(e);
+    })
+  : null;
+
+const defined = customElements.get(props.tagName);
+
+// if the imported link doesn't define the custom tag provided
+if (!defined && props.constructorProp) {
+  const Constructor = imported[props.constructorProp];
+  customElements.define(props.tagName, Constructor);
+}
+
+const store = useSTAcStore();
+
+/**
+ * @typedef {HTMLElement & Record<string | number | symbol, unknown>} CustomElement
+ * @type {import("vue").Ref<CustomElement | null>}
+ */
+const elementRef = ref(null);
+
+whenMounted(() => {
+  props.onMounted?.(elementRef.value, store);
+});
+
+whenUnMounted(() => {
+  props.onUnmounted?.(elementRef.value, store);
+});
+</script>

package/core/client/components/ErrorAlert.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-alert
+    v-if="error"
+    translate="yes"
+    location="start bottom"
+    type="error"
+    position="fixed"
+    @click:close="error = ''"
+    variant="elevated"
+    :icon="[mdiAlertCircle]"
+    class="alert"
+    closable
+    :close-icon="[mdiClose]"
+  >
+    {{ errorMessage }}
+    <details is="animated-details">
+      <summary>Error</summary>
+      {{ error }}
+    </details>
+  </v-alert>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { mdiClose, mdiAlertCircle } from "@mdi/js";
+import { inject } from "vue";
+
+const error = defineModel({ type: String, required: true });
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+const errorMessage =
+  eodash.brand.errorMessage ?? "something went wrong, please try again later";
+</script>
+<style scoped>
+.alert {
+  z-index: 10000;
+}
+</style>

package/core/{components → client/components}/Footer.vue

@@ -1,31 +1,50 @@
 <template>
-  <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app
-    class="d-flex justify-space-between">
-    <p class="pt-0" style="font-size: 0.8rem;">
+  <v-footer
+    ref="footer"
+    :height="mdAndDown ? '48px' : 'auto'"
+    color="secondary"
+    app
+    class="d-flex justify-space-between"
+  >
+    <p class="pt-0 footer-text">
       {{ eodash.brand.footerText ?? "" }}
     </p>
     <div>
-      <a href="https://github.com/eodash/eodash" class="text-white" target="_blank">eodash</a> by
+      <a
+        href="https://github.com/eodash/eodash"
+        class="text-white"
+        target="_blank"
+        >eodash</a
+      >
+      by
       <a href="https://eox.at" target="_blank" class="text-white">
-        <img :src='`data:image/svg+xml;base64,${base64Logo}`' height="11px">
+        <img :src="`data:image/svg+xml;base64,${base64Logo}`" height="11px" />
       </a>
     </div>
   </v-footer>
 </template>
 <script setup>
-import { eodashKey } from '@/utils/keys';
-import { ref } from 'vue';
-import { inject } from 'vue';
-import { useDisplay } from 'vuetify/lib/framework.mjs';
+import { eodashKey } from "@/utils/keys";
+import { ref } from "vue";
+import { inject } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 
 /**
  * Footer template ref
- * @type {import('vue').Ref<import('vuetify/lib/components/index.mjs').VFooter | null>}
+ *
+ * @type {import("vue").Ref<
+ *   import("vuetify/lib/components/index.mjs").VFooter | null
+ * >}
  */
-const footer = ref(null)
-const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+const footer = ref(null);
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
-const { mdAndDown } = useDisplay()
-const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`
-const base64Logo = window.btoa(eoxLogo)
+const { mdAndDown } = useDisplay();
+const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`;
+const base64Logo = window.btoa(eoxLogo);
 </script>
+<style scoped>
+.footer-text {
+  font-size: 0.8rem;
+}
+</style>

package/core/client/components/Header.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-app-bar color="primary">
+    <v-app-bar-title>{{ title }}</v-app-bar-title>
+    <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
+  </v-app-bar>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+const title = eodash.brand?.name;
+</script>
+<style scoped>
+.logo {
+  max-width: 140px;
+}
+</style>

package/core/client/components/IframeWrapper.vue

@@ -0,0 +1,11 @@
+<template>
+  <iframe :src="src" class="fill-height fill-width"></iframe>
+</template>
+<script setup>
+defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+});
+</script>

package/core/client/components/Loading.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-row class="d-flex justify-center align-center">
+    <v-col class="flex-column justify-center align-center">
+      <ErrorAlert v-model="error" />
+      <Suspense>
+        <component
+          v-if="loading.component"
+          :is="loading.component"
+          v-bind="loading.props"
+        ></component>
+        <div v-else class="text-center">Loading...</div>
+        <template #fallback>
+          <div class="text-center">Loading...</div>
+        </template>
+      </Suspense>
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { inject, onErrorCaptured, ref } from "vue";
+import { eodashKey } from "@/utils/keys";
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import ErrorAlert from "./ErrorAlert.vue";
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+const [loading] = useDefineWidgets([eodash.template.loading]);
+
+const error = ref("");
+onErrorCaptured((e, inst, info) => {
+  error.value = `
+  ${e}.
+  component: ${inst?.$.type.name}.
+  info: ${info}.
+  `;
+});
+</script>

package/core/client/components/MobileLayout.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-main class="overflow-hidden main">
+    <Suspense suspensible>
+      <component
+        id="bg-widget"
+        v-if="bgWidget.component"
+        :is="bgWidget.component"
+        v-bind="bgWidget.props"
+      ></component>
+    </Suspense>
+
+    <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+      <div
+        v-if="importedWidget.value.component"
+        v-show="activeIdx === idx"
+        id="overlay"
+        class="pa-2 panel bg-surface"
+      >
+        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
+          >&#x2715;</v-btn
+        >
+        <Suspense suspensible>
+          <div class="component-container" v-show="activeIdx === idx">
+            <component
+              :key="importedWidget.value.id"
+              :is="importedWidget.value.component"
+              v-bind="importedWidget.value.props"
+            />
+          </div>
+        </Suspense>
+      </div>
+    </template>
+
+    <v-tabs
+      ref="tabs"
+      align-tabs="center"
+      bg-color="surface"
+      class="tabs"
+      show-arrows
+      v-model="activeIdx"
+    >
+      <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+        <v-tab v-if="importedWidget.value.component" :value="idx">
+          {{ importedWidget.value.title }}
+        </v-tab>
+      </template>
+    </v-tabs>
+  </v-main>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { inject, ref, onMounted } from "vue";
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { useLayout } from "vuetify";
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+//import widgets
+const widgetsConfig = eodash.template.widgets;
+const importedWidgets = useDefineWidgets(widgetsConfig);
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const { mainRect } = useLayout();
+
+const activeIdx = ref(-1);
+
+/** @type {import("vue").Ref<import("vuetify/components").VTabs | null>} */
+const tabs = ref(null);
+const tabsHeightFromBtm = ref("");
+const mainRectTopPx = ref("");
+const mainRectBtmPx = ref("");
+
+onMounted(() => {
+  mainRectTopPx.value = mainRect.value.top + "px";
+  mainRectBtmPx.value = (mainRect.value.bottom || 48) + "px";
+  tabsHeightFromBtm.value =
+    mainRect.value.bottom + (tabs.value?.$el?.clientHeight ?? 0) + "px";
+});
+</script>
+<style scoped>
+.main {
+  height: 91dvh;
+}
+
+.panel {
+  top: v-bind("mainRectTopPx");
+  bottom: v-bind("tabsHeightFromBtm");
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  left: 0;
+  z-index: 1;
+}
+
+.component-container {
+  height: 90%;
+}
+
+.close-btn {
+  height: 5%;
+  position: relative;
+}
+
+.tabs {
+  bottom: v-bind("mainRectBtmPx");
+  position: relative;
+  z-index: 10;
+}
+</style>