@eodash/eodash 5.0.0-alpha.1.1 → 5.0.0-alpha.1.11

package/core/types.d.ts

@@ -1,333 +1,349 @@
-import { useSTAcStore } from "@/store/stac"
+import { useSTAcStore } from "./store/stac"
 import type { Router } from "vue-router";
 import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
-import { defineCompiletimeConfig } from "./composables/DefineConfig";
-
-declare global {
+import type { Ref } from "vue"
+import type { ThemeDefinition } from "vuetify/lib/index.mjs";
+import type { Map } from "openlayers";
+/**
+ * Web Component configuration
+ */
+export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
+  /** Web component definition file URL*/
+  link: T extends 'runtime' ? string : (string | (() => Promise<unknown>));
+  /** Exported Constructor, needs to be provided if the web component is not registered by the `link` provided */
+  constructorProp?: string
+  /** Custom tag name */
+  tagName: `${string}-${string}`
+  /** Object defining all the properties and attributes of the web component */
+  properties?: Record<string, any>
   /**
-   * Web Component configuration
+   * Function that is triggered when the web component is mounted in the DOM.
+   * @param el - web component
+   * @param store - return value of the core STAC pinia store in `/core/store/stac.ts`
    */
-  interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
-    /** Web component definition file URL*/
-    link: T extends 'runtime' ? string : (string | (() => Promise));
-    /** Exported Constructor, needs to be provided if the web component is not registered by the `link` provided */
-    constructorProp?: string
-    /** Custom tag name */
-    tagName: `${string}-${string}`
-    /** Object defining all the properties and attributes of the web component */
-    properties?: Record<string, any>
-    /**
-     * Function that is triggered when the web component is mounted in the DOM.
-     * @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)
-    /**
-     * Function that is 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)
-  }
+  onMounted?: (el: Element | null, store: ReturnType<typeof useSTAcStore>, router: Router) => (Promise<void> | void)
+  /**
+   * Function that is 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)
+}
 
 
-  /** @ignore */
-  interface WidgetsContainerProps {
-    widgets: Omit<WidgetConfig, 'layout'>[]
-  }
+/** @ignore */
+export interface WidgetsContainerProps {
+  widgets: Omit<Widget, 'layout'>[]
+}
 
-  // eodash config types:
+// eodash types:
+/**
+ * Widget type: `web-component` specification. The web component definition is imported using the `widget.link` property either from
+ * an external endpoint, or an installed node_module.
+ * Installed node_module web components import should be mapped in `/core/modulesMap.ts`,
+ * then setting `widget.link`:`(import-map-key)` and `node_module`:`true`
+ */
+export interface WebComponentWidget<T extends ExecutionTime = "compiletime"> {
+  /**
+ * Unique Identifier, triggers rerender when using `defineWidget`
+ **/
+  id: number | string | symbol
   /**
-   * Widget type: `web-component` specification. The web component definition is imported using the `widget.link` property either from
-   * an external endpoint, or an installed node_module.
-   * Installed node_module web components import should be mapped in `/core/modulesMap.ts`,
-   * then setting `widget.link`:`(import-map-key)` and `node_module`:`true`
+   * Widget title
    */
-  interface WebComponentConfig<T extends ExecutionTime = "compiletime"> {
+  title: string
+  /**
+   * Widget position and size.
+   */
+  layout: {
     /**
-   * Unique Identifier, triggers rerender when using `defineWidget`
-   **/
-    id: number | string | symbol
+     *  Horizontal start position. Integer (1 - 12)
+     */
+    x: number
     /**
-     * Widget title
+     *  Vertical start position. Integer (1 - 12)
      */
-    title: string
+    y: number
     /**
-     * Widget position and size.
+     *  Width. Integer (1 - 12)
      */
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
-    widget: WebComponentProps<T>
+    w: number
     /**
-     * Widget type
+     *  Height. Integer (1 - 12)
      */
-    type: 'web-component'
+    h: number
   }
+  widget: WebComponentProps<T>
+  /**
+   * Widget type
+   */
+  type: 'web-component'
+}
 
+/**
+ * Widget type: `internal` specification.
+ * Internal widgets are Vue components inside the `/widgets` directory.
+ */
+export interface InternalComponentWidget {
+  /**
+  * Unique Identifier, triggers rerender when using `defineWidget`
+  **/
+  id: number | string | symbol
   /**
-   * Widget type: `internal` specification.
-   * Internal widgets are Vue components inside the `/widgets` directory.
+   * Widget title
    */
-  interface InternalComponentConfig {
+  title: string
+  /**
+  * Widget position and size.
+  */
+  layout: {
     /**
-    * Unique Identifier, triggers rerender when using `defineWidget`
-    **/
-    id: number | string | symbol
+     *  Horizontal start position. Integer (1 - 12)
+     */
+    x: number
     /**
-     * Widget title
+     *  Vertical start position. Integer (1 - 12)
      */
-    title: string
+    y: number
     /**
-    * Widget position and size.
-    */
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
-    widget: {
-      /**
-       * Internal Vue Component file name without the extention .vue
-       */
-      name: string;
-      /**
-       * Specified Vue component props
-       */
-      props?: Record<string, unknown>
-    }
+     *  Width. Integer (1 - 12)
+     */
+    w: number
     /**
-    * Widget type.
-    */
-    type: 'internal'
+     *  Height. Integer (1 - 12)
+     */
+    h: number
   }
+  widget: {
+    /**
+     * Internal Vue Component file name without the extention .vue
+     */
+    name: string;
+    /**
+     * Specified Vue component props
+     */
+    props?: Record<string, unknown>
+  }
+  /**
+  * Widget type.
+  */
+  type: 'internal'
+}
 
+/**
+ * Widget type: `iframe` specification.
+ * Renders an external HTML file as a widget.
+ */
+export interface IFrameWidget {
   /**
-   * Widget type: `iframe` specification.
-   * Renders an external HTML file as a widget.
-   */
-  interface IFrameConfig {
+   * Unique Identifier, triggers rerender when using `defineWidget`
+   **/
+  id: number | string | symbol
+  /**
+  * Widget title
+  */
+  title: string
+  /**
+  * Widget position and size.
+  */
+  layout: {
     /**
-     * Unique Identifier, triggers rerender when using `defineWidget`
-     **/
-    id: number | string | symbol
+     *  Horizontal start position. Integer (1 - 12)
+     */
+    x: number
     /**
-    * Widget title
-    */
-    title: string
+     *  Vertical start position. Integer (1 - 12)
+     */
+    y: number
     /**
-    * Widget position and size.
-    */
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
-    widget: {
-      /**
-       * The URL of the page to embed
-       */
-      src: string
-    }
+     *  Width. Integer (1 - 12)
+     */
+    w: number
     /**
-    * Widget type
-    */
-    type: 'iframe'
+     *  Height. Integer (1 - 12)
+     */
+    h: number
   }
-  interface FunctionalWidget<T extends ExecutionTime = "compiletime"> {
+  widget: {
     /**
-     * Provides a functional definition of the widget,
-     * gets triggered whenever a stac object is selected.
-     * @param selectedSTAC - currently selected stac object
+     * The URL of the page to embed
      */
-    defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
-    layout: {
-      /**
-       *  Horizontal start position. Integer (1 - 12)
-       */
-      x: number
-      /**
-       *  Vertical start position. Integer (1 - 12)
-       */
-      y: number
-      /**
-       *  Width. Integer (1 - 12)
-       */
-      w: number
-      /**
-       *  Height. Integer (1 - 12)
-       */
-      h: number
-    }
+    src: string
   }
-  type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentConfig<T> | InternalComponentConfig | IFrameConfig
-  type WidgetConfig<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
-
-
-  type BackgroundWidgetConfig<T extends ExecutionTime = "compiletime"> = Omit<WebComponentConfig<T>, 'layout' | 'title'> | Omit<InternalComponentConfig, 'layout' | 'title'> | Omit<IFrameConfig, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
   /**
-   * Dashboard rendered widgets configuration specification.
-   * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
-   * A specific configuration should be provided based on the type of the widget.
+  * Widget type
+  */
+  type: 'iframe'
+}
+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
    */
-  interface TemplateConfig<T extends ExecutionTime = "compiletime"> {
+  defineWidget: (selectedSTAC: StacCatalog | StacCollection | StacItem | null) => Omit<StaticWidget<T>, 'layout'>
+  layout: {
     /**
-     * Gap between widgets
+     *  Horizontal start position. Integer (1 - 12)
      */
-    gap?: number;
+    x: number
     /**
-     * Widget rendered as the dashboard background.
-     * Has the same specifications of [WidgetConfig](../readme#widgetconfig) without the `title` and  `layout` properties
+     *  Vertical start position. Integer (1 - 12)
      */
-    background?: BackgroundWidgetConfig<T>
+    y: number
     /**
-     * Array of widgets that will be rendered as dashboard panels.
+     *  Width. Integer (1 - 12)
      */
-    widgets: WidgetConfig<T>[]
+    w: number
+    /**
+     *  Height. Integer (1 - 12)
+     */
+    h: number
   }
+}
+export type StaticWidget<T extends ExecutionTime = "compiletime"> = WebComponentWidget<T> | InternalComponentWidget | IFrameWidget
+export type Widget<T extends ExecutionTime = "compiletime"> = StaticWidget<T> | FunctionalWidget<T>
+
+
+export type BackgroundWidget<T extends ExecutionTime = "compiletime"> = Omit<WebComponentWidget<T>, 'layout' | 'title'> | Omit<InternalComponentWidget, 'layout' | 'title'> | Omit<IFrameWidget, 'layout' | 'title'> | Omit<FunctionalWidget, 'layout'>
+/**
+ * Dashboard rendered widgets  specification.
+ * 3 types of widgets are supported: `"iframe"`, `"internal"`, and `"web-component"`.
+ * A specific object should be provided based on the type of the widget.
+ */
+export interface Template<T extends ExecutionTime = "compiletime"> {
+  /**
+   * Gap between widgets
+   */
+  gap?: number;
+  /**
+   * Widget rendered as the dashboard background.
+   * Has the same specifications of [Widget](../readme#widget) without the `title` and  `layout` properties
+   */
+  background?: BackgroundWidget<T>
+  /**
+   * Array of widgets that will be rendered as dashboard panels.
+   */
+  widgets: Widget<T>[]
+}
 
-  type ExternalURL = `${'https://' | 'http://'}${string}`;
-  type InternalRoute = `/${string}`
-  type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
+export type ExternalURL = `${'https://' | 'http://'}${string}`;
+export type InternalRoute = `/${string}`
+export type StacEndpoint = `${'https://' | 'http://'}${string}/catalog.json`
 
-  type ExecutionTime = "runtime" | "compiletime";
+export type ExecutionTime = "runtime" | "compiletime";
 
+/**
+ * Eodash instance specification.
+ */
+export interface Eodash<T extends ExecutionTime = "compiletime"> {
   /**
-   * Eodash configuration specification.
+   * Instance ID.
    */
-  interface EodashConfig<T extends ExecutionTime = "compiletime"> {
-    /**
-     * Configuration ID that defines the route of the dashboard.
-     * Rendered dashboard can be accessed on route `/dashboard/config-id`
-     */
-    id: string;
+  id: string;
+  /**
+   * Root STAC catalog endpoint
+   **/
+  stacEndpoint: StacEndpoint
+  /**
+  * Renderes to navigation buttons on the app header.
+  **/
+  routes?: Array<{
     /**
-     * Root STAC catalog endpoint
+     * button title
      **/
-    stacEndpoint: StacEndpoint
+    title: string,
     /**
-    * Renderes to navigation buttons on the app header.
-    **/
-    routes?: Array<{
-      /**
-       * button title
-       **/
-      title: string,
-      /**
-       * external URL or inner path to navigate to.
-       **/
-      to: ExternalURL | InternalRoute
-    }>
+     * external URL or inner path to navigate to.
+     **/
+    to: ExternalURL | InternalRoute
+  }>
+  /**
+   * Brand specifications.
+   */
+  brand: {
     /**
-     * Brand specifications.
+     * Automatically fetches the specified font family from google fonts. if the `link` property is specified
+     * the font family will be fetched from the provided source instead.
      */
-    brand: {
-      /**
-       * Automatically fetches the specified font family from google fonts. if the `link` property is specified
-       * the font family will be fetched from the provided source instead.
-       */
-      font?: {
-        /**
-         * Link to stylesheet that defines font-face.
-         */
-        link?: string;
-        /**
-         * Font family. Use FVD notation to include families https://github.com/typekit/fvd
-         */
-        family: string
-      }
-      /**
-       *  Title that will be shown in the app header
-       */
-      name: string;
+    font?: {
       /**
-       * Alias that will be shown in the app footer if specified.
+       * Link to stylesheet that defines font-face.
        */
-      shortName?: string
+      link?: string;
       /**
-       * brand logo
+       * Font family. Use FVD notation to include families https://github.com/typekit/fvd
        */
-      logo?: string;
-      /**
-       * Dashboard theme as a custom vuetifyJs theme.
-       */
-      theme?: ThemeDefinition
+      family: string
     }
     /**
-     * Rendered widgets configuration
+     *  Title that will be shown in the app header
      */
-    template: TemplateConfig<T>
+    name: string;
+    /**
+     * Alias that will be shown in the app footer if specified.
+     */
+    shortName?: string
+    /**
+     * brand logo
+     */
+    logo?: string;
+    /**
+     * Dashboard theme as a custom vuetifyJs theme.
+     */
+    theme?: ThemeDefinition
   }
-  /////////
+  /**
+   * Template configuration
+   */
+  template: Template<T>
+}
+/////////
 
-  /// eodash store types
-  interface EodashStore {
+/// eodash store types
+export interface EodashStore {
+  /**
+   * Stateful Reactive variables
+   */
+  states: {
     /**
-     * Stateful Reactive variables
+     * Currently selected STAC endpoint
      */
-    states: {
-      /**
-       * Currently selected STAC endpoint
-       */
-      currentUrl: Ref<string>
-      /**
-      * OpenLayers map instance
-      */
-      mapInstance: Ref<Map | null>
-    }
-    // consider removing the actions ?
-    actions: {
-      loadFont: (family?: string, link?: string) => Promise<string>;
-    };
+    currentUrl: Ref<string>
     /**
-     *  Pinia store definition used to navigate the root STAC catalog.
-     */
-    stac: {
-      useSTAcStore: typeof useSTAcStore
-    }
+    * OpenLayers map instance
+    */
+    mapInstance: Ref<Map | null>
+  }
+  // consider removing the actions ?
+  actions: {
+    loadFont: (family?: string, link?: string) => Promise<string>;
+  };
+  /**
+   *  Pinia store definition used to navigate the root STAC catalog.
+   */
+  stac: {
+    useSTAcStore: typeof useSTAcStore
   }
-  ///////
 }
-export type { EodashConfig, EodashStore }
-export declare const defineConfig: typeof defineCompiletimeConfig
+///////
+export interface EodashConfig {
+  dev?: {
+    port?: string | number
+    host?: string | boolean
+    open?: boolean
+  }
+  preview?: {
+    port?: string | number
+    host?: string | boolean
+    open?: boolean
+  }
+  base?: string;
+  outDir?: string;
+  publicDir?: string | false;
+  cacheDir?: string
+  entryPoint?: string
+  runtime?: string
+}
+
+export declare const createEodash: (configCallback: (store: EodashStore) => Eodash | Promise<Eodash>) => Eodash

package/core/views/Dashboard.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { useEodashRuntimeConfig } from "@/composables/DefineConfig";
+import { useEodashRuntime } from "@/composables/DefineEodash";
 import { useUpdateTheme } from "@/composables";
 import { useSTAcStore } from '@/store/stac';
 import { defineAsyncComponent } from "vue";
@@ -14,7 +14,7 @@ import { loadFont } from '@/store/Actions'
 import { onUnmounted } from "vue";
 
 
-const eodashConfig = await useEodashRuntimeConfig()
+const eodashConfig = await useEodashRuntime()
 
 const theme = useUpdateTheme('dashboardTheme', eodashConfig.brand?.theme)
 theme.global.name.value = 'dashboardTheme'
@@ -47,3 +47,4 @@ import.meta.hot?.on('reload', () => {
   font-family: v-bind('fontFamily');
 }
 </style>
+@/composables/DefineEodash

package/core/vite-env.d.ts

@@ -6,30 +6,12 @@ declare module '*.vue' {
   export default component
 }
 declare interface Window {
-  eodashStore: EodashStore
-}
-declare module '@eox/itemfilter' {
-  export const EOxItemFilter: CustomElementConstructor
+  eodashStore: import("@/types").EodashStore
 }
 declare module '@eox/stacinfo' {
   export const EOxStacInfo: CustomElementConstructor
 }
-declare module '@eox/map' {
-  export const EOxMap: CustomElementConstructor
-}
-declare module '@eox/chart' {
-  export const EOxChart: CustomElementConstructor
-}
-declare module '@eox/layercontrol' {
-  export const EOxLayerControl: CustomElementConstructor
-}
-declare module '@eox/timecontrol' {
-  export const EOxTimeControl: CustomElementConstructor
-}
-declare module '@eox/jsonform' {
-  export const EOxJSONForm: CustomElementConstructor
-}
 declare module 'user:config' {
-  const config: EodashConfig;
-  export default config
+  const eodash: import("@/types").Eodash | Promise<import("@/types").Eodash>;
+  export default eodash
 }