@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/README.md

@@ -4,7 +4,7 @@ A package for creating earth observation dashboards. To learn more about eodash
 
 ## Usage
 
-Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+Checkout the [documentation](https://eodash.github.io/eodash/) for a detailed guide.
 
 ## Get Started
 

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,7 +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,10 +1,19 @@
-import SuspensedDashboard from "./SuspensedDashboard.ce.vue";
+import App from "./App.vue";
 import { defineCustomElement } from "vue";
-/** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash = defineCustomElement(SuspensedDashboard);
+import { registerPlugins } from "./plugins";
+/**
+ *  @type {import("vue").VueElementConstructor<
+ *  import("vue").ExtractPropTypes<{ config: string }>>}
+ * */
+export const EodashConstructor = defineCustomElement(App, {
+  shadowRoot: false,
+  configureApp(app) {
+    registerPlugins(app);
+  },
+});
 
 export function register() {
-  customElements.define("eo-dash", Eodash);
+  customElements.define("eo-dash", EodashConstructor);
 }
 
 export { default as store } from "@/store";

package/core/client/components/DashboardLayout.vue

@@ -1,9 +1,10 @@
 <template>
   <v-main>
-    <eox-layout :gap="eodash.template.gap ?? 2">
+    <eox-layout :gap="gap" :style="`padding: ${gap}px`">
       <eox-layout-item
-        v-if="bgWidget.component"
-        class="bg-panel"
+        v-if="bgWidget?.component"
+        class="bg-panel bg-surface"
+        :style="`margin: -${gap + 1}px;`"
         x="0"
         y="0"
         h="12"
@@ -12,14 +13,15 @@
         <Suspense suspensible>
           <component
             id="bg-widget"
-            :is="bgWidget.component"
-            v-bind="bgWidget.props"
+            :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
+            :id="importedWidget.value.id.toString()"
             v-if="importedWidget.value.component"
             :key="importedWidget.value.id"
             class="panel bg-surface"
@@ -42,27 +44,21 @@
   </v-main>
 </template>
 <script setup>
-import { eodashKey } from "@/utils/keys";
-import { inject } from "vue";
-import { useDefineWidgets } from "@/composables/DefineWidgets";
 import "@eox/layout";
+import { useDefineTemplate } from "@/composables/DefineTemplate";
 
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
-
-const [bgWidget] = useDefineWidgets([eodash.template?.background]);
-
-const importedWidgets = useDefineWidgets(eodash.template?.widgets);
+const { bgWidget, importedWidgets, gap } = useDefineTemplate();
 </script>
 <style scoped>
 .panel {
   position: relative;
   overflow: visible;
   z-index: 1;
-  border-radius: 0px;
 }
 
 .bg-panel {
   z-index: 0;
+  border-radius: 0px !important;
 }
 
 .fade-enter-active,
@@ -74,4 +70,30 @@ const importedWidgets = useDefineWidgets(eodash.template?.widgets);
 .fade-leave-to {
   opacity: 0;
 }
+:deep(.bg-surface) {
+  backdrop-filter: blur(9.5px) !important;
+  background-color: rgba(
+    var(--v-theme-surface),
+    var(--v-surface-opacity, 0.8)
+  ) !important;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(var(--v-theme-surface));
+  scrollbar-color: rgba(var(--v-theme-on-surface), 0.2) transparent;
+  scrollbar-width: thin;
+}
+:deep(.bg-primary) {
+  backdrop-filter: blur(9.5px) !important;
+  background-color: rgba(
+    var(--v-theme-primary),
+    var(--v-primary-opacity, 0.8)
+  ) !important;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(var(--v-theme-primary));
+  scrollbar-color: rgba(var(--v-theme-on-primary), 0.2) transparent;
+  scrollbar-width: thin;
+}
 </style>

package/core/client/components/Loading.vue

@@ -4,9 +4,9 @@
       <ErrorAlert v-model="error" />
       <Suspense>
         <component
-          v-if="loading.component"
-          :is="loading.component"
-          v-bind="loading.props"
+          v-if="loading?.component"
+          :is="loading?.component"
+          v-bind="loading?.props"
         ></component>
         <div v-else class="text-center">Loading...</div>
         <template #fallback>
@@ -17,14 +17,11 @@
   </v-row>
 </template>
 <script setup>
-import { inject, onErrorCaptured, ref } from "vue";
-import { eodashKey } from "@/utils/keys";
-import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { onErrorCaptured, ref } from "vue";
 import ErrorAlert from "./ErrorAlert.vue";
+import { useDefineTemplate } from "@/composables/DefineTemplate";
 
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
-
-const [loading] = useDefineWidgets([eodash.template.loading]);
+const { loading } = useDefineTemplate();
 
 const error = ref("");
 onErrorCaptured((e, inst, info) => {

package/core/client/components/MobileLayout.vue

@@ -3,7 +3,7 @@
     <Suspense suspensible>
       <component
         id="bg-widget"
-        v-if="bgWidget.component"
+        v-if="bgWidget?.component"
         :is="bgWidget.component"
         v-bind="bgWidget.props"
       ></component>
@@ -16,9 +16,11 @@
         id="overlay"
         class="pa-2 panel bg-surface"
       >
-        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
-          >&#x2715;</v-btn
-        >
+        <div class="d-flex py-2 justify-end align-end">
+          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
+            >&#x2715;</v-btn
+          >
+        </div>
         <Suspense suspensible>
           <div class="component-container" v-show="activeIdx === idx">
             <component
@@ -48,18 +50,11 @@
   </v-main>
 </template>
 <script setup>
-import { eodashKey } from "@/utils/keys";
-import { inject, ref, onMounted } from "vue";
-import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { useDefineTemplate } from "@/composables/DefineTemplate";
+import { ref, onMounted } from "vue";
 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 { bgWidget, importedWidgets } = useDefineTemplate();
 const { mainRect } = useLayout();
 
 const activeIdx = ref(-1);
@@ -106,4 +101,11 @@ onMounted(() => {
   position: relative;
   z-index: 10;
 }
+:deep(.bg-surface) {
+  backdrop-filter: blur(9.5px) !important;
+  background-color: rgba(
+    var(--v-theme-surface),
+    var(--v-surface-opacity, 0.8)
+  ) !important;
+}
 </style>

package/core/client/composables/DefineEodash.js

@@ -3,8 +3,7 @@ import { eodashKey } from "@/utils/keys";
 import { inject } from "vue";
 
 /**
- * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
- * it to `eodash`
+ * Handles importing user defined instance of Eodash
  *
  * @async
  * @param {string | undefined} runtimeConfig
@@ -15,6 +14,17 @@ export const useEodashRuntime = async (runtimeConfig) => {
   const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
   /** @param {import("@/types").Eodash} config */
   const assignInstance = (config) => {
+    if ("template" in config) {
+      //@ts-expect-error to do
+      delete eodash.templates;
+      //@ts-expect-error to do
+      eodash.template = config.template;
+    } else if ("templates" in config) {
+      //@ts-expect-error to do
+      delete eodash.template;
+      //@ts-expect-error to do
+      eodash.templates = config.templates;
+    }
     /** @type {(keyof import("@/types").Eodash)[]} */ (
       Object.keys(eodash)
     ).forEach((key) => {
@@ -54,8 +64,8 @@ export const useEodashRuntime = async (runtimeConfig) => {
 
 /**
  * @param {((
- *       store: import("@/types").EodashStore,
- *     ) => Promise<import("@/types").Eodash>)
+ *       store: typeof import("@/store").default,
+ *     ) => (Promise<import("@/types").Eodash> | import("@/types").Eodash))
  *   | import("@/types").Eodash} config
  */
 export const createEodash = async (config) => {

package/core/client/composables/DefineTemplate.js

@@ -0,0 +1,67 @@
+import { eodashKey } from "@/utils/keys";
+import { inject, ref, shallowReactive, shallowRef, toRefs, watch } from "vue";
+import { useDefineWidgets } from "./DefineWidgets";
+import { activeTemplate } from "@/store/states";
+import { createSharedComposable } from "@vueuse/core";
+import log from "loglevel";
+
+/**
+ * @typedef {{
+ * bgWidget:ReturnType< typeof import("./DefineWidgets").useDefineWidgets>[number]| import("vue").ShallowRef<null>
+ * loading: ReturnType< typeof import("./DefineWidgets").useDefineWidgets>[number]| import("vue").ShallowRef<null>
+ * importedWidgets:ReturnType< typeof import("./DefineWidgets").useDefineWidgets>
+ * gap: import("vue").Ref<number>
+ * }} DefinedTemplate
+ **/
+
+const useTemplate = () => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+  /** @type {DefinedTemplate} */
+  const definedTemplate = shallowReactive({
+    bgWidget: shallowRef(null),
+    importedWidgets: [],
+    loading: shallowRef(null),
+    gap: ref(16),
+  });
+
+  if ("template" in eodash) {
+    [definedTemplate.bgWidget] = useDefineWidgets([eodash.template.background]);
+    [definedTemplate.loading] = useDefineWidgets([eodash.template.loading]);
+    definedTemplate.importedWidgets = useDefineWidgets(eodash.template.widgets);
+    definedTemplate.gap.value = eodash.template.gap ?? 16;
+  } else {
+    watch(
+      activeTemplate,
+      (template) => {
+        log.debug("Active template watcher triggered, changing to:", template);
+        if (!template) {
+          template = Object.keys(eodash.templates)[0];
+          activeTemplate.value = template ?? "";
+          log.debug("No template found, setting to first template", template);
+        }
+
+        if (!template || !eodash.templates[template]) {
+          console.error(`[eodash] template not found`);
+          return;
+        }
+
+        const templateConfig = eodash.templates[template];
+        [definedTemplate.bgWidget] = useDefineWidgets([
+          templateConfig.background,
+        ]);
+
+        [definedTemplate.loading] = useDefineWidgets([templateConfig.loading]);
+
+        definedTemplate.importedWidgets = useDefineWidgets(
+          templateConfig.widgets,
+        );
+        definedTemplate.gap.value = templateConfig.gap ?? 16;
+      },
+      { immediate: true },
+    );
+  }
+  return toRefs(definedTemplate);
+};
+
+export const useDefineTemplate = createSharedComposable(useTemplate);

package/core/client/composables/DefineWidgets.js

@@ -13,7 +13,9 @@ import { storeToRefs } from "pinia";
  */
 
 /** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
-
+/**
+ * Widgets import map that is created from eodash internals and user defined widgets
+ */
 const internalWidgets = (() => {
   /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
@@ -44,7 +46,6 @@ const internalWidgets = (() => {
  *       | undefined
  *     )[]
  *   | undefined} widgetConfigs
- * @returns {ReactiveDefinedWidget[]}
  */
 export const useDefineWidgets = (widgetConfigs) => {
   /** @type {ReactiveDefinedWidget[]} */