@eodash/eodash 5.0.0-alpha.2.3 → 5.0.0-alpha.2.4

package/README.md

@@ -18,10 +18,9 @@ npm run preview
 
 ## Folder Structure
     .
-    ├── bin                # CLI source code
-    ├── core               # Client source code that hosts the microfrontends and renders the dashboard
+    ├── core               # CLI & Client source code 
     ├── docs               # Documentation files
-    ├── tests              # CLI and component tests folder
+    ├── tests              # CLI & Client component tests folder
     ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md

package/core/{SuspensedDashboard.ce.vue → client/SuspensedDashboard.ce.vue}

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app ref="vAppRef">
     <Suspense>
       <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
 
@@ -20,7 +20,10 @@ defineProps({
   config: {
     type: String,
   }
-})
+});
+
+/** @type { import("vue").Ref<import("vuetify/components").VApp| null > } */
+const vAppRef = ref(null)
 const app = createApp({})
 registerPlugins(app)
 
@@ -30,8 +33,9 @@ Object.assign(inst.appContext, app._context)
 //@ts-expect-error
 Object.assign(inst.provides, app._context.provides)
 
-function setStylesFromHead() {
-  const eodashComponent = document.querySelector('eo-dash')
+/** @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 = ''
@@ -43,23 +47,37 @@ function setStylesFromHead() {
     }
 
     if (child.tagName == 'LINK' && child.getAttribute('rel')?.includes('stylesheet')) {
-      eodashComponent?.shadowRoot?.appendChild(child.cloneNode(true))
+      eodashShadowRoot?.appendChild(child.cloneNode(true))
     }
   });
 
   stylesStr += `\n * {
-    font-family:${
-      //@ts-expect-error
-      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
-  }
-${//@ts-expect-error
-  /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
+      font-family:${
+        //@ts-expect-error
+        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
+      }
+      ${//@ts-expect-error
+        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
       `div.v-application__wrap {
-  min-height: fit-content;
-}`: ""}
-  `
+          min-height: fit-content;
+        }`: ""}
+        `
   styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
-  eodashComponent?.shadowRoot?.adoptedStyleSheets.push(styleSheet)
+  eodashShadowRoot?.adoptedStyleSheets.push(styleSheet);
+
+  //@ts-expect-error
+  if (hiddenElements && !(/** @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('')

package/core/{plugins → client/plugins}/vuetify.js

@@ -14,7 +14,7 @@ import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js"
 const vuetify = createVuetify({
   icons: {
     aliases: {
-      // remapping v-date-picker and v-tabs default icons to `@mdi/js`
+      // mapping v-date-picker and v-tabs default icons to `@mdi/js`
       next: [mdiChevronRight],
       prev: [mdiChevronLeft],
       subgroup: [mdiMenuDown]

package/core/{types.d.ts → client/types.d.ts}

@@ -27,13 +27,13 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
   /**
    * Triggered when the web component is mounted in the DOM.
    * @param el - web component
-   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
+   * @param store - return value of the core STAC pinia store in `/core/client/store/stac.ts`
    */
   onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
   /**
    * Triggered when the web component is unmounted from the DOM.
    * @param el - web component
-   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
+   * @param store - return value of the core STAC pinia store in `/core/client/store/stac.ts`
    */
   onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>) => (Promise<void> | void)
 }

package/core/{views → client/views}/Dashboard.vue

@@ -1,8 +1,8 @@
 <template>
-  <HeaderComponent v-if="!eodash.brand.noLayout" />
+  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent @vue:mounted="onTemplateMount?.()"
+    <TemplateComponent @vue:mounted="onTemplateMount?.(hiddenElements)"
       :style="`height: ${eodash.brand.noLayout ? (onTemplateMount ? '100%' : '90dvh') : 'calc(100dvh - ' + mainRect['top'] + mainRect['bottom'] + 'px)'}`" />
     <template #fallback>
       <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
@@ -10,7 +10,7 @@
       </div>
     </template>
   </Suspense>
-  <FooterComponent v-if="!eodash.brand.noLayout" />
+  <FooterComponent ref="footerRef" v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
@@ -31,7 +31,6 @@ const props = defineProps({
     type: Function
   }
 })
-
 const eodash = await useEodashRuntime(props.config)
 
 useURLSearchParametersSync();
