@eodash/eodash 5.0.0-alpha.1.13 → 5.0.0-alpha.1.15

package/core/eodash.js

@@ -1,9 +1,5 @@
 import { reactive } from "vue";
-import { currentUrl, mapInstance } from './store/States';
-/**
- * @type {Function | null}
- */
-let handleMoveEnd = null;
+import { currentUrl } from "./store/States";
 
 /**
  * Reactive Edoash Instance Object. provided globally in the app,
@@ -11,127 +7,95 @@ let handleMoveEnd = null;
  * @type {import("./types").Eodash}
  */
 const eodash = reactive({
-  id: 'demo',
-  stacEndpoint: 'https://eurodatacube.github.io/eodash-catalog/RACE/catalog.json',
+  id: "demo",
+  stacEndpoint: "https://esa-eodash.github.io/RACE-catalog/RACE/catalog.json",
   routes: [],
   brand: {
-    name: 'Demo',
+    name: "Demo",
     font: {
-      family: 'Poppins'
+      family: "Poppins",
     },
     theme: {
       colors: {
-        primary: '#004170',
-        secondary: '#00417044',
+        primary: "#004170",
+        secondary: "#00417044",
         surface: "#f0f0f0f0",
-      }
+      },
     },
-    meta: {}
+    meta: {},
+    footerText: "Demo configuration of eodash client",
   },
   template: {
-    background: {
+    loading: {
       id: Symbol(),
+      type: "web-component",
       widget: {
-        link: 'https://cdn.skypack.dev/@eox/map',
+        //https://uiball.com/ldrs/
+        link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+        tagName: "l-mirage",
         properties: {
-          class: "fill-height fill-width overflow-none",
-          center: [15, 48],
-          layers: [{ type: "Tile", source: { type: "OSM" } }],
-        },
-        tagName: 'eox-map',
-        onMounted(el, _, router) {
-           /** @type {any} */(el).zoom = router.currentRoute.value.query['z'];
-
-          mapInstance.value =  /** @type {any} */(el).map;
-
-          mapInstance.value?.on('moveend', handleMoveEnd =
-          /** @param {any} evt  */(evt) => {
-              router.push({
-                query: {
-                  z: `${evt.map.getView().getZoom()}`
-                }
-              });
-            });
-        },
-        onUnmounted(_el, _store, _router) {
-          //@ts-expect-error
-          mapInstance.value?.un('moveend', handleMoveEnd);
+          class: "align-self-center justify-self-center",
+          size: "120",
+          speed: "2.5",
+          color: "#004170"
         }
+      }
+    },
+    background: {
+      id: Symbol(),
+      type: "internal",
+      widget: {
+        name: "EodashMap",
       },
-      type: 'web-component'
     },
     widgets: [
       {
         id: Symbol(),
-        title: 'Tools',
-        layout: { "x": 0, "y": 0, "w": 3, "h": 12 },
+        type: "internal",
+        title: "itemfilter",
+        layout: { x: 0, y: 0, w: 3, h: 12 },
+        slidable: false,
         widget: {
-          link: 'https://cdn.skypack.dev/@eox/itemfilter',
+          name: "EodashItemFilter",
+        },
+      },
+      {
+        id: Symbol(),
+        type: "internal",
+        title: "datepicker",
+        layout: { x: 5, y: 11, w: 2, h: 1 },
+        slidable: false,
+        widget: {
+          name: "EodashDatePicker",
           properties: {
-            config: {
-              titleProperty: "title",
-              filterProperties: [
-                {
-                  keys: ["title", "themes"],
-                  title: "Search",
-                  type: "text",
-                  expanded: true,
-                },
-                {
-                  key: "themes",
-                  title: "Theme",
-                  type: "multiselect",
-                  featured: true
-                },
-              ],
-              aggregateResults: "themes",
-              enableHighlighting: true,
-            }
-          },
-          onMounted: async function (el, store, _) {
-            /**
-            * @typedef {object} Item
-            * @property {string} href
-            * */
-
-            /** @type {any} */(el).apply(store?.stac);
-            /** @type {any} */(el).config.onSelect =
-              /**
-               * @param {Item} item
-               * */
-              async (item) => {
-                console.log(item);
-                await store.loadSelectedSTAC(item.href);
-              };
+            inline: true,
           },
-          tagName: 'eox-itemfilter'
         },
-        type: 'web-component'
       },
       {
         id: Symbol(),
-        title: 'Information',
-        layout: { "x": 9, "y": 0, "w": 3, "h": 12 },
+        title: "Information",
+        layout: { x: 9, y: 0, w: 3, h: 12 },
         widget: {
-          link: async () => await import('@eox/stacinfo'),
+          link: async () => await import("@eox/stacinfo"),
           properties: {
             for: currentUrl,
             allowHtml: "true",
-            styleOverride: "#properties li > .value {font-weight: normal !important;}",
+            styleOverride:
+              "#properties li > .value {font-weight: normal !important;}",
             header: "[]",
 
             subheader: "[]",
             properties: '["description"]',
             featured: "[]",
-            footer: "[]"
+            footer: "[]",
           },
-          tagName: 'eox-stacinfo'
+          tagName: "eox-stacinfo",
         },
-        type: 'web-component'
+        type: "web-component",
       },
-    ]
-  }
+    ],
+  },
 });
 
