@eodash/eodash 5.0.0-alpha.1.8 → 5.0.0-alpha.2

package/core/utils/index.js

@@ -0,0 +1,28 @@
+/**
+ * loads font in the app using `webfontloader`
+ * @param {string} [family="Roboto"]
+ * @param {string} [link]
+ * @returns {Promise<string>} - font family name
+ * @see {@link "https://github.com/typekit/webfontloader "}
+ */
+export const loadFont = async (family = "Roboto", link) => {
+  const WebFontLoader = (await import('webfontloader')).default;
+  if (link) {
+    WebFontLoader.load({
+      custom: {
+        // Use FVD notation to include families https://github.com/typekit/fvd
+        families: [family],
+        // Path to stylesheet that defines font-face
+        urls: [link],
+      },
+    });
+  }
+  else {
+    WebFontLoader.load({
+      google: {
+        families: [family]
+      }
+    });
+  }
+  return family;
+};

package/core/utils/keys.js

@@ -0,0 +1,6 @@
+/**
+ *  `eodash` injection key.
+ * @type {Symbol}
+ * @see {@link "@/plugins/index.js"}
+ */
+export const eodashKey = Symbol("eodash");

package/core/views/Dashboard.vue

@@ -1,28 +1,47 @@
 <template>
-  <HeaderComponent />
-  <TemplateComponent :style="`height: calc(100dvh - ${mainRect['top'] + mainRect['bottom']}px)`" />
-  <FooterComponent />
+  <HeaderComponent v-if="!eodash.brand.noLayout" />
+  <Suspense>
+    <TemplateComponent @vue:mounted="onTemplateMount?.()"
+      :style="`height: ${eodash.brand.noLayout ? '90dvh' : 'calc(100dvh - ' + mainRect['top'] + mainRect['bottom'] + 'px)'}`" />
+    <template #fallback>
+      <div v-if="onTemplateMount" style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
+        <Loading />
+      </div>
+    </template>
+  </Suspense>
+  <FooterComponent v-if="!eodash.brand.noLayout" />
 </template>
 
 <script setup>
-import { useEodashRuntimeConfig } from "@/composables/DefineConfig";
-import { useUpdateTheme } from "@/composables";
+import { useEodashRuntime } from "@/composables/DefineEodash";
+import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, onMounted } from "vue";
 import { useDisplay, useLayout } from "vuetify/lib/framework.mjs";
-import { loadFont } from '@/store/Actions'
-import { onUnmounted } from "vue";
+import { loadFont } from '@/utils'
+import Loading from "@/components/Loading.vue";
+
+const props = defineProps({
+  config: {
+    type: String
+  },
+  onTemplateMount: {
+    type: Function
+  }
+})
 
+const eodash = await useEodashRuntime(props.config)
 
-const eodashConfig = await useEodashRuntimeConfig()
+useURLSearchParametersSync();
 
-const theme = useUpdateTheme('dashboardTheme', eodashConfig.brand?.theme)
+const theme = useUpdateTheme('dashboardTheme', eodash.brand?.theme)
 theme.global.name.value = 'dashboardTheme'
 
-const fontFamily = await loadFont(eodashConfig.brand?.font?.family, eodashConfig.brand?.font?.link)
+await loadFont(eodash.brand?.font?.family, eodash.brand?.font?.link)
 
 const { loadSTAC } = useSTAcStore()
 await loadSTAC()
+
 const { smAndDown } = useDisplay()
 const TemplateComponent = smAndDown.value ?
   defineAsyncComponent(() => import(`@/components/MobileLayout.vue`)) :
