@eodash/eodash 5.0.0-alpha.2.19 → 5.0.0-alpha.2.20

package/core/client/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <Suspense>
-      <Dashboard />
+      <Dashboard :is-web-component="isWebComponent" :config="config" />
 
       <template #fallback>
         <ErrorAlert v-model="error" />
@@ -15,9 +15,19 @@ import Dashboard from "@/views/Dashboard.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
 import { onErrorCaptured, ref } from "vue";
 
+defineProps({
+  config: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+});
+
 // window.setEodashLoglevel("DEBUG")
 
 const error = ref("");
+const isWebComponent = !!document.querySelector("eo-dash");
+
 onErrorCaptured((e, inst, info) => {
   error.value = `
   ${e}.

package/core/client/asWebComponent.js

@@ -1,7 +1,14 @@
-import SuspensedDashboard from "./SuspensedDashboard.ce.vue";
+import App from "./App.vue";
 import { defineCustomElement } from "vue";
+import { registerPlugins } from "./plugins";
+
 /** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash = defineCustomElement(SuspensedDashboard);
+export const Eodash = defineCustomElement(App, {
+  shadowRoot: false,
+  configureApp(app) {
+    registerPlugins(app);
+  },
+});
 
 export function register() {
   customElements.define("eo-dash", Eodash);

package/core/client/views/Dashboard.vue

@@ -1,26 +1,23 @@
 <template>
-  <HeaderComponent ref="headerRef" v-if="!eodash.brand.noLayout" />
+  <HeaderComponent v-if="!eodash.brand.noLayout" />
   <ErrorAlert v-model="error" />
   <Suspense>
-    <TemplateComponent
-      @vue:mounted="onTemplateMount?.(hiddenElements)"
-      class="template"
-    />
+    <TemplateComponent :style="{ height: templateHeight }" />
     <template #fallback>
       <div class="loading-container">
         <Loading />
       </div>
     </template>
   </Suspense>
-  <FooterComponent ref="footerRef" v-if="!eodash.brand.noLayout" />
+  <FooterComponent v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from "@/store/stac";
-import { defineAsyncComponent, onErrorCaptured, onMounted, ref } from "vue";
-import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
+import { defineAsyncComponent, onErrorCaptured, ref } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 import { loadFont } from "@/utils";
 import Loading from "@/components/Loading.vue";
 import ErrorAlert from "@/components/ErrorAlert.vue";
@@ -29,8 +26,9 @@ const props = defineProps({
   config: {
     type: String,
   },
-  onTemplateMount: {
-    type: Function,
+  isWebComponent: {
+    type: Boolean,
+    default: false,
   },
 });
 const eodash = await useEodashRuntime(props.config);
@@ -43,7 +41,7 @@ theme.global.name.value = "dashboardTheme";
 await loadFont(
   eodash.brand?.font?.family,
   eodash.brand?.font?.link,
-  !!props.onTemplateMount,
+  props.isWebComponent,
 );
 
 const { loadSTAC } = useSTAcStore();
@@ -60,34 +58,8 @@ const HeaderComponent = defineAsyncComponent(
 const FooterComponent = defineAsyncComponent(
   () => import(`@/components/Footer.vue`),
 );
-const { mainRect } = useLayout();
-const templateHeight = eodash.brand.noLayout
-  ? props.onTemplateMount
-    ? "100%"
-    : "90dvh"
-  : `calc(100dvh - ${mainRect.value["top"] + mainRect.value["bottom"]}px)`;
 
-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(() => {
-  if (props.onTemplateMount && !eodash.brand.noLayout) {
-    hiddenElements.forEach((element) => {
-      /** @type {HTMLElement} */
-      (
-        /** @type {import("vue").ComponentPublicInstance} */
-        (element.value).$el
-      ).style.opacity = "0";
-    });
-  }
-});
+const templateHeight = props.isWebComponent ? "100%" : "100dvh";
 
 const error = ref("");
 onErrorCaptured((e, comp, info) => {
@@ -99,18 +71,17 @@ onErrorCaptured((e, comp, info) => {
 });
 </script>
 <style>
-html {
-  overflow: hidden !important;
-}
-
-.template {
-  height: v-bind("templateHeight");
-}
-
 .loading-container {
   height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+div.v-application__wrap {
+  min-height: fit-content;
+}
+eo-dash {
+  overflow: hidden;
+}
 </style>

package/dist/client/DashboardLayout-CPIA_V5h.js

@@ -0,0 +1,86 @@
+import { inject, openBlock, createBlock, withCtx, createElementVNode, unref, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
+import { _ as _export_sfc, F as eodashKey, G as useDefineWidgets } from './asWebComponent-CIm1IGNl.js';
+import '@eox/layout';
+import { V as VMain } from './VMain-nLmJhfgS.js';
+
+const _hoisted_1 = ["gap"];
+const _hoisted_2 = {
+  key: 0,
+  class: "bg-panel",
+  x: "0",
+  y: "0",
+  h: "12",
+  w: "12"
+};
+const _hoisted_3 = ["h", "w", "x", "y"];
+
+
+const _sfc_main = {
+  __name: 'DashboardLayout',
+  setup(__props) {
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const importedWidgets = useDefineWidgets(eodash.template?.widgets);
+
+return (_ctx, _cache) => {
+                                                       
+
+  return (openBlock(), createBlock(VMain, null, {
+    default: withCtx(() => [
+      createElementVNode("eox-layout", {
+        gap: unref(eodash).template.gap ?? 2
+      }, [
+        (unref(bgWidget).component)
+          ? (openBlock(), createElementBlock("eox-layout-item", _hoisted_2, [
+              (openBlock(), createBlock(Suspense, { suspensible: "" }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(bgWidget).component), mergeProps({ id: "bg-widget" }, unref(bgWidget).props), null, 16 /* FULL_PROPS */))
+                ]),
+                _: 1 /* STABLE */
+              }))
+            ]))
+          : createCommentVNode("v-if", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(importedWidgets), (importedWidget, idx) => {
+          return (openBlock(), createBlock(Transition, {
+            key: idx,
+            name: "fade"
+          }, {
+            default: withCtx(() => [
+              (importedWidget.value.component)
+                ? (openBlock(), createElementBlock("eox-layout-item", {
+                    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
+                  }, [
+                    (openBlock(), createBlock(Suspense, { suspensible: "" }, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(importedWidget.value.component), mergeProps({
+                          key: importedWidget.value.id,
+                          ref_for: true
+                        }, importedWidget.value.props), null, 16 /* FULL_PROPS */))
+                      ]),
+                      _: 2 /* DYNAMIC */
+                    }, 1024 /* DYNAMIC_SLOTS */))
+                  ], 8 /* PROPS */, _hoisted_3))
+                : createCommentVNode("v-if", true)
+            ]),
+            _: 2 /* DYNAMIC */
+          }, 1024 /* DYNAMIC_SLOTS */))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 8 /* PROPS */, _hoisted_1)
+    ]),
+    _: 1 /* STABLE */
+  }))
+}
+}
+
+};
+const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-a859692c"]]);
+
+export { DashboardLayout as default };

package/dist/client/DynamicWebComponent-Bm2S0izi.js

@@ -0,0 +1,88 @@
+import { withAsyncContext, ref, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
+import { $ as useSTAcStore } from './asWebComponent-CIm1IGNl.js';
+
+const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
+
+
+const _sfc_main = {
+  __name: 'DynamicWebComponent',
+  props: {
+    link: {
+      type: [String, Function],
+      required: true,
+    },
+    constructorProp: String,
+    tagName: {
+      type: String,
+      required: true,
+    },
+    properties: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    onMounted: Function,
+    onUnmounted: Function,
+  },
+  async setup(__props) {
+
+let __temp, __restore;
+
+const props = /** @type {import("@/types").WebComponentProps} */ (
+  __props
+);
+
+const getWebComponent = async () =>
+  typeof props.link === "string"
+    ? await import(/* @vite-ignore */ props.link)
+    : await props.link();
+
+const imported = !customElements.get(props.tagName)
+  ? (
+  ([__temp,__restore] = withAsyncContext(() => getWebComponent().catch((e) => {
+      console.error(e);
+    }))),
+  __temp = await __temp,
+  __restore(),
+  __temp
+)
+  : 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);
+
+onMounted(() => {
+  props.onMounted?.(elementRef.value, store);
+});
+
+onUnmounted(() => {
+  props.onUnmounted?.(elementRef.value, store);
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("span", _hoisted_1, [
+    (openBlock(), createBlock(resolveDynamicComponent(__props.tagName), mergeProps(__props.properties, {
+      ref_key: "elementRef",
+      ref: elementRef
+    }), null, 16 /* FULL_PROPS */))
+  ]))
+}
+}
+
+};
+
+export { _sfc_main as default };