-
 export default eodash;

package/core/main.js

@@ -1,4 +1,2 @@
-// Plugins
 export { createEodash } from '@/composables/DefineEodash';
-
-
+export { default as store } from "@/store"

package/core/store/Actions.js

@@ -1,28 +0,0 @@
-/**
- * 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/store/States.js

@@ -10,3 +10,13 @@ export const currentUrl = ref('');
  * @type {import("vue").Ref<import('openlayers').Map | null>}
  */
 export const mapInstance = ref(null);
+
+/**
+ * currently selected datetime
+ */
+export const datetime = ref(new Date().toISOString());
+
+/**
+ * Currently selected indicator
+ */
+export const indicator = ref("")

package/core/store/stac.js

@@ -3,6 +3,7 @@ import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
 import { eodashKey } from '@/store/Keys';
+import { indicator } from '@/store/States';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -14,7 +15,7 @@ export const useSTAcStore = defineStore('stac', () => {
   /**
    * selected STAC object.
    * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   * import('stac-ts').StacCollection |import('stac-ts').StacItem
+   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
    * | null>}
    */
   const selectedStac = ref(null);
@@ -54,6 +55,7 @@ export const useSTAcStore = defineStore('stac', () => {
 
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
+      indicator.value = selectedStac.value?.id ?? "";
     }).catch(err => console.error(err));
   }
 

package/core/types.d.ts

@@ -1,16 +1,9 @@
-import { useSTAcStore } from "./store/stac"
-import type { Router } from "vue-router";
-import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
-import type { Ref } from "vue"
-import type { ThemeDefinition } from "vuetify/lib/index.mjs";
-import type { Map } from "openlayers";
-
 /**
  * @group Eodash
  */
 export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
   /**
-   * Imports web component file, either using a URL or an import funtion.
+   * Imports web component file, either using a URL or an import function.
    * @example
    * importing `eox-itemfilter` web component, after installing `@eox/itemfilter` it can be
    * referenced:
@@ -36,19 +29,19 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
    * @param el - web component
    * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
    */
-  onMounted?: (el: Element | null, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
+  onMounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>, router: import("vue-router").Router) => (Promise<void> | void)
   /**
    * Triggered when the web component is unmounted from the DOM.
    * @param el - web component
    * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
    */
-  onUnmounted?: (el: Element | null, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
+  onUnmounted?: (el: Element | null, store: ReturnType<typeof import("./store/stac").useSTAcStore>, router: import("vue-router").Router) => (Promise<void> | void)
 }
 
 
 /** @ignore */
 export interface WidgetsContainerProps {
-  widgets: Omit<Widget, 'layout'>[]
+  widgets: Omit<Widget, 'layout' | 'slidable'>[]
 }
 
 // eodash types:
@@ -79,7 +72,11 @@ export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
      *  Height. Integer between 1 and 12
      */
     h: number
-  }
+  },
+  /**
+ * Enable/Disable widget sliding.
+ */
+  slidable?: boolean
   widget: WebComponentProps<T>
   type: 'web-component'
 }
@@ -113,16 +110,20 @@ export interface InternalComponentWidget {
      */
     h: number
   }
+  /**
+   * Enable/Disable widget sliding.
+   */
+  slidable?: boolean
   widget: {
     /**
-     * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder can be referenced
-     * using their name without the extention .vue
+     * Internal Vue Components inside the [widgets](https://github.com/eodash/eodash/tree/main/widgets) folder. Referenced
+     * using their name without the .vue extention
      */
     name: string;
     /**
      * Specified Vue component props
      */
-    props?: Record<string, unknown>
+    properties?: Record<string, unknown>
   }
   type: 'internal'
 }
@@ -158,6 +159,10 @@ export interface IFrameWidget {
      */
     h: number
   }
+  /**
+  * Enable/Disable widget sliding.
+  */
+  slidable?: boolean;
   widget: {
     /**
      * The URL of the page to embed
@@ -172,10 +177,12 @@ export interface IFrameWidget {
 export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
   /**
    * Provides a functional definition of the widget,
-   * gets triggered whenever a stac object is selected.
-   * @param selectedSTAC - currently selected stac object
+   * gets triggered whenever a STAC object is selected.
+   * @param selectedSTAC - Currently selected STAC object
    */
-  defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
+  defineWidget: (selectedSTAC: import("stac-ts").StacCatalog |
+    import("stac-ts").StacCollection | import("stac-ts").StacItem
+    | null) => Omit<StaticWidget<T>, 'layout' | 'slidable'>
   layout: {
     /**
      *  Horizontal start position. Integer between 1 and 12
@@ -194,6 +201,10 @@ export interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
      */
     h: number
   }
+  /**
+  * Enable/Disable widget sliding.
+  */
+  slidable?: boolean
 }
 /**
  * @group Eodash
@@ -208,7 +219,7 @@ export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> |
 /**
  * @group Eodash
  */
