@eodash/eodash 5.0.0-alpha.2.26 → 5.0.0-alpha.2.27

package/{dist/types/core/client/types.d.ts → core/client/types.ts}

@@ -170,7 +170,7 @@ export type BackgroundWidget<T extends ExecutionTime = "compiletime"> =
  *
  * @group Eodash
  */
-export interface Template<T extends ExecutionTime = "compiletime"> {
+export interface SingleTemplate<T extends ExecutionTime = "compiletime"> {
   /** Gap between widgets */
   gap?: number;
   /** Loading widget */
@@ -184,8 +184,13 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
   widgets: Widget<T>[];
 }
 
+export type MultiTemplates<T extends ExecutionTime = "compiletime"> = Record<
+  string,
+  SingleTemplate<T>
+>;
+
 /** @ignore */
-export type StacEndpoint = `${"https://" | "http://"}${string}/catalog.json`;
+export type StacEndpoint = `${string}/catalog.json`;
 
 /** @group Eodash */
 type ExecutionTime = "runtime" | "compiletime";
@@ -195,7 +200,7 @@ type ExecutionTime = "runtime" | "compiletime";
  *
  * @group Eodash
  */
-export interface Eodash<T extends ExecutionTime = "compiletime"> {
+export type Eodash<T extends ExecutionTime = "compiletime"> = {
   /** Instance ID. */
   id?: string;
   /** Root STAC catalog endpoint */
@@ -228,9 +233,16 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
     /** Text applied to the footer. */
     footerText?: string;
   };
-  /** Template configuration */
-  template: Template<T>;
-}
+} & (
+  | {
+      /** Template configuration */
+      template: SingleTemplate<T>;
+    }
+  | {
+      /** Multiple templates configuration */
+      templates: MultiTemplates<T>;
+    }
+);
 /////////
 
 /// eodash store types
@@ -264,7 +276,7 @@ export interface EodashStore {
       code?: number | string | { name: string; def: string },
     ) => Promise<void>;
 
-    /** Change `eox-map` projection from an `EPSG` code */
+    /** Change `eox-map` projection from an EPSG code or a registered projection code */
     changeMapProjection: (
       code?: number | string | { name: string; def: string },
     ) => Promise<void>;
@@ -276,4 +288,31 @@ export interface EodashStore {
   };
 }
 ///////
-export { createEodash, store } from "./main.js";
+
+/** @group WebComponent */
+type EodashConstructor = import("vue").VueElementConstructor<
+  import("vue").ExtractPropTypes<{ config: string }>
+>;
+/**
+ * Eodash Web Component constructor
+ *
+ * @group WebComponent
+ */
+export declare const Eodash: EodashConstructor;
+/**
+ * Registers `eo-dash` as Custom Element in the window
+ *
+ * @group WebComponent
+ */
+export declare function register(): void;
+
+/**
+ * Eodash store @see EodashStore
+ *
+ * @group WebComponent
+ */
+export declare const store: typeof import("@/store").default;
+
+/////
+
+export * from "./main.js";

package/core/client/utils/keys.js

@@ -4,3 +4,5 @@
  * @see {@link "@/plugins/index.js"}
  */
 export const eodashKey = Symbol("eodash");
+/** @type {import("@vueuse/core").EventBusKey<"layers:updated"|"time:updated">} */
+export const eoxLayersKey = Symbol("eoxMapLayers");

package/core/client/utils/states.js

@@ -1,9 +1,10 @@
-import { shallowReactive } from "vue";
+import { ref, shallowReactive } from "vue";
 
 /**
  * Array of eodash STAC Collections extracted from the current selected indicator.
  * Updated in {@link file://./../store/stac.js `loadSelectedSTAC`} widget
- * @type {import('./eodashSTAC').EodashCollection[]}
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
  * @private
  */
 export const eodashCollections = shallowReactive([]);
@@ -11,7 +12,11 @@ export const eodashCollections = shallowReactive([]);
 /**
  * Array of eodash STAC Collections extracted from the current selected COMPARE indicator.
  * Updated in {@link file://./../store/stac.js ` loadSelectedCompareSTAC`} widget
- * @type {import('./eodashSTAC').EodashCollection[]}
+ *
+ * @type {import('../eodashSTAC/EodashCollection').EodashCollection[]}
  * @private
  */
 export const eodashCompareCollections = shallowReactive([]);
