@eodash/eodash 5.0.0 → 5.2.0

package/README.md

@@ -43,6 +43,7 @@ npm run build -- --lib
     .
     ├── core               # CLI & Client source code
     ├── docs               # Documentation files
+    ├── templates          # Base configurations and eodash templates
     ├── tests              # CLI & Client component tests folder
     ├── widgets            # Vue components as internal widgets.
     ├── public             # Statically served directory

package/core/client/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="fill-height">
     <Suspense>
       <Dashboard :is-web-component="isWebComponent" :config="config" />
 
@@ -13,11 +13,12 @@
 <script setup>
 import Dashboard from "@/views/Dashboard.vue";
 import ErrorAlert from "./components/ErrorAlert.vue";
+import { provideEodashInstance, useAdoptStyles } from "@/composables";
 import { onErrorCaptured, ref } from "vue";
 
 defineProps({
   config: {
-    type: String,
+    type: [String, Function],
     required: false,
     default: undefined,
   },
@@ -35,4 +36,9 @@ onErrorCaptured((e, inst, info) => {
   info: ${info}.
   `;
 });
+provideEodashInstance();
+if (isWebComponent) {
+  // Adopt styles into the shadowRoot when running as web component
+  useAdoptStyles();
+}
 </script>

package/core/client/asWebComponent.js

@@ -5,17 +5,17 @@ import { registerPlugins } from "./plugins";
  *  @type {import("vue").VueElementConstructor<
  *  import("vue").ExtractPropTypes<{ config: string }>>}
  * */
-export const EodashConstructor = defineCustomElement(App, {
-  shadowRoot: false,
+const EodashConstructor = defineCustomElement(App, {
+  //styles will be imported here using vite-plugin-vue-custom-element-style-injector
+  shadowRoot: !import.meta.env.DEV,
   configureApp(app) {
     registerPlugins(app);
   },
 });
-
-export function register() {
+function register() {
   customElements.define("eo-dash", EodashConstructor);
 }
 
 export { default as store } from "@/store";
-
+export { register, EodashConstructor };
 register();

package/core/client/components/DashboardLayout.vue

@@ -1,10 +1,15 @@
 <template>
-  <v-main>
-    <eox-layout :gap="gap" :style="`padding: ${gap}px`">
+  <v-main class="pa-0">
+    <eox-layout
+      :mediaBreakpoints="[0, 960, 1920]"
+      :gap="gap"
+      class="layout-container"
+      :style="layoutStyle"
+    >
       <eox-layout-item
         v-if="bgWidget?.component"
         :key="bgWidget.id"
-        class="bg-panel bg-surface"
+        class="bg-panel"
         :style="`margin: -${gap + 1}px;`"
         x="0"
         y="0"
@@ -25,18 +30,20 @@
             :id="importedWidget.value.id.toString()"
             v-if="importedWidget.value.component"
             :key="importedWidget.value.id"
-            class="panel bg-surface"
+            class="panel"
             :h="importedWidget.value.layout.h"
             :w="importedWidget.value.layout.w"
             :x="importedWidget.value.layout.x"
             :y="importedWidget.value.layout.y"
           >
             <Suspense>
-              <component
-                :key="importedWidget.value.id"
-                :is="importedWidget.value.component"
-                v-bind="importedWidget.value.props"
-              />
+              <div class="bg-surface pointer">
+                <component
+                  :key="importedWidget.value.id"
+                  :is="importedWidget.value.component"
+                  v-bind="importedWidget.value.props"
+                />
+              </div>
             </Suspense>
           </eox-layout-item>
         </Transition>
@@ -49,12 +56,22 @@ import "@eox/layout";
 import { useDefineTemplate } from "@/composables/DefineTemplate";
 
 const { bgWidget, importedWidgets, gap } = useDefineTemplate();
+
+const layoutStyle = {
+  padding: gap.value + "px",
+  overflow: "hidden !important",
+};
 </script>
 <style scoped>
 .panel {
   position: relative;
-  overflow: visible;
+  overflow: auto;
   z-index: 1;
+  pointer-events: none;
+}
+
+.pointer {
+  pointer-events: all;
 }
 
 .bg-panel {
@@ -71,30 +88,30 @@ const { bgWidget, importedWidgets, gap } = useDefineTemplate();
 .fade-leave-to {
   opacity: 0;
 }
-:deep(.bg-surface) {
-  backdrop-filter: blur(9.5px) !important;
+.bg-surface,
+.bg-primary {
+  backdrop-filter: blur(10px) !important;
+  border-radius: 8px;
+  border: none;
+  box-shadow:
+    0px 0px 1px rgba(24, 39, 75, 0.22),
+    0px 6px 12px -6px rgba(24, 39, 75, 0.12),
+    0px 8px 24px -4px rgba(24, 39, 75, 0.08);
+  max-height: 100%;
+  overflow: auto;
+  scrollbar-color: rgba(var(--v-theme-on-surface), 0.2) transparent;
+  scrollbar-width: thin;
+}
+.bg-surface {
   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;
+.bg-primary {
   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/EodashOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="eodash-overlay" v-if="$vuetify.display.mdAndUp">
+  <div class="eodash-overlay">
     <p>
       <a href="https://github.com/eodash/eodash" target="_blank"
         >eodash v{{ version }}</a
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup>
-import { useTheme } from "vuetify/lib/framework.mjs";
+import { useTheme } from "vuetify";
 import pkgJson from "../../../package.json";
 const { computedThemes } = useTheme();
 
@@ -41,10 +41,9 @@ const base64Logo = btoa(eoxLogo);
   z-index: 9999;
   pointer-events: none;
   p {
-    position: absolute;
-    bottom: -4px;
-    left: 95px;
-    transform: translate(-50%, -50%);
+    position: fixed;
+    bottom: 6px;
+    left: 24px;
     color: rgba(var(--v-theme-on-secondary), 1);
   }
   a {

package/core/client/components/ErrorAlert.vue

@@ -25,9 +25,9 @@ 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 eodash = inject(eodashKey);
 const errorMessage =
-  eodash.brand.errorMessage ?? "something went wrong, please try again later";
+  eodash?.brand?.errorMessage ?? "something went wrong, please try again later";
 </script>
 <style scoped>
 .alert {

package/core/client/components/Footer.vue

@@ -7,7 +7,7 @@
     class="d-flex justify-end"
   >
     <p class="pt-0 footer-text">
-      {{ eodash.brand.footerText ?? "" }}
+      {{ eodash?.brand.footerText ?? "" }}
     </p>
   </v-footer>
 </template>
@@ -15,17 +15,17 @@
 import { eodashKey } from "@/utils/keys";
 import { ref } from "vue";
 import { inject } from "vue";
-import { useDisplay } from "vuetify/lib/framework.mjs";
+import { useDisplay } from "vuetify";
 
 /**
  * Footer template ref
  *
  * @type {import("vue").Ref<
- *   import("vuetify/lib/components/index.mjs").VFooter | null
+ *   import("vuetify/components").VFooter | null
  * >}
  */
 const footer = ref(null);
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+const eodash = inject(eodashKey);
 
 const { mdAndDown } = useDisplay();
 </script>

package/core/client/components/Header.vue

@@ -1,16 +1,16 @@
 <template>
   <v-app-bar color="primary">
     <v-app-bar-title class="header">{{ title }}</v-app-bar-title>
-    <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
+    <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 eodash = inject(eodashKey);
 
-const title = eodash.brand?.name;
+const title = eodash?.brand?.name;
 </script>
 <style scoped>
 .logo {

package/core/client/components/MobileLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-main class="overflow-hidden main">
+  <v-main class="overflow-hidden pa-0">
     <Suspense suspensible>
       <component
         id="bg-widget"
@@ -18,12 +18,23 @@
         class="pa-2 panel bg-surface"
       >
         <div class="d-flex py-2 justify-end align-end">
-          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
-            >&#x2715;</v-btn
+          <button
+            class="circle small transparent close-btn"
+            @click="activeIdx = -1"
           >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <title>close</title>
+              <path
+                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+              />
+            </svg>
+          </button>
         </div>
         <Suspense suspensible>
-          <div class="component-container" v-show="activeIdx === idx">
+          <div
+            class="d-flex flex-column justify-center component-container"
+            v-show="activeIdx === idx"
+          >
             <component
               :key="importedWidget.value.id"
               :is="importedWidget.value.component"
@@ -34,20 +45,17 @@
       </div>
     </template>
 
-    <v-tabs
-      ref="tabs"
-      align-tabs="center"
-      bg-color="surface"
-      class="tabs"
-      show-arrows
-      v-model="activeIdx"
-    >
+    <nav class="tabbed tabs">
       <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
-        <v-tab v-if="importedWidget.value.component" :value="idx">
-          {{ importedWidget.value.title }}
-        </v-tab>
+        <a
+          v-if="importedWidget.value.component"
+          :class="{ active: activeIdx === idx }"
+          @click="activeIdx = activeIdx === idx ? -1 : idx"
+        >
+          <span>{{ importedWidget.value.title }}</span>
+        </a>
       </template>
-    </v-tabs>
+    </nav>
   </v-main>
 </template>
 <script setup>
@@ -60,8 +68,6 @@ 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("");
@@ -69,23 +75,30 @@ 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";
+  tabsHeightFromBtm.value = mainRect.value.bottom + 48 + 32 + "px"; // 48px nav height + 32px bottom offset
 });
 </script>
 <style scoped>
-.main {
-  height: 91dvh;
+@import url("@eox/ui/style.css");
+
+#bg-widget {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .panel {
-  top: v-bind("mainRectTopPx");
   bottom: v-bind("tabsHeightFromBtm");
+  top: v-bind("mainRectTopPx");
   position: absolute;
   overflow: hidden;
   width: 100%;
   left: 0;
-  z-index: 1;
+  z-index: 3;
 }
 
 .component-container {
@@ -98,12 +111,19 @@ onMounted(() => {
 }
 
 .tabs {
-  bottom: v-bind("mainRectBtmPx");
-  position: relative;
+  position: fixed;
+  bottom: 32px;
+  left: 12px;
+  right: 12px;
+  width: calc(100% - 24px);
+  height: 48px;
   z-index: 10;
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 :deep(.bg-surface) {
-  backdrop-filter: blur(9.5px) !important;
+  backdrop-filter: blur(10px) !important;
   background-color: rgba(
     var(--v-theme-surface),
     var(--v-surface-opacity, 0.8)

package/core/client/composables/DefineEodash.js

@@ -1,72 +1,67 @@
 import store from "@/store";
 import { eodashKey } from "@/utils/keys";
-import { inject } from "vue";
+import { inject, reactive } from "vue";
 
 /**
  * Handles importing user defined instance of Eodash
  *
  * @async
- * @param {string | undefined} runtimeConfig
- * @returns {Promise<import("@/types").Eodash>}
+ * @param {string | undefined| (()=> Promise<import("@/types").Eodash>) | Function} runtimeConfig
+ * @returns {Promise<import("@/types").Eodash | null | undefined>}
  * @see {@linkplain '@/eodash.js'}
  */
 export const useEodashRuntime = async (runtimeConfig) => {
+  let eodashConfig;
   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) => {
-      //@ts-expect-error to do
-      eodash[key] = config[key];
-    });
-  };
 
   if (runtimeConfig) {
-    assignInstance(
-      (
-        await import(
-          /* @vite-ignore */ new URL(runtimeConfig, import.meta.url).href
-        )
-      ).default,
-    );
-    return eodash;
+    eodashConfig =
+      typeof runtimeConfig === "function"
+        ? await runtimeConfig()
+        : await import(
+            /* @vite-ignore */ new URL(runtimeConfig, import.meta.url).href
+          ).then(async (m) => await m["default"]);
+    if (!eodashConfig) {
+      throw new Error(
+        "No dashboard configuration defined in the runtime config:" +
+          runtimeConfig,
+      );
+    }
+    Object.assign(eodash, eodashConfig);
+    return reactive(eodashConfig);
   }
 
+  async function importUserConfig() {
+    /* global __userConfigExist__:readonly */
+    // injected by vite
+    if (__userConfigExist__) {
+      return import("user:config").then(async (m) => await m["default"]);
+    }
+  }
   try {
     const configJs = "/config.js";
-    assignInstance(
-      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
-        .default,
-    );
+    eodashConfig = await import(
+      /* @vite-ignore */ new URL(configJs, import.meta.url).href
+    ).then(async (m) => await m["default"]);
+    if (!eodashConfig) {
+      eodashConfig = await importUserConfig();
+    }
   } catch {
     try {
-      assignInstance(
-        await import("user:config").then(async (m) => await m["default"]),
-      );
+      eodashConfig = await importUserConfig();
     } catch {
       console.error("no dashboard configuration defined");
+      eodashConfig = null;
     }
   }
-  return eodash;
+  Object.assign(eodash, eodashConfig);
+  return reactive(eodash);
 };
 
 /**
- * @param {((
- *       store: typeof import("@/store").default,
- *     ) => (Promise<import("@/types").Eodash> | import("@/types").Eodash))
- *   | import("@/types").Eodash} config
+ * @template {import("@/types").Eodash} T
+ * @param {T | ((store: typeof import("@/store").default) => Promise<T>)} config
+ * @returns {Promise<T>}
  */
 export const createEodash = async (config) => {
   if (config instanceof Function) {

package/core/client/composables/DefineTemplate.js

@@ -15,7 +15,7 @@ import log from "loglevel";
  **/
 
 const useTemplate = () => {
-  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  const eodash = inject(eodashKey);
 
   /** @type {DefinedTemplate} */
   const definedTemplate = shallowReactive({
@@ -24,7 +24,9 @@ const useTemplate = () => {
     loading: shallowRef(null),
     gap: ref(16),
   });
-
+  if (!eodash) {
+    return definedTemplate;
+  }
   if ("template" in eodash) {
     [definedTemplate.bgWidget] = useDefineWidgets([eodash.template.background]);
     [definedTemplate.loading] = useDefineWidgets([eodash.template.loading]);

package/core/client/composables/DefineWidgets.js

@@ -8,7 +8,7 @@ import { storeToRefs } from "pinia";
  *   props: Record<string, unknown>;
  *   title: string;
  *   id: string | number | symbol;
- *   layout: { x: number; y: number; h: number; w: number };
+ *   layout: { x: number | string; y: number | string; h: number | string; w: number | string };
  * }} DefinedWidget
  */
 
@@ -69,19 +69,19 @@ export const useDefineWidgets = (widgetConfigs) => {
     });
 
     if ("defineWidget" in (config ?? {})) {
-      const { selectedStac } = storeToRefs(useSTAcStore());
+      const { selectedStac, selectedCompareStac } = storeToRefs(useSTAcStore());
       watch(
-        selectedStac,
-        (updatedStac) => {
+        [selectedStac, selectedCompareStac],
+        ([updatedStac, updatedCompareStac]) => {
           let definedConfig =
             /** @type {import("@/types").FunctionalWidget} */ (
               config
-            )?.defineWidget(updatedStac);
+            )?.defineWidget(updatedStac, updatedCompareStac);
           if (definedConfig) {
             definedConfig = reactive(definedConfig);
           }
           definedWidget.value =
-            definedWidget.value.id === definedConfig?.id
+            definedConfig && definedWidget.value.id === definedConfig.id
               ? definedWidget.value
               : getWidgetDefinition(definedConfig);
         },
@@ -103,7 +103,9 @@ export const useDefineWidgets = (widgetConfigs) => {
  * @param {import("@/types").StaticWidget
  *   | Omit<import("@/types").StaticWidget, "layout">
  *   | undefined
- *   | null} [config]
+ *   | null
+ *   | false
+ * } [config]
  * @returns {DefinedWidget}
  */
 const getWidgetDefinition = (config) => {
@@ -115,7 +117,11 @@ const getWidgetDefinition = (config) => {
     id: Symbol(),
     layout: reactive({ x: 0, y: 0, h: 0, w: 0 }),
   };
-  switch (config?.type) {
+  if (!config) {
+    return importedWidget;
+  }
+
+  switch (config.type) {
     case "internal":
       importedWidget.component = defineAsyncComponent({
         loader: () => {