@@ -53,9 +52,28 @@ const HeaderComponent = defineAsyncComponent(() => import(`@/components/Header.v
 const FooterComponent = defineAsyncComponent(() => import(`@/components/Footer.vue`))
 const { mainRect } = useLayout()
 
+/** @type {import("vue").Ref<InstanceType<typeof
+ *  import("@/components/Header.vue").default >|null>}
+ **/
+const headerRef = ref(null);
+/** @type {import("vue").Ref<InstanceType<typeof
+ *  import("@/components/Footer.vue").default >|null>}
+ **/
+const footerRef = ref(null);
+
+const hiddenElements = [headerRef, footerRef]
+
 onMounted(() => {
   const htmlTag = /** @type {HTMLElement}  */(document.querySelector('html'))
   htmlTag.style.overflow = 'hidden';
+
+  if (props.onTemplateMount && !eodash.brand.noLayout) {
+    hiddenElements.forEach(element => {
+      /** @type {HTMLElement} */
+      // @ts-expect-error
+      (element.value.$el).style.opacity = "0"
+    })
+  }
 })
 
 const error = ref('')

package/dist/{DashboardLayout-lzEvtalW.js → client/DashboardLayout-ZaSRMD1M.js}

@@ -1,5 +1,5 @@
-import { x, W as w, X as h, _ as e, $ as n, a0 as u, a9 as _, a2 as t, a5 as d, a1 as c, a3 as g, d as m, a4 as y, F as b, a6 as f } from "./asWebComponent-fqvymeM-.js";
-import { V as v } from "./VMain-COrg6UtF.js";
+import { x, W as _, X as h, _ as e, $ as n, a0 as u, a9 as f, a2 as t, a5 as d, a1 as c, a3 as g, d as m, a4 as y, F as b, a6 as w } from "./asWebComponent-Bvb3xkxI.js";
+import { V as v } from "./VMain-BHYlmRic.js";
 class k extends HTMLElement {
   static get observedAttributes() {
     return ["gap"];
@@ -23,8 +23,8 @@ class k extends HTMLElement {
     <slot></slot>
   `;
   }
-  attributeChangedCallback(a, o, s) {
-    o !== s && (this[a] = s), this.render();
+  attributeChangedCallback(a, r, s) {
+    r !== s && (this[a] = s), this.render();
   }
 }
 class A extends HTMLElement {
@@ -52,8 +52,8 @@ class A extends HTMLElement {
       <slot></slot>
     `;
   }
-  attributeChangedCallback(a, o, s) {
-    o !== s && (this[a] = s), this.render();
+  attributeChangedCallback(a, r, s) {
+    r !== s && (this[a] = s), this.render();
   }
 }
 customElements.define("eox-layout", k);
@@ -70,19 +70,19 @@ const C = ["gap"], $ = {
   setup(p) {
     const a = (
       /** @type {import("@/types").Eodash} */
-      x(w)
-    ), [o] = h([a.template?.background]), s = a.template?.widgets, i = h(s);
+      x(_)
+    ), [r] = h([a.template?.background]), s = a.template?.widgets, i = h(s);
     return (E, M) => (e(), n(v, null, {
       default: u(() => [
-        _("eox-layout", {
+        f("eox-layout", {
           gap: t(a).template.gap ?? 2
         }, [
-          t(o).component ? (e(), d("eox-layout-item", $, [
+          t(r).component ? (e(), d("eox-layout-item", $, [
             (e(), n(c, { suspensible: "" }, {
               default: u(() => [
                 (e(), n(
-                  g(t(o).component),
-                  m({ id: "bg-widget" }, t(o).props),
+                  g(t(r).component),
+                  m({ id: "bg-widget" }, t(r).props),
                   null,
                   16
                   /* FULL_PROPS */
@@ -95,11 +95,11 @@ const C = ["gap"], $ = {
           (e(!0), d(
             b,
             null,
-            f(t(s), (l, r) => (e(), d(
+            w(t(s), (l, o) => (e(), d(
               b,
-              { key: r },
+              { key: o },
               [
-                t(i)[r].value.component ? (e(), d("eox-layout-item", {
+                t(i)[o].value.component ? (e(), d("eox-layout-item", {
                   key: 0,
                   style: { position: "relative", overflow: "visible", "z-index": "1", "border-radius": "0px", background: "rgb(var(--v-theme-surface))" },
                   x: l.layout.x,
@@ -113,10 +113,11 @@ const C = ["gap"], $ = {
                     {
                       default: u(() => [
                         (e(), n(
-                          g(t(i)[r].value.component),
+                          g(t(i)[o].value.component),
                           m({
-                            key: t(i)[r].value.id
-                          }, t(i)[r].value.props),
+                            key: t(i)[o].value.id,
+                            ref_for: !0
+                          }, t(i)[o].value.props),
                           null,
                           16
                           /* FULL_PROPS */

package/dist/{DynamicWebComponent-CgDh2csQ.js → client/DynamicWebComponent-C4Hotc4H.js}

@@ -1,4 +1,4 @@
-import { a_ as i, a$ as m, r as p, Z as d, b0 as f, _ as c, a5 as g, $ as _, d as y, a3 as k } from "./asWebComponent-fqvymeM-.js";
+import { aY as i, aZ as m, r as p, Z as d, a_ as f, _ as c, a5 as g, $ as _, d as y, a3 as k } from "./asWebComponent-Bvb3xkxI.js";
 const h = { class: "d-flex flex-column fill-height overflow-auto" }, N = {
   __name: "DynamicWebComponent",
   props: {

package/dist/{EodashDatePicker-bIyNUYaG.js → client/EodashDatePicker-C4kKjxKy.js}

@@ -1,7 +1,7 @@
-import { au as Ie, p, g as Y, c as f, a as O, b as a, V as j, R as oe, am as X, av as U, aw as Z, y as W, ax as H, ay as lt, r as T, s as J, w as z, a8 as it, az as Me, ar as pe, d as N, C as ce, aA as st, Z as ve, D as ie, ai as ot, e as K, ab as Ae, aj as rt, aB as ut, aC as dt, ad as Be, f as ct, h as re, i as fe, S as me, ak as vt, ac as Fe, al as ft, aD as mt, aE as yt, ae as $e, o as se, l as Ye, F as Q, t as ye, B as Oe, M as ht, aF as Ne, I as G, aG as kt, aH as gt, j as Te, aI as he, u as Re, aJ as bt, aK as Vt, aL as xt, x as Ct, O as Pt, a2 as St, af as _t, ah as Dt, aq as ge, P as wt, aM as It, Q as Mt, aN as pt, v as At, aO as Bt, aP as Ft, _ as de, a5 as be, $ as $t, aQ as ne } from "./asWebComponent-fqvymeM-.js";
-import { M as ue, V as Yt, m as Ee, b as We, c as Ot } from "./index-Cskxla5D.js";
+import { au as Ie, p, g as Y, c as f, a as O, b as a, V as j, R as oe, am as X, av as U, aw as Z, y as W, ax as H, ay as lt, r as T, s as J, w as z, a8 as it, az as Me, ar as pe, d as N, C as ce, aA as st, Z as ve, D as ie, ai as ot, e as K, ab as Ae, aj as rt, aB as ut, aC as dt, ad as Be, f as ct, h as re, i as fe, S as me, ak as vt, ac as Fe, al as ft, aD as mt, aE as yt, ae as $e, o as se, l as Ye, F as Q, t as ye, B as Oe, M as ht, aF as Ne, I as G, aG as kt, aH as gt, j as Te, aI as he, u as Re, aJ as bt, aK as Vt, aL as xt, x as Ct, O as Pt, a2 as St, af as _t, ah as Dt, aq as ge, P as wt, aM as It, Q as Mt, aN as pt, v as At, aO as Bt, aP as Ft, _ as de, a5 as be, $ as $t, aQ as ne } from "./asWebComponent-Bvb3xkxI.js";
+import { M as ue, V as Yt, m as Ee, b as We, c as Ot } from "./index-CaDDfJYE.js";
 import { n as Nt, a as Tt, s as Rt, f as Et } from "./forwardRefs-Bxeu9Obx.js";
-import { i as Wt } from "./index-Zv5eTiB6.js";
+import { I as Wt } from "./index-DlNICb3T.js";
 const Lt = Ie("v-spacer", "div", "VSpacer"), Le = p({
   active: {
     type: [String, Array],

package/dist/{EodashItemFilter-CpgyrJRX.js → client/EodashItemFilter-cBHC0YEM.js}

@@ -1,5 +1,5 @@
-import { _ as n, $ as s, aV as a } from "./asWebComponent-fqvymeM-.js";
-import p from "./DynamicWebComponent-CgDh2csQ.js";
+import { _ as n, $ as s, aV as a } from "./asWebComponent-Bvb3xkxI.js";
+import p from "./DynamicWebComponent-C4Hotc4H.js";
 const u = {
   __name: "EodashItemFilter",
   setup(m) {