@@ -32,18 +51,9 @@ const HeaderComponent = defineAsyncComponent(() => import(`@/components/Header.v
 const FooterComponent = defineAsyncComponent(() => import(`@/components/Footer.vue`))
 const { mainRect } = useLayout()
 
-onUnmounted(() => {
-  theme.global.name.value = 'light'
-})
-
-import.meta.hot?.on('reload', () => {
-  window.location.reload()
+onMounted(() => {
+  const htmlTag = /** @type {HTMLElement}  */(document.querySelector('html'))
+  htmlTag.style.overflow = 'hidden';
 })
 
 </script>
-
-<style scoped lang="scss">
-* {
-  font-family: v-bind('fontFamily');
-}
-</style>

package/core/vite-env.d.ts

@@ -11,7 +11,21 @@ declare interface Window {
 declare module '@eox/stacinfo' {
   export const EOxStacInfo: CustomElementConstructor
 }
+declare module '@eox/map' {
+  export const EOxMap: CustomElementConstructor
+}
+declare module '@eox/itemfilter' {
+  export const EOxItemFilter: CustomElementConstructor
+}
 declare module 'user:config' {
-  const config: import("@/types").EodashConfig | Promise<import("@/types").EodashConfig>;
-  export default config
+  const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
+  export default eodash
+}
+declare module "stac-js" {
+  const STAC: any, Collection: any, Item: any
+  export { STAC, Collection, Item }
+}
+declare module "stac-js/src/http.js" {
+  const toAbsolute: any
+  export { toAbsolute }
 }

package/dist/DashboardLayout-YLfAa8wH.js

@@ -0,0 +1,168 @@
+import { y as k, z as v, A as m, r as C, R as A, S as L, D as o, E as n, G as l, T as y, J as e, U as b, a as c, H as f, m as _, K as w, F as V, L as E, N as $, V as B } from "./asWebComponent-BKe6Spni.js";
+import { V as S, b as z } from "./VBtn-CFPhsIX8.js";
+import { V as H } from "./VMain-deI9jyIf.js";
+class M extends HTMLElement {
+  static get observedAttributes() {
+    return ["gap"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+    <style>
+      :host {
+        display: grid;
+        padding: ${this.getAttribute("gap") || 0}px;
+        height: 100%;
+        box-sizing: border-box;
+        gap: ${this.getAttribute("gap") || "0"}px;
+        grid-template-columns: repeat(12, 1fr);
+        grid-template-rows: repeat(12, 1fr);
+      }
+    </style>
+    <slot></slot>
+  `;
+  }
+  attributeChangedCallback(a, r, s) {
+    r !== s && (this[a] = s), this.render();
+  }
+}
+class T extends HTMLElement {
+  static get observedAttributes() {
+    return ["x", "y", "w", "h"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          background: lightgrey;
+          border: 1px solid darkgrey;
+          border-radius: 4px;
+          padding: 4px 8px;
+          overflow: hidden;
+
+
+          grid-column: ${parseInt(this.getAttribute("x")) + 1} / span ${this.getAttribute("w")};
+          grid-row: ${parseInt(this.getAttribute("y")) + 1} / span ${this.getAttribute("h")};
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+  attributeChangedCallback(a, r, s) {
+    r !== s && (this[a] = s), this.render();
+  }
+}
+customElements.define("eox-layout", M);
+customElements.define("eox-layout-item", T);
+const D = ["gap"], I = {
+  style: { "z-index": "0" },
+  x: "0",
+  y: "0",
+  h: "12",
+  w: "12"
+}, N = ["x", "y", "h", "w"], G = {
+  __name: "DashboardLayout",
+  setup(p) {
+    const a = (
+      /** @type {import("@/types").Eodash} */
+      k(v)
+    ), [r] = m([a.template?.background]), s = a.template?.widgets, u = m(s), h = C([]), { slideBtns: i, slideInOut: x } = A(h, s);
+    return (R, W) => {
+      const g = L("Loading");
+      return o(), n(H, null, {
+        default: l(() => [
+          y("eox-layout", {
+            gap: e(a).template.gap ?? 2
+          }, [
+            y("eox-layout-item", I, [
+              (o(), n(b, null, {
+                fallback: l(() => [
+                  c(g)
+                ]),
+                default: l(() => [
+                  (o(), n(
+                    f(e(r).component),
+                    _({ id: "bg-widget" }, e(r).props),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  ))
+                ]),
+                _: 1
+                /* STABLE */
+              }))
+            ]),
+            (o(!0), w(
+              V,
+              null,
+              E(e(s), (d, t) => (o(), w("eox-layout-item", {
+                ref_for: !0,
+                ref_key: "itemEls",
+                ref: h,
+                key: t,
+                style: { position: "relative", overflow: "visible", "z-index": "1", "border-radius": "0px", background: "rgb(var(--v-theme-surface))" },
+                x: d.layout.x,
+                y: d.layout.y,
+                h: d.layout.h,
+                w: d.layout.w
+              }, [
+                e(i)[t].enabled ? (o(), n(S, {
+                  key: 0,
+                  position: "absolute",
+                  variant: "tonal",
+                  style: $(e(i)[t].style),
+                  class: "slide-btn",
+                  onClick: (F) => e(x)(t)
+                }, {
+                  default: l(() => [
+                    c(z, {
+                      icon: e(i)[t].active ? e(i)[t].icon.in : e(i)[t].icon.out
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["style", "onClick"])) : B("v-if", !0),
+                (o(), n(
+                  b,
+                  null,
+                  {
+                    fallback: l(() => [
+                      c(g)
+                    ]),
+                    default: l(() => [
+                      (o(), n(
+                        f(e(u)[t].value.component),
+                        _({
+                          key: e(u)[t].value.id
+                        }, e(u)[t].value.props),
+                        null,
+                        16
+                        /* FULL_PROPS */
+                      ))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1024
+                  /* DYNAMIC_SLOTS */
+                ))
+              ], 8, N))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ], 8, D)
+        ]),
+        _: 1
+        /* STABLE */
+      });
+    };
+  }
+};
+export {
+  G as default
+};

package/dist/DynamicWebComponent-BDOQsEcj.js

@@ -0,0 +1,57 @@
+import { aN as i, aO as m, r as p, C as d, aP as f, D as c, K as g, E as y, m as _, H as k } from "./asWebComponent-BKe6Spni.js";
+const h = { class: "d-flex flex-column fill-height overflow-auto" }, x = {
+  __name: "DynamicWebComponent",
+  props: {
+    link: {
+      type: [String, Function],
+      required: !0
+    },
+    constructorProp: String,
+    tagName: {
+      type: String,
+      required: !0
+    },
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    onMounted: Function,
+    onUnmounted: Function
+  },
+  async setup(o) {
+    let t, s;
+    const e = (
+      /** @type {import("@/types").WebComponentProps}  */
+      o
+    ), u = async () => typeof e.link == "string" ? await import(
+      /* @vite-ignore */
+      e.link
+    ) : await e.link(), l = customElements.get(e.tagName) ? null : ([t, s] = i(() => u().catch((n) => {
+      console.error(n);
+    })), t = await t, s(), t);
+    if (!customElements.get(e.tagName) && e.constructorProp) {
+      const n = l[e.constructorProp];
+      customElements.define(e.tagName, n);
+    }
+    const a = m(), r = p(null);
+    return d(() => {
+      e.onMounted?.(r.value, a);
+    }), f(() => {
+      e.onUnmounted?.(r.value, a);
+    }), (n, N) => (c(), g("span", h, [
+      (c(), y(
+        k(o.tagName),
+        _(o.properties, {
+          ref_key: "elementRef",
+          ref: r
+        }),
+        null,
+        16
+        /* FULL_PROPS */
+      ))
+    ]));
+  }
+};
+export {
+  x as default
+};