+
+/** whether the map postion was set in URL params on first load */
+export const posIsSetFromUrl = ref(false);

package/core/client/views/Dashboard.vue

@@ -16,7 +16,7 @@
 import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useURLSearchParametersSync, useUpdateTheme } from "@/composables";
 import { useSTAcStore } from "@/store/stac";
-import { defineAsyncComponent, onErrorCaptured, ref } from "vue";
+import { computed, defineAsyncComponent, onErrorCaptured, ref } from "vue";
 import { useDisplay } from "vuetify/lib/framework.mjs";
 import { loadFont } from "@/utils";
 import Loading from "@/components/Loading.vue";
@@ -48,9 +48,11 @@ const { loadSTAC } = useSTAcStore();
 await loadSTAC();
 
 const { smAndDown } = useDisplay();
-const TemplateComponent = smAndDown.value
-  ? defineAsyncComponent(() => import(`@/components/MobileLayout.vue`))
-  : defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`));
+const TemplateComponent = computed(() =>
+  smAndDown.value
+    ? defineAsyncComponent(() => import(`@/components/MobileLayout.vue`))
+    : defineAsyncComponent(() => import(`@/components/DashboardLayout.vue`)),
+);
 
 const HeaderComponent = defineAsyncComponent(
   () => import(`@/components/Header.vue`),

package/core/client/vite-env.d.ts

@@ -6,24 +6,9 @@ declare module "*.vue" {
   export default component;
 }
 declare interface Window {
-  eodashStore: import("@/types").EodashStore;
+  eodashStore: typeof import("@/store").default;
   setEodashLoglevel: typeof import("loglevel").setLevel;
 }
-declare module "@eox/stacinfo" {
-  export const EOxStacInfo: CustomElementConstructor;
-}
-declare module "@eox/layercontrol" {
-  export const EOxLayerControl: CustomElementConstructor;
-}
-declare module "@eox/jsonform" {
-  export const EOxJSONForm: CustomElementConstructor;
-}
-declare module "@eox/map" {
-  export const EOxMap: CustomElementConstructor;
-}
-declare module "@eox/itemfilter" {
-  export const EOxItemFilter: CustomElementConstructor;
-}
 declare module "user:config" {
   const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
   export default eodash;

package/dist/client/{DashboardLayout-E_JzgCH5.js → DashboardLayout-232tRmjz.js}

@@ -1,29 +1,17 @@
-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-BsbKnhGV.js';
+import { openBlock, createBlock, withCtx, createElementVNode, unref, normalizeStyle, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
 import '@eox/layout';
-import { V as VMain } from './VMain-Hf5R6yWY.js';
+import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-BRGyP_j5.js';
+import { V as VMain } from './VMain-BUs3kDTd.js';
 
 const _hoisted_1 = ["gap"];
-const _hoisted_2 = {
-  key: 0,
-  class: "bg-panel bg-surface",
-  x: "0",
-  y: "0",
-  h: "12",
-  w: "12"
-};
-const _hoisted_3 = ["h", "w", "x", "y"];
+const _hoisted_2 = ["id", "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);
+const { bgWidget, importedWidgets, gap } = useDefineTemplate();
 
 return (_ctx, _cache) => {
                                                        
@@ -31,17 +19,26 @@ return (_ctx, _cache) => {
   return (openBlock(), createBlock(VMain, null, {
     default: withCtx(() => [
       createElementVNode("eox-layout", {
-        gap: unref(eodash).template.gap ?? 2
+        gap: unref(gap),
+        style: normalizeStyle(`padding: ${unref(gap)}px`)
       }, [
-        (unref(bgWidget).component)
-          ? (openBlock(), createElementBlock("eox-layout-item", _hoisted_2, [
+        (unref(bgWidget)?.component)
+          ? (openBlock(), createElementBlock("eox-layout-item", {
+              key: 0,
+              class: "bg-panel bg-surface",
+              style: normalizeStyle(`margin: -${unref(gap) + 1}px;`),
+              x: "0",
+              y: "0",
+              h: "12",
+              w: "12"
+            }, [
               (openBlock(), createBlock(Suspense, { suspensible: "" }, {
                 default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(unref(bgWidget).component), mergeProps({ id: "bg-widget" }, unref(bgWidget).props), null, 16 /* FULL_PROPS */))
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(bgWidget)?.component), mergeProps({ id: "bg-widget" }, unref(bgWidget)?.props), null, 16 /* FULL_PROPS */))
                 ]),
                 _: 1 /* STABLE */
               }))
-            ]))
+            ], 4 /* STYLE */))
           : createCommentVNode("v-if", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(importedWidgets), (importedWidget, idx) => {
           return (openBlock(), createBlock(Transition, {
@@ -51,6 +48,7 @@ return (_ctx, _cache) => {
             default: withCtx(() => [
               (importedWidget.value.component)
                 ? (openBlock(), createElementBlock("eox-layout-item", {
+                    id: importedWidget.value.id.toString(),
                     key: importedWidget.value.id,
                     class: "panel bg-surface",
                     h: importedWidget.value.layout.h,
@@ -67,13 +65,13 @@ return (_ctx, _cache) => {
                       ]),
                       _: 2 /* DYNAMIC */
                     }, 1024 /* DYNAMIC_SLOTS */))
-                  ], 8 /* PROPS */, _hoisted_3))
+                  ], 8 /* PROPS */, _hoisted_2))
                 : createCommentVNode("v-if", true)
             ]),
             _: 2 /* DYNAMIC */
           }, 1024 /* DYNAMIC_SLOTS */))
         }), 128 /* KEYED_FRAGMENT */))
-      ], 8 /* PROPS */, _hoisted_1)
+      ], 12 /* STYLE, PROPS */, _hoisted_1)
     ]),
     _: 1 /* STABLE */
   }))
@@ -81,6 +79,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-6b134f31"]]);
+const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-ebeeb1d1"]]);
 
 export { DashboardLayout as default };

package/dist/client/{DynamicWebComponent-C9pVUfT3.js → DynamicWebComponent-Cl4LqHU6.js}

@@ -1,5 +1,5 @@
 import { withAsyncContext, ref, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
-import { $ as useSTAcStore } from './asWebComponent-BsbKnhGV.js';
+import { $ as useSTAcStore } from './asWebComponent-BRGyP_j5.js';
 
 const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
 

package/dist/client/{EodashDatePicker-CjU8R2ia.js → EodashDatePicker-Pok6bZwU.js}

@@ -1,91 +1,9 @@
-import { computed, ref, mergeProps, createVNode, resolveComponent, render, h, useCssVars, customRef, reactive, watch, onMounted, openBlock, createElementBlock, Fragment, unref, createSlots, withCtx, createElementVNode, toHandlers, withDirectives, createBlock } from 'vue';
+import { resolveComponent, render, h, mergeProps, customRef, ref, reactive, toRef, watch, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, withDirectives, createBlock, createCommentVNode } from 'vue';
 import { DatePicker } from 'v-calendar';
-import { storeToRefs } from 'pinia';
-import { p as propsFactory, o as omit, g as genericComponent, j as useProxiedModel, Y as getUid, a as useRender, E as isObject, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as VRow, V as VBtn, y as VIcon } from './asWebComponent-BsbKnhGV.js';
+import { E as isObject, Y as consoleError, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as makePanelTransparent, V as VBtn, y as VIcon } from './asWebComponent-BRGyP_j5.js';
 import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
 import log from 'loglevel';
-import { m as makeVOverlayProps, V as VOverlay } from './VOverlay-ClFjEtlD.js';
-import { b as useScopeId, f as forwardRefs } from './forwardRefs-I2EA3z3_.js';
-
-const makeVTooltipProps = propsFactory({
-  id: String,
-  text: String,
-  ...omit(makeVOverlayProps({
-    closeOnBack: false,
-    location: 'end',
-    locationStrategy: 'connected',
-    eager: true,
-    minWidth: 0,
-    offset: 10,
-    openOnClick: false,
-    openOnHover: true,
-    origin: 'auto',
-    scrim: false,
-    scrollStrategy: 'reposition',
-    transition: false
-  }), ['absolute', 'persistent'])
-}, 'VTooltip');
-const VTooltip = genericComponent()({
-  name: 'VTooltip',
-  props: makeVTooltipProps(),
-  emits: {
-    'update:modelValue': value => true
-  },
-  setup(props, _ref) {
-    let {
-      slots
-    } = _ref;
-    const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      scopeId
-    } = useScopeId();
-    const uid = getUid();
-    const id = computed(() => props.id || `v-tooltip-${uid}`);
-    const overlay = ref();
-    const location = computed(() => {
-      return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
-    });
-    const origin = computed(() => {
-      return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
-    });
-    const transition = computed(() => {
-      if (props.transition) return props.transition;
-      return isActive.value ? 'scale-transition' : 'fade-transition';
-    });
-    const activatorProps = computed(() => mergeProps({
-      'aria-describedby': id.value
-    }, props.activatorProps));
-    useRender(() => {
-      const overlayProps = VOverlay.filterProps(props);
-      return createVNode(VOverlay, mergeProps({
-        "ref": overlay,
-        "class": ['v-tooltip', props.class],
-        "style": props.style,
-        "id": id.value
-      }, overlayProps, {
-        "modelValue": isActive.value,
-        "onUpdate:modelValue": $event => isActive.value = $event,
-        "transition": transition.value,
-        "absolute": true,
-        "location": location.value,
-        "origin": origin.value,
-        "persistent": true,
-        "role": "tooltip",
-        "activatorProps": activatorProps.value,
-        "_disableGlobalStack": true
-      }, scopeId), {
-        activator: slots.activator,
-        default: function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          return slots.default?.(...args) ?? props.text;
-        }
-      });
-    });
-    return forwardRefs({}, overlay);
-  }
-});
+import { V as VTooltip } from './VTooltip-CDu3bErh.js';
 
 // Utilities
 function useDirectiveComponent(component, props) {
@@ -124,7 +42,7 @@ function findComponentParent(vnode, root) {
   const walk = children => {
     for (const child of children) {
       if (!child) continue;
-      if (child === vnode) {
+      if (child === vnode || child.el && vnode.el && child.el === vnode.el) {
         return true;
       }
       stack.add(child);
@@ -144,7 +62,8 @@ function findComponentParent(vnode, root) {
     return false;
   };
   if (!walk([root.subTree])) {
-    throw new Error('Could not find original vnode');
+    consoleError('Could not find original vnode, component will not inherit provides');
+    return root;
   }
 
   // Return the first component parent
@@ -166,16 +85,12 @@ const Tooltip = useDirectiveComponent(VTooltip, binding => {
   };
 });
 
-const _hoisted_1 = {
+const _hoisted_1 = { class: "d-flex flex-row align-center justify-center pb-1" };
+const _hoisted_2 = {
   class: "flex rounded-lg border border-gray-300 dark:border-gray-600",
   style: {"margin":"2px"}
 };
-const _hoisted_2 = ["value"];
-const _hoisted_3 = {
-  class: "w-full px-4 pb-3",
-  style: {"font-size":"12px"}
-};
-const _hoisted_4 = ["innerHTML"];
+const _hoisted_3 = ["value"];
 
 // holds the number value of the datetime
 
@@ -186,13 +101,17 @@ const _sfc_main = {
     type: String,
     default: null,
   },
+  hideArrows: {
+    type: Boolean,
+    default: false,
+  },
+  hideInputField: {
+    type: Boolean,
+    default: false,
+  },
 },
   setup(__props) {
 
-useCssVars(_ctx => ({
-  "cd569fa8": (transform.value)
-}));
-
 const currentDate = customRef((track, trigger) => ({
   get() {
     track();
@@ -224,7 +143,10 @@ const masks = ref({
  */
 const attributes = reactive([]);
 
-const { selectedStac } = storeToRefs(useSTAcStore());
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+
+const selectedStac = toRef(useSTAcStore(), "selectedStac");
 
 watch(
   selectedStac,
@@ -303,88 +225,79 @@ function jumpDate(reverse) {
   }
 }
 
-// fixes calendar dispalcement on lib mode
-const transform = ref("");
-onMounted(() => {
-  transform.value = document.querySelector("eo-dash")
-    ? "translate3d(50px,-80px,0)"
-    : "translate3d(0px,-80px,0)";
-});
+makePanelTransparent(rootRef);
 
 return (_ctx, _cache) => {
                                                        
                                                      
-                                                     
                                                          
 
-  return (openBlock(), createElementBlock(Fragment, null, [
+  return (openBlock(), createElementBlock("div", {
+    ref_key: "rootRef",
+    ref: rootRef,
+    class: "datePicker"
+  }, [
     createVNode(unref(DatePicker), {
       modelValue: currentDate.value,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((currentDate).value = $event)),
+      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((currentDate).value = $event)),
       modelModifiers: { number: true },
+      attributes: attributes,
       masks: masks.value,
-      attributes: attributes
-    }, createSlots({
-      default: withCtx(({ inputValue, inputEvents }) => [
+      expanded: "",
+      class: "bg-surface overflow-auto",
+      style: {"background-color":"transparent","max-width":"100%"}
+    }, {
+      footer: withCtx(() => [
         createElementVNode("div", _hoisted_1, [
-          createElementVNode("input", mergeProps({ value: inputValue }, toHandlers(inputEvents, true), {
-            style: {"margin":"1px"},
-            class: "flex-grow px-1 py-1 bg-white dark:bg-gray-700"
-          }), null, 16 /* FULL_PROPS */, _hoisted_2)
-        ])
-      ]),
-      _: 2 /* DYNAMIC */
-    }, [
-      (__props.hintText)
-        ? {
-            name: "footer",
-            fn: withCtx(() => [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("span", { innerHTML: __props.hintText }, null, 8 /* PROPS */, _hoisted_4)
+          (!__props.hideArrows)
+            ? withDirectives((openBlock(), createBlock(VBtn, {
+                key: 0,
+                density: "compact",
+                variant: "text",
+                onClick: _cache[0] || (_cache[0] = $event => (jumpDate(true)))
+              }, {
+                default: withCtx(() => [
+                  createVNode(VIcon, {
+                    icon: [unref(mdiRayEndArrow)]
+                  }, null, 8 /* PROPS */, ["icon"])
+                ]),
+                _: 1 /* STABLE */
+              })), [
+                [Tooltip, 'Set date to oldest available dataset', "bottom"]
               ])
-            ]),
-            key: "0"
-          }
-        : undefined
-    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "masks", "attributes"]),
-    createVNode(VRow, {
-      align: "center",
-      justify: "center",
-      style: {"margin-top":"6px"}
-    }, {
-      default: withCtx(() => [
-        withDirectives((openBlock(), createBlock(VBtn, {
-          style: {"padding":"0px","margin-right":"4px"},
-          density: "compact",
-          onClick: _cache[1] || (_cache[1] = $event => (jumpDate(true)))
-        }, {
-          default: withCtx(() => [
-            createVNode(VIcon, {
-              icon: [unref(mdiRayEndArrow)]
-            }, null, 8 /* PROPS */, ["icon"])
-          ]),
-          _: 1 /* STABLE */
-        })), [
-          [Tooltip, 'Set date to oldest available dataset', "bottom"]
-        ]),
-        withDirectives((openBlock(), createBlock(VBtn, {
-          style: {"padding":"0px","margin-left":"4px"},
-          density: "compact",
-          onClick: _cache[2] || (_cache[2] = $event => (jumpDate(false)))
-        }, {
-          default: withCtx(() => [
-            createVNode(VIcon, {
-              icon: [unref(mdiRayStartArrow)]
-            }, null, 8 /* PROPS */, ["icon"])
+            : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2, [
+            (!__props.hideInputField)
+              ? (openBlock(), createElementBlock("input", {
+                  key: 0,
+                  value: new Date(currentDate.value).toLocaleDateString(),
+                  style: {"margin":"1px"},
+                  class: "flex-grow px-1 py-1 dark:bg-gray-700"
+                }, null, 8 /* PROPS */, _hoisted_3))
+              : createCommentVNode("v-if", true)
           ]),
-          _: 1 /* STABLE */
-        })), [
-          [Tooltip, 'Set date to latest available dataset', "bottom"]
+          (!__props.hideArrows)
+            ? withDirectives((openBlock(), createBlock(VBtn, {
+                key: 1,
+                density: "compact",
+                variant: "text",
+                onClick: _cache[1] || (_cache[1] = $event => (jumpDate(false)))
+              }, {
+                default: withCtx(() => [
+                  createVNode(VIcon, {
+                    icon: [unref(mdiRayStartArrow)]
+                  }, null, 8 /* PROPS */, ["icon"])
+                ]),
+                _: 1 /* STABLE */
+              })), [
+                [Tooltip, 'Set date to latest available dataset', "bottom"]
+              ])
+            : createCommentVNode("v-if", true)
         ])
       ]),
       _: 1 /* STABLE */
-    })
-  ], 64 /* STABLE_FRAGMENT */))
+    }, 8 /* PROPS */, ["modelValue", "attributes", "masks"])
+  ], 512 /* NEED_PATCH */))
 }
 }