@eodash/eodash 5.0.0-alpha.2.1 → 5.0.0-alpha.2.11

package/core/SuspensedDashboard.ce.vue

@@ -1,65 +0,0 @@
-<template>
-  <v-app>
-    <Suspense>
-      <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
-      <template #fallback>
-        <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
-          <Loading />
-        </div>
-      </template>
-    </Suspense>
-  </v-app>
-</template>
-<script setup>
-import Dashboard from '@/views/Dashboard.vue';
-import { createApp, getCurrentInstance } from "vue"
-import { registerPlugins } from '@/plugins';
-import { eodashKey } from '@/utils/keys';
-import Loading from '@/components/Loading.vue';
-
-defineProps({
-  config: {
-    type: String,
-  }
-})
-const app = createApp({})
-registerPlugins(app)
-
-const inst = getCurrentInstance()
-//@ts-expect-error
-Object.assign(inst.appContext, app._context)
-//@ts-expect-error
-Object.assign(inst.provides, app._context.provides)
-
-function setStylesFromHead() {
-  const eodashComponent = document.querySelector('eo-dash')
-  const styleSheet = new CSSStyleSheet()
-  const head = document.querySelector('head')
-  let stylesStr = ''
-
-  Array.from(head?.children ?? []).forEach((child) => {
-    if (child.getAttribute('type') === 'text/css') {
-      stylesStr += `\n ${child.innerHTML}`
-      return
-    }
-
-    if (child.tagName == 'LINK' && child.getAttribute('rel')?.includes('stylesheet')) {
-      eodashComponent?.shadowRoot?.appendChild(child.cloneNode(true))
-    }
-  });
-
-  stylesStr += `\n * {
-    font-family:${
-      //@ts-expect-error
-      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
-  }
-${//@ts-expect-error
-  /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
-      `div.v-application__wrap {
-  min-height: fit-content;
-}`: ""}
-  `
-  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
-  eodashComponent?.shadowRoot?.adoptedStyleSheets.push(styleSheet)
-}
-</script>

package/core/asWebComponent.d.ts

@@ -1,18 +0,0 @@
-/** @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: import("./types").EodashStore

package/core/asWebComponent.js

@@ -1,12 +0,0 @@
-import SuspensedDashboard from './SuspensedDashboard.ce.vue';
-import { defineCustomElement } from 'vue'
-/** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash = defineCustomElement(SuspensedDashboard)
-
-export function register() {
-  customElements.define('eo-dash', Eodash)
-}
-
-export { default as store } from '@/store'
-
-register()

package/core/components/DashboardLayout.vue

@@ -1,44 +0,0 @@
-<template>
-  <v-main>
-    <eox-layout :gap="eodash.template.gap ?? 2">
-      <eox-layout-item style="z-index: 0;" x="0" y="0" h="12" w="12">
-        <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
-      </eox-layout-item>
-      <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx"
-        style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
-        :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
-
-        <v-btn v-if="slideBtns[idx].enabled" position="absolute" variant="tonal" :style="slideBtns[idx].style"
-          class="slide-btn" @click="slideInOut(idx)">
-          <v-icon :icon="slideBtns[idx].active ? slideBtns[idx].icon.in : slideBtns[idx].icon.out" />
-        </v-btn>
-        <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
-          v-bind="importedWidgets[idx].value.props" />
-
-      </eox-layout-item>
-    </eox-layout>
-  </v-main>
-</template>
-<script setup>
-import { eodashKey } from '@/utils/keys';
-import { inject } from 'vue';
-import { useDefineWidgets } from '@/composables/DefineWidgets'
-import { useSlidePanels } from '@/composables'
-import { ref } from 'vue';
-import '@eox/layout'
-
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
-
-const [bgWidget] = useDefineWidgets([eodash.template?.background])
-
-const widgetsConfig = eodash.template?.widgets
-
-const importedWidgets = useDefineWidgets(widgetsConfig)
-/**
- * Layout items template ref
- * @type {import('vue').Ref<HTMLElement[]>}
- */
-const itemEls = ref([])
-
-const { slideBtns, slideInOut } = useSlidePanels(itemEls, widgetsConfig)
-</script>

package/core/components/DynamicWebComponent.vue

@@ -1,68 +0,0 @@
-<template>
-  <span class="d-flex flex-column fill-height overflow-auto">
-    <component :is="tagName" v-bind="properties" ref="elementRef" />
-  </span>
-</template>
-
-<script async setup>
-import { useSTAcStore } from '@/store/stac';
-import {
-  onUnmounted as whenUnMounted,
-  onMounted as whenMounted
-} from 'vue';
-import { ref } from 'vue';
-
-const props =   /** @type {import("@/types").WebComponentProps}  */(defineProps({
-  link: {
-    type: [String, Function],
-    required: true
-  },
-  constructorProp: String,
-  tagName: {
-    type: String,
-    required: true
-  },
-  properties: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  },
-  onMounted: Function,
-  onUnmounted: Function
-}))
-
-
-const getWebComponent = async () => typeof props.link === 'string' ?
-  await import( /* @vite-ignore */props.link) : await props.link()
-
-const imported = !customElements.get(props.tagName) ? await getWebComponent().catch(e => {
-  console.error(e)
-}) : null
-
-const defined = customElements.get(props.tagName)
-
-// if the imported link doesn't define the custom tag provided
-if (!defined && props.constructorProp) {
-  const Constructor = imported[props.constructorProp]
-  customElements.define(props.tagName, Constructor)
-}
-
-const store = useSTAcStore()
-
-/**
- *  @typedef {HTMLElement &
- * Record<string|number|symbol,unknown>} CustomElement
- * @type {import('vue').Ref<CustomElement|null>}
- */
-const elementRef = ref(null)
-
-
-whenMounted(() => {
-  props.onMounted?.(elementRef.value, store)
-})
-
-whenUnMounted(() => {
-  props.onUnmounted?.(elementRef.value, store)
-})
-</script>

package/core/components/Header.vue

@@ -1,14 +0,0 @@
-<template>
-  <v-app-bar color="primary">
-    <v-app-bar-title>{{ title }}</v-app-bar-title>
-    <v-img class="mx-12" style="max-width: 140px;" :src="eodash.brand?.logo" />
-  </v-app-bar>
-</template>
-<script setup>
-import { eodashKey } from '@/utils/keys';
-import { inject } from 'vue';
-
-const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
-
-const title = eodash.brand?.name
-</script>

package/core/components/IframeWrapper.vue

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

package/core/components/Loading.vue

@@ -1,27 +0,0 @@
-<template>
-  <v-row class="d-flex justify-center align-center ">
-    <v-col class="flex-column justify-center align-center">
-      <Suspense>
-        <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>
-        </template>
-      </Suspense>
-    </v-col>
-  </v-row>
-</template>
-<script setup>
-import { inject } from 'vue';
-import { eodashKey } from '@/utils/keys';
-import { useDefineWidgets } from '@/composables/DefineWidgets';
-
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
-
-const [loading] = useDefineWidgets([eodash.template.loading])
-
-</script>

package/core/components/MobileLayout.vue

@@ -1,49 +0,0 @@
-<template>
-  <v-main class="overflow-hidden" style="height: 91dvh;">
-
-    <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props"></component>
-
-    <div v-show="activeIdx === idx" id="overlay" class="pa-2" v-for="(importedWidget, idx) in importedWidgets"
-      :key="idx" :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>
-      <component style="height: 94% !important;" :key="importedWidget.value.id" :is="importedWidget.value.component"
-        v-show="activeIdx === idx" v-bind="importedWidget.value.props" />
-    </div>
-
-    <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-tab v-for="(importedWidget, idx) in importedWidgets" :key="idx" :value="idx">
-        {{ importedWidget.value.title }}
-      </v-tab>
-    </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"
-
-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 { mainRect } = useLayout()
-
-const activeIdx = ref(-1)
-
-/** @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"
-})
-</script>

package/core/composables/DefineEodash.js

@@ -1,57 +0,0 @@
-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`
- * @async
- * @returns {Promise<import("@/types").Eodash>}
- * @param {string | undefined} runtimeConfig
- * @see {@linkplain '@/eodash.js'}
- */
-export const useEodashRuntime = async (runtimeConfig) => {
-  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]
-      })
-  }
-
-  if (runtimeConfig) {
-    assignInstance((await import( /* @vite-ignore */new URL(runtimeConfig, import.meta.url).href)).default);
-    return eodash
-  }
-
-  try {
-    assignInstance(
-      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
-    )
-  } catch {
-    try {
-      assignInstance(await import("user:config").then(async m => await m['default']))
-    } catch {
-      console.error('no dashboard configuration defined')
-    }
-  }
-  return eodash
-}
-
-/**
- * @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)
-  } else {
-    return config
-  }
-}

package/core/composables/DefineWidgets.js

@@ -1,129 +0,0 @@
-import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
-import { useSTAcStore } from '@/store/stac'
-import { storeToRefs } from 'pinia'
-import Loading from '@/components/Loading.vue';
-
-/**
- * @typedef {{
- *   component:import('vue').Component | null;
- *   props: Record<string, unknown>;
- *   title :string;
- *   id:string|number|symbol;
- * }} DefinedWidget
-*/
-
-/**
- * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
-*/
-
-const internalWidgets = (() => {
-  /**
-   * @type {Record<string,() => Promise<import('vue').Component>>}
-   */
-  const importMap = {
-    ...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)));
-    delete importMap[key];
-  }
-  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>}
- **/
-export const useDefineWidgets = (widgetConfigs) => {
-  /**
-   * @type {Array<ReactiveDefinedWidget>}
-   */
-  const definedWidgets = []
-
-  for (const config of (widgetConfigs ?? [])) {
-    /**
-     * @type {ReactiveDefinedWidget}
-     */
-    const definedWidget = shallowRef({
-      component: null,
-      props: {},
-      title: '',
-      id: Symbol(),
-    })
-
-    if ('defineWidget' in (config ?? {})) {
-      const { selectedStac } = storeToRefs(useSTAcStore())
-      watch(selectedStac, (updatedStac) => {
-        const definedConfig = reactive(/** @type {import("@/types").FunctionalWidget} */
-          (config)?.defineWidget(updatedStac))
-        definedWidget.value = definedWidget.value.id === definedConfig.id ?
-          definedWidget.value : getWidgetDefinition(definedConfig);
-      }, { immediate: true })
-    } else {
-      definedWidget.value = getWidgetDefinition(/** @type {import("@/types").StaticWidget} */(config))
-    }
-    definedWidgets.push(definedWidget)
-  }
-  return definedWidgets
-}
-
-
-/**
- * Converts a static widget configuration to a defined imported widget
- * @param {import("@/types").StaticWidget| Omit<import("@/types").StaticWidget, "layout">| undefined} config
- * @returns {DefinedWidget}
- **/
-const getWidgetDefinition = (config) => {
-  /**
-   * @type {DefinedWidget}
-   */
-  const importedWidget = {
-    component: null,
-    props: {},
-    title: '',
-    id: Symbol(),
-  }
-  switch (config?.type) {
-    case 'internal':
-      importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
-        suspensible: true,
-        loadingComponent: Loading
-      })
-      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
-
-      break;
-
-    case 'web-component':
-      importedWidget.component = defineAsyncComponent({
-        loader: () => import('@/components/DynamicWebComponent.vue'),
-        suspensible: true,
-        loadingComponent: Loading
-      })
-      importedWidget.props = reactive(config.widget)
-
-      break;
-    case 'iframe':
-      importedWidget.component = defineAsyncComponent({
-        loader: () => import('@/components/IframeWrapper.vue'),
-        suspensible: true,
-        loadingComponent: Loading
-      })
-      importedWidget.props = reactive(config.widget)
-      break;
-
-    default:
-      console.error('Widget type not found')
-      break;
-  }
-  importedWidget.title = config?.title ?? ''
-  importedWidget.id = config?.id ?? importedWidget.id
-  return importedWidget
-}
-