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

package/core/client/components/IframeWrapper.vue

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

package/core/client/components/Loading.vue

@@ -1,38 +1,37 @@
 <template>
-  <v-row class="d-flex justify-center align-center ">
+  <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>
+        <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>
+          <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';
+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 eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
-const [loading] = useDefineWidgets([eodash.template.loading])
+const [loading] = useDefineWidgets([eodash.template.loading]);
 
-const error = ref('')
+const error = ref("");
 onErrorCaptured((e, inst, info) => {
   error.value = `
   ${e}.
   component: ${inst?.$.type.name}.
   info: ${info}.
-  `
-})
-
+  `;
+});
 </script>

package/core/client/components/MobileLayout.vue

@@ -1,57 +1,110 @@
 <template>
-  <v-main class="overflow-hidden" style="height: 91dvh;">
+  <v-main class="overflow-hidden main">
     <Suspense suspensible>
-      <component id="bg-widget" v-if="bgWidget.component" :is="bgWidget.component" v-bind="bgWidget.props"></component>
+      <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" :style="{
-        bottom: tabsHeightFromBtm, position: 'absolute', overflow: 'hidden',
-        width: '100%', left: 0, top: mainRect.top + 'px', zIndex: 1, background: 'rgb(var(--v-theme-surface))'
-      }">
-        <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
+      <div
+        v-if="importedWidget.value.component"
+        v-show="activeIdx === idx"
+        id="overlay"
+        class="pa-2 panel"
+      >
+        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
+          >&#x2715;</v-btn
+        >
         <Suspense suspensible>
-          <div style="height: 90% !important;" v-show="activeIdx === idx">
-            <component :key="importedWidget.value.id" :is="importedWidget.value.component"
-              v-bind="importedWidget.value.props" />
+          <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"
-      :style="{ position: 'relative', bottom: (mainRect.bottom || 48) + 'px', zIndex: 10 }" show-arrows
-      v-model="activeIdx">
+    <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"
+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));
+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 widgetsConfig = eodash.template.widgets;
+const importedWidgets = useDefineWidgets(widgetsConfig);
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const { mainRect } = useLayout();
 
-const { mainRect } = useLayout()
+const activeIdx = ref(-1);
 
-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("");
 
-/** @type {import("vue").Ref<import("vuetify/components").VTabs|null>} */
-const tabs = ref(null)
-const tabsHeightFromBtm = ref('')
 onMounted(() => {
-  tabsHeightFromBtm.value = mainRect.value.bottom + (/** @type {HTMLElement} */(tabs.value?.$el)?.clientHeight ?? 0) + "px"
-})
+  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;
+  background: rgb(var(--v-theme-surface));
+}
+
+.component-container {
+  height: 90%;
+}
+
+.close-btn {
+  height: 5%;
+  position: relative;
+}
+
+.tabs {
+  bottom: v-bind("mainRectBtmPx");
+  position: relative;
+  z-index: 10;
+}
+</style>

package/core/client/composables/DefineEodash.js

@@ -2,56 +2,66 @@ import store from "@/store";
 import { eodashKey } from "@/utils/keys";
 import { inject } from "vue";
 
-
-
 /**
- * Sets user defined instance on runtime.
- * Consumes `/@fs/config.js` and assign it to `eodash`
+ * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
+ * it to `eodash`
+ *
  * @async
- * @returns {Promise<import("@/types").Eodash>}
  * @param {string | undefined} runtimeConfig
+ * @returns {Promise<import("@/types").Eodash>}
  * @see {@linkplain '@/eodash.js'}
  */
 export const useEodashRuntime = async (runtimeConfig) => {
-  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
-  /**
-   * @param {import("@/types").Eodash} config
-   */
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  /** @param {import("@/types").Eodash} config */
   const assignInstance = (config) => {
-       /** @type {(keyof import("@/types").Eodash)[]} */(Object.keys(eodash))
-      .forEach((key) => {
-        //@ts-expect-error
-        eodash[key] = config[key]
-      })
-  }
+    /** @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
+    assignInstance(
+      (
+        await import(
+          /* @vite-ignore */ new URL(runtimeConfig, import.meta.url).href
+        )
+      ).default,
+    );
+    return eodash;
   }
 
   try {
+    const configJs = "/config.js";
     assignInstance(
-      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
-    )
+      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
+        .default,
+    );
   } catch {
     try {
-      assignInstance(await import("user:config").then(async m => await m['default']))
+      assignInstance(
+        await import("user:config").then(async (m) => await m["default"]),
+      );
     } catch {
-      console.error('no dashboard configuration defined')
+      console.error("no dashboard configuration defined");
     }
   }
-  return eodash
-}
+  return eodash;
+};
 
 /**
- * @param {((store:import("@/types").EodashStore)=> Promise<import("@/types").Eodash>)
- * | import("@/types").Eodash}  config
+ * @param {((
+ *       store: import("@/types").EodashStore,
+ *     ) => Promise<import("@/types").Eodash>)
+ *   | import("@/types").Eodash} config
  */
 export const createEodash = async (config) => {
   if (config instanceof Function) {
-    return await config(store)
+    return await config(store);
   } else {
-    return config
+    return config;
   }
-}
+};

package/core/client/composables/DefineWidgets.js

@@ -1,135 +1,161 @@
-import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
-import { useSTAcStore } from '@/store/stac'
-import { storeToRefs } from 'pinia'
-import Loading from '@/components/Loading.vue';
+import { defineAsyncComponent, reactive, shallowRef, watch } from "vue";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
 
 /**
  * @typedef {{
- *   component:import('vue').Component | null;
+ *   component: import("vue").Component | null;
  *   props: Record<string, unknown>;
- *   title :string;
- *   id:string|number|symbol;
+ *   title: string;
+ *   id: string | number | symbol;
+ *   layout: { x: number; y: number; h: number; w: number };
  * }} DefinedWidget
-*/
+ */
 
-/**
- * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
-*/
+/** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
 
 const internalWidgets = (() => {
-  /**
-   * @type {Record<string,() => Promise<import('vue').Component>>}
-   */
+  /** @type {Record<string, () => Promise<import("vue").Component>>} */
   const importMap = {
-    ...import.meta.glob('^/**/*.vue'),
-    ...import.meta.glob("user:widgets/**/*.vue")
-  }
+    ...import.meta.glob("^/**/*.vue"),
+    ...import.meta.glob("user:widgets/**/*.vue"),
+  };
   for (const key in importMap) {
-    const newKey = /** @type {string} */(key.split('/').at(-1)).slice(0, -4)
-    Object.defineProperty(importMap, newKey,
-      /** @type {PropertyDescriptor} */(Object.getOwnPropertyDescriptor(importMap, key)));
+    const newKey = /** @type {string} */ (key.split("/").at(-1)).slice(0, -4);
+    Object.defineProperty(
+      importMap,
+      newKey,
+      /** @type {PropertyDescriptor} */ (
+        Object.getOwnPropertyDescriptor(importMap, key)
+      ),
+    );
     delete importMap[key];
   }
-  return importMap
+  return importMap;
 })();
 
-
 /**
  * Composable that converts widgets Configurations to defined imported widgets
- * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
- * import("@/types").WidgetsContainerProps['widgets'] | undefined} widgetConfigs
- * @returns {Array<ReactiveDefinedWidget>}
- **/
+ *
+ * @param {(
+ *       | import("@/types").Widget
+ *       | import("@/types").BackgroundWidget
+ *       | undefined
+ *     )[]
+ *   | import("@/types").WidgetsContainerProps["widgets"]
+ *   | undefined} widgetConfigs
+ * @returns {ReactiveDefinedWidget[]}
+ */
 export const useDefineWidgets = (widgetConfigs) => {
-  /**
-   * @type {Array<ReactiveDefinedWidget>}
-   */
-  const definedWidgets = []
+  /** @type {ReactiveDefinedWidget[]} */
+  const definedWidgets = [];
 
-  for (const config of (widgetConfigs ?? [])) {
-    /**
-     * @type {ReactiveDefinedWidget}
-     */
+  for (const config of widgetConfigs ?? []) {
+    /** @type {ReactiveDefinedWidget} */
     const definedWidget = shallowRef({
       component: null,
       props: {},
-      title: '',
+      title: "",
       id: Symbol(),
-    })
+      layout: { x: 0, y: 0, h: 0, w: 0 },
+    });
 
-    if ('defineWidget' in (config ?? {})) {
-      const { selectedStac } = storeToRefs(useSTAcStore())
-      watch(selectedStac, (updatedStac) => {
-        let definedConfig =  /** @type {import("@/types").FunctionalWidget} */(config)?.defineWidget(updatedStac)
-        if (definedConfig) {
-          definedConfig = reactive(definedConfig)
-        }
-        definedWidget.value = definedWidget.value.id === definedConfig?.id ?
-          definedWidget.value : getWidgetDefinition(definedConfig);
-      }, { immediate: true })
+    if ("defineWidget" in (config ?? {})) {
+      const { selectedStac } = storeToRefs(useSTAcStore());
+      watch(
+        selectedStac,
+        (updatedStac) => {
+          let definedConfig =
+            /** @type {import("@/types").FunctionalWidget} */ (
+              config
+            )?.defineWidget(updatedStac);
+          if (definedConfig) {
+            definedConfig = reactive(definedConfig);
+          }
+          definedWidget.value =
+            definedWidget.value.id === definedConfig?.id
+              ? definedWidget.value
+              : getWidgetDefinition(definedConfig);
+        },
+        { immediate: true },
+      );
     } else {
-      definedWidget.value = getWidgetDefinition(/** @type {import("@/types").StaticWidget} */(config))
+      definedWidget.value = getWidgetDefinition(
+        /** @type {import("@/types").StaticWidget} */ (config),
+      );
     }
-    definedWidgets.push(definedWidget)
+    definedWidgets.push(definedWidget);
   }
-  return definedWidgets
-}
-
+  return definedWidgets;
+};
 
 /**
  * Converts a static widget configuration to a defined imported widget
- * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined | null} config
+ *
+ * @param {import("@/types").StaticWidget
+ *   | Omit<import("@/types").StaticWidget, "layout">
+ *   | undefined
+ *   | null} [config]
  * @returns {DefinedWidget}
- **/
+ */
 const getWidgetDefinition = (config) => {
-  /**
-   * @type {DefinedWidget}
-   */
+  /** @type {DefinedWidget} */
   const importedWidget = {
     component: null,
     props: {},
-    title: '',
+    title: "",
     id: Symbol(),
-  }
+    layout: reactive({ x: 0, y: 0, h: 0, w: 0 }),
+  };
   switch (config?.type) {
-    case 'internal':
+    case "internal":
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
+        loader:
+          internalWidgets[
+            /** @type {import("@/types").InternalComponentWidget} * */ (config)
+              ?.widget.name
+          ],
         suspensible: true,
-        loadingComponent: Loading
-      })
-      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
+      });
+      importedWidget.props = reactive(
+        /** @type {import("@/types").InternalComponentWidget} * */ (config)
+          ?.widget.properties ?? {},
+      );
 
       break;
 
-    case 'web-component':
+    case "web-component":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('@/components/DynamicWebComponent.vue'),
+        loader: () => import("@/components/DynamicWebComponent.vue"),
         suspensible: true,
-        loadingComponent: Loading
-      })
-      importedWidget.props = reactive(config.widget)
+      });
+      importedWidget.props = reactive(config.widget);
 
       break;
-    case 'iframe':
+    case "iframe":
       importedWidget.component = defineAsyncComponent({
-        loader: () => import('@/components/IframeWrapper.vue'),
+        loader: () => import("@/components/IframeWrapper.vue"),
         suspensible: true,
-        loadingComponent: Loading
-      })
-      importedWidget.props = reactive(config.widget)
+      });
+      importedWidget.props = reactive(config.widget);
       break;
 
     default:
       if (!config) {
-        return importedWidget
+        return importedWidget;
       } else {
-        console.error('Widget type not found')
+        console.error("Widget type not found");
       }
       break;
   }
-  importedWidget.title = config?.title ?? ''
-  importedWidget.id = config?.id ?? importedWidget.id
-  return importedWidget
-}
+  importedWidget.title = config?.title ?? "";
+  importedWidget.id = config?.id ?? importedWidget.id;
 
+  if ("layout" in config) {
+    importedWidget.layout.x = config.layout.x;
+    importedWidget.layout.y = config.layout.y;
+    importedWidget.layout.h = config.layout.h;
+    importedWidget.layout.w = config.layout.w;
+  }
+  return importedWidget;
+};