-export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title'> | Omit<InternalComponentWidget, 'layout' | 'title'> | Omit<IFrameWidget, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
+export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title' | 'slidable'> | Omit<InternalComponentWidget, 'layout' | 'title' | 'slidable'> | Omit<IFrameWidget, 'layout' | 'title' | 'slidable'> | Omit<FunctionalWidget<T>, 'layout' | 'slidable'>
 /**
  * Dashboard rendered widgets  specification.
  * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
@@ -220,9 +231,14 @@ export interface Template<T extends ExecutionTime = "compiletime"> {
    * Gap between widgets
    */
   gap?: number;
+  /**
+   * loading widget
+   */
+  loading?: BackgroundWidget<T>
   /**
    * Widget rendered as the dashboard background.
-   * Has the same specifications of [Widget](../readme#widget) without the `title` and  `layout` properties
+   * Has the same specifications of `Widget` without the `title` and  `layout` properties
+   * @see {@link Widget}
    */
   background?: BackgroundWidget<T>
   /**
@@ -238,6 +254,7 @@ export type InternalRoute = `/${string}`
 export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
 /**
+ * @ignore
  * @group Eodash
  */
 export type ExecutionTime = "runtime" | "compiletime";
@@ -256,7 +273,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
    **/
   stacEndpoint: StacEndpoint
   /**
-  * Renderes to navigation buttons on the app header.
+  * Renders navigation buttons on the app header.
   **/
   routes?: Array<{
     title: string,
@@ -272,7 +289,7 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
      */
     font?: {
       /**
-       * Link to stylesheet that defines font-face.
+       * Link to stylesheet that defines font-face. Could be either a relative or absolute URL.
        */
       link?: string;
       /**
@@ -285,19 +302,21 @@ export interface Eodash<T extends ExecutionTime = "compiletime"> {
      */
     name: string;
     /**
-     * Alias that will be shown in the app footer if specified.
+     * Brand logo
      */
-    shortName?: string
+    logo?: string;
     /**
-     * brand logo
+     * Dashboard theme as a custom [vuetifyJs theme](https://vuetifyjs.com/en/features/theme/).
      */
-    logo?: string;
+    theme?: import("vuetify/lib/index.mjs").ThemeDefinition
     /**
-     * Dashboard theme as a custom vuetifyJs theme.
+     * meta tags configuration, using unhead's [useSeoMeta](https://unhead.unjs.io/usage/composables/use-seo-meta)
      */
-    theme?: ThemeDefinition
-
-    meta?: import("@unhead/vue").UseSeoMetaInput
+    meta?: import("@unhead/vue").UseSeoMetaInput;
+    /**
+     * Text applied to the footer.
+     */
+    footerText?: string;
   }
   /**
    * Template configuration
@@ -318,25 +337,31 @@ export interface EodashStore {
     /**
      * Currently selected STAC endpoint
      */
-    currentUrl: Ref<string>
+    currentUrl: import("vue").Ref<string>
     /**
     * OpenLayers map instance
     */
-    mapInstance: Ref<Map | null>
+    mapInstance: import("vue").Ref<import("openlayers").Map | null>
+    /**
+    * currently selected datetime
+    */
+    datetime: import("vue").Ref<string>
+    /**
+     * Currently selected indicator
+     */
+    indicator: import("vue").Ref<string>
   }
-  actions: {
-    loadFont: (family?: string, link?: string) => Promise<string>;
-  };
+  actions: {};
   /**
    *  Pinia store definition used to navigate the root STAC catalog.
    */
   stac: {
-    useSTAcStore: typeof useSTAcStore
+    useSTAcStore: typeof import("./store/stac").useSTAcStore
   }
 }
 ///////
 /**
- * Eodash server, build and setup configuration
+ * Extending [Vite's](https://vitejs.dev/) config to configure eodash's server, build and setup.
  * @group EodashConfig
  */
 export interface EodashConfig {
@@ -355,32 +380,35 @@ export interface EodashConfig {
     open?: boolean
   }
   /**
-   * base public path
+   * Base public path
    */
   base?: string;
   /**
-   * build target folder path
+   * Build target folder path
    */
   outDir?: string;
-  /** path to statically served assets folder, can be set to `false`
-   *  to disable serving assets statically
+  /**
+   * Path to statically served assets folder, can be set to `false`
+   * to disable serving assets statically
    **/
   publicDir?: string | false;
   /**
-   * cache folder
+   * Cache folder
    */
   cacheDir?: string
-  /** specifies main entry file, exporting `createEodash`*/
+  /** Specifies main entry file, exporting `createEodash`*/
   entryPoint?: string
   /**
-   * file exporting eodash client runtime config
+   * File exporting eodash client runtime config
    */
   runtime?: string
+  widgets?: string
 }
 /**
- * project entry point should export this function as a default
+ * the project's entry point should export this function as a default
  * to instantiate eodash
  *
  * @param  configCallback
  */
-export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Eodash
+export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Promise<Eodash>
+export declare const store: EodashStore