@eodash/eodash 5.0.0-rc.2 → 5.0.0-rc.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/core/client/components/DashboardLayout.vue +3 -2
  2. package/core/client/components/DynamicWebComponent.vue +10 -3
  3. package/core/client/components/Header.vue +1 -1
  4. package/core/client/components/MobileLayout.vue +1 -0
  5. package/core/client/composables/DefineTemplate.js +13 -2
  6. package/core/client/composables/DefineWidgets.js +9 -4
  7. package/core/client/composables/EodashMap.js +1 -1
  8. package/core/client/composables/EodashProcess.js +1 -1
  9. package/core/client/eodash.js +14 -4
  10. package/core/client/eodashSTAC/EodashCollection.js +9 -5
  11. package/core/client/eodashSTAC/helpers.js +6 -3
  12. package/core/client/eodashSTAC/triggers.js +8 -4
  13. package/core/client/types.ts +18 -13
  14. package/core/client/utils/index.js +112 -32
  15. package/core/client/views/Dashboard.vue +23 -6
  16. package/dist/client/{DashboardLayout-VrJIbhe8.js → DashboardLayout-ByVMURpM.js} +6 -6
  17. package/dist/client/{DynamicWebComponent-BCwpocDX.js → DynamicWebComponent-BRQQ5AXV.js} +11 -4
  18. package/dist/client/{EodashDatePicker-Bp5ec3BC.js → EodashDatePicker-DyLo_JUC.js} +3 -3
  19. package/dist/client/{EodashItemFilter-Cx0t-qeW.js → EodashItemFilter-BR572AaH.js} +1 -1
  20. package/dist/client/{EodashLayerControl-DERx00In.js → EodashLayerControl-C_mi-Hoo.js} +1 -1
  21. package/dist/client/{EodashLayoutSwitcher-DTS7otlk.js → EodashLayoutSwitcher-D4ooLbys.js} +2 -2
  22. package/dist/client/{EodashMap-C-I6puhb.js → EodashMap-CGFv4e85.js} +2 -2
  23. package/dist/client/{EodashMapBtns-CWgtJiG4.js → EodashMapBtns-_M7SW7Is.js} +4 -4
  24. package/dist/client/{EodashProcess-DWrTIyHT.js → EodashProcess-ZQAMi9Pc.js} +2 -2
  25. package/dist/client/{EodashStacInfo-Dvsk97Mz.js → EodashStacInfo-CwOCcsGl.js} +1 -1
  26. package/dist/client/{EodashTools-CdnjgTTl.js → EodashTools-C_X0RPIp.js} +4 -4
  27. package/dist/client/{ExportState-S4lcehm3.js → ExportState-DNUSRJSJ.js} +4 -4
  28. package/dist/client/{Footer-DlIEbXp-.js → Footer-FUp1Te0L.js} +1 -1
  29. package/dist/client/{Header-CTiEXLi0.js → Header-BcHAtFqr.js} +5 -5
  30. package/dist/client/{MobileLayout-DRgyQYFz.js → MobileLayout-CUHZFLDY.js} +11 -11
  31. package/dist/client/{PopUp-CzqV8BFZ.js → PopUp-CEmhdNIj.js} +3 -3
  32. package/dist/client/{VImg-Bn8bCvVM.js → VImg-Cdaw92OV.js} +2 -2
  33. package/dist/client/{VMain-2GOqWb6m.js → VMain-B7G2T3Zv.js} +1 -1
  34. package/dist/client/{VOverlay-BetC0LGI.js → VOverlay-Mf1pOmgW.js} +3 -3
  35. package/dist/client/{VTooltip-BWg0dxx5.js → VTooltip-9810qjB2.js} +3 -3
  36. package/dist/client/{WidgetsContainer-Cv466WUW.js → WidgetsContainer-GUwXMh9d.js} +1 -1
  37. package/dist/client/{asWebComponent-CLUhauLl.js → asWebComponent--e4yqM3f.js} +180 -67
  38. package/dist/client/eo-dash.css +2 -2
  39. package/dist/client/eo-dash.js +1 -1
  40. package/dist/client/{forwardRefs-CxSsJulB.js → forwardRefs-B9UH8QZK.js} +1 -1
  41. package/dist/client/{index-BMj56LY3.js → index-D-lbt2my.js} +1 -1
  42. package/dist/client/{transition-DidoPMgC.js → transition-CTjQmgIS.js} +1 -1
  43. package/dist/types/core/client/eodashSTAC/helpers.d.ts +15 -6
  44. package/dist/types/core/client/types.d.ts +15 -11
  45. package/dist/types/core/client/utils/index.d.ts +1 -1
  46. package/dist/types/widgets/EodashStacInfo.vue.d.ts +2 -2
  47. package/dist/types/widgets/PopUp.vue.d.ts +2 -2
  48. package/package.json +2 -1
  49. package/widgets/EodashDatePicker.vue +18 -0
@@ -3,6 +3,7 @@
3
3
  <eox-layout :gap="gap" :style="`padding: ${gap}px`">
4
4
  <eox-layout-item
5
5
  v-if="bgWidget?.component"
6
+ :key="bgWidget.id"
6
7
  class="bg-panel bg-surface"
7
8
  :style="`margin: -${gap + 1}px;`"
8
9
  x="0"
@@ -10,7 +11,7 @@
10
11
  h="12"
11
12
  w="12"
12
13
  >
13
- <Suspense suspensible>
14
+ <Suspense>
14
15
  <component
15
16
  id="bg-widget"
16
17
  :is="bgWidget?.component"
@@ -30,7 +31,7 @@
30
31
  :x="importedWidget.value.layout.x"
31
32
  :y="importedWidget.value.layout.y"
32
33
  >
33
- <Suspense suspensible>
34
+ <Suspense>
34
35
  <component
35
36
  :key="importedWidget.value.id"
36
37
  :is="importedWidget.value.component"
@@ -34,7 +34,7 @@ const props = /** @type {import("@/types").WebComponentProps} */ (
34
34
  const getWebComponent = async () =>
35
35
  typeof props.link === "string"
36
36
  ? await import(/* @vite-ignore */ props.link)
37
- : await props.link();
37
+ : await props.link?.();
38
38
 
39
39
  const imported = !customElements.get(props.tagName)
40
40
  ? await getWebComponent().catch((e) => {
@@ -46,8 +46,15 @@ const defined = customElements.get(props.tagName);
46
46
 
47
47
  // if the imported link doesn't define the custom tag provided
48
48
  if (!defined && props.constructorProp) {
49
- const Constructor = imported[props.constructorProp];
50
- customElements.define(props.tagName, Constructor);
49
+ try {
50
+ const Constructor = imported[props.constructorProp];
51
+ customElements.define(props.tagName, Constructor);
52
+ } catch (e) {
53
+ console.error(
54
+ `[eodash] ${props.tagName} is not defined, please add a valid link or constructorProp`,
55
+ );
56
+ console.error(e);
57
+ }
51
58
  }
52
59
 
53
60
  const store = useSTAcStore();
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <v-app-bar color="primary">
3
- <v-app-bar-title>{{ title }}</v-app-bar-title>
3
+ <v-app-bar-title class="header">{{ title }}</v-app-bar-title>
4
4
  <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
5
5
  </v-app-bar>
6
6
  </template>
@@ -4,6 +4,7 @@
4
4
  <component
5
5
  id="bg-widget"
6
6
  v-if="bgWidget?.component"
7
+ :key="bgWidget.id"
7
8
  :is="bgWidget.component"
8
9
  v-bind="bgWidget.props"
9
10
  ></component>
@@ -47,11 +47,22 @@ const useTemplate = () => {
47
47
  }
48
48
 
49
49
  const templateConfig = eodash.templates[template];
50
- [definedTemplate.bgWidget] = useDefineWidgets([
50
+ const [importedBgWidget] = useDefineWidgets([
51
51
  templateConfig.background,
52
52
  ]);
53
+ if (importedBgWidget.value.id !== definedTemplate.bgWidget.value?.id) {
54
+ definedTemplate.bgWidget.value = importedBgWidget.value;
55
+ }
56
+
57
+ const [importedLoadingWidget] = useDefineWidgets([
58
+ templateConfig.loading,
59
+ ]);
53
60
 
54
- [definedTemplate.loading] = useDefineWidgets([templateConfig.loading]);
61
+ if (
62
+ importedLoadingWidget.value.id !== definedTemplate.loading.value?.id
63
+ ) {
64
+ definedTemplate.loading.value = importedLoadingWidget.value;
65
+ }
55
66
 
56
67
  definedTemplate.importedWidgets = useDefineWidgets(
57
68
  templateConfig.widgets,
@@ -111,11 +111,16 @@ const getWidgetDefinition = (config) => {
111
111
  switch (config?.type) {
112
112
  case "internal":
113
113
  importedWidget.component = defineAsyncComponent({
114
- loader:
115
- internalWidgets[
114
+ loader: () => {
115
+ const widgetName =
116
116
  /** @type {import("@/types").InternalComponentWidget} * */ (config)
117
- ?.widget.name
118
- ],
117
+ ?.widget.name;
118
+
119
+ return (
120
+ internalWidgets[widgetName]?.() ??
121
+ Promise.reject(`Widget ${widgetName} not found`)
122
+ );
123
+ },
119
124
  suspensible: true,
120
125
  });
121
126
  importedWidget.props = reactive(
@@ -106,7 +106,7 @@ const createLayersConfig = async (
106
106
  await EodashCollection.getIndicatorLayers(selectedIndicator);
107
107
  const geodbLayer = EodashCollection.getGeoDBLayer(eodashCols);
108
108
  if (geodbLayer) {
109
- dataLayers.layers.push(geodbLayer);
109
+ dataLayers.layers.unshift(geodbLayer);
110
110
  }
111
111
  const baseLayers = {
112
112
  type: "Group",
@@ -348,7 +348,7 @@ export async function processGeoTiff(links, jsonformValue, layerId, isPolling) {
348
348
  /** @type {Record<string,any>|undefined} */
349
349
  let style;
350
350
  if (flatStyleJSON) {
351
- const extracted = extractLayerConfig(flatStyleJSON);
351
+ const extracted = extractLayerConfig(layerId ?? "", flatStyleJSON);
352
352
  layerConfig = extracted.layerConfig;
353
353
  style = extracted.style;
354
354
  }
@@ -20,6 +20,16 @@ export const eodash = reactive({
20
20
  brand: {
21
21
  noLayout: true,
22
22
  name: "Demo",
23
+ font: {
24
+ headers: {
25
+ family: "Open Sans",
26
+ link: "https://eox.at/fonts/opensans/opensans.css",
27
+ },
28
+ body: {
29
+ family: "Sintony",
30
+ link: "https://eox.at/fonts/sintony/sintony.css",
31
+ },
32
+ },
23
33
  theme: {
24
34
  colors: {
25
35
  primary: "#002742",
@@ -64,7 +74,7 @@ export const eodash = reactive({
64
74
  },
65
75
  },
66
76
  background: {
67
- id: Symbol(),
77
+ id: "background-map",
68
78
  type: "internal",
69
79
  widget: {
70
80
  name: "EodashMap",
@@ -186,7 +196,7 @@ export const eodash = reactive({
186
196
  },
187
197
  },
188
198
  background: {
189
- id: Symbol(),
199
+ id: "background-map",
190
200
  type: "internal",
191
201
  widget: {
192
202
  name: "EodashMap",
@@ -252,7 +262,7 @@ export const eodash = reactive({
252
262
  ? {
253
263
  id: "Datepicker",
254
264
  type: "internal",
255
- layout: { x: 5, y: 8, w: 2, h: 4 },
265
+ layout: { x: 5, y: 11, w: 2, h: 1 },
256
266
  title: "Date",
257
267
  widget: {
258
268
  name: "EodashDatePicker",
@@ -315,7 +325,7 @@ export const eodash = reactive({
315
325
  },
316
326
  },
317
327
  background: {
318
- id: Symbol(),
328
+ id: "background-map",
319
329
  type: "internal",
320
330
  widget: {
321
331
  name: "EodashMap",
@@ -407,12 +407,16 @@ export class EodashCollection {
407
407
  continue;
408
408
  }
409
409
  const collectionFeatures = generateFeatures(
410
- collection.#collectionStac?.links,
410
+ JSON.parse(JSON.stringify(collection.#collectionStac?.links)),
411
+ {
412
+ collection_id: collection.#collectionStac?.id,
413
+ geoDBID: collection.#collectionStac?.geoDBID,
414
+ themes: collection.#collectionStac?.themes ?? [],
415
+ },
411
416
  ).features;
417
+
412
418
  if (collectionFeatures.length) {
413
- allFeatures.push(
414
- generateFeatures(collection.#collectionStac?.links).features,
415
- );
419
+ allFeatures.push(collectionFeatures);
416
420
  }
417
421
  }
418
422
  if (allFeatures.length) {
@@ -430,7 +434,7 @@ export class EodashCollection {
430
434
  type: "Vector",
431
435
  properties: {
432
436
  id: "geodb-collection",
433
- title: "GeoDB Collection",
437
+ title: "Observation Points",
434
438
  },
435
439
  source: {
436
440
  type: "Vector",
@@ -3,8 +3,11 @@ import axios from "@/plugins/axios";
3
3
  import log from "loglevel";
4
4
  import { getStyleVariablesState } from "./triggers.js";
5
5
 
6
- /** @param {import("stac-ts").StacLink[]} [links] */
7
- export function generateFeatures(links) {
6
+ /**
7
+ * @param {import("stac-ts").StacLink[]} [links]
8
+ * @param {Record<string,any>} [extraProperties]
9
+ **/
10
+ export function generateFeatures(links, extraProperties = {}) {
8
11
  /**
9
12
  * @type {import("geojson").Feature[]}
10
13
  */
@@ -20,7 +23,7 @@ export function generateFeatures(links) {
20
23
  type: "Point",
21
24
  coordinates: [lon, lat],
22
25
  },
23
- properties: { id: element.id },
26
+ properties: { ...element, ...extraProperties },
24
27
  });
25
28
  }
26
29
  });
@@ -75,10 +75,14 @@ export function getStyleVariablesState(collectionId, variables) {
75
75
  }
76
76
 
77
77
  const olLayer = mapElement.getLayerById(matchingLayer.properties?.id ?? "");
78
- const oldVariablesState = /** @type {import("ol/layer").WebGLTile} */ (
79
- olLayer
80
- //@ts-expect-error todo
81
- ).getStyle()?.variables;
78
+ const oldVariablesState =
79
+ /** @type {import("ol/layer").Vector} */ (
80
+ olLayer
81
+ //@ts-expect-error variables doesn't exist in non-flat style
82
+ ).getStyle?.()?.variables ??
83
+ //@ts-expect-error (styleVariables_ is a private property)
84
+ /** @type {import("ol/layer").WebGLTile} */ (olLayer).styleVariables_;
85
+
82
86
  if (!oldVariablesState) {
83
87
  return variables;
84
88
  }
@@ -14,7 +14,7 @@ export interface WebComponentProps<T extends ExecutionTime = "compiletime"> {
14
14
  * import maps are not available in runtime config
15
15
  * :::
16
16
  */
17
- link: T extends "runtime" ? string : string | (() => Promise<unknown>);
17
+ link?: T extends "runtime" ? string : string | (() => Promise<unknown>);
18
18
  /**
19
19
  * Exported Constructor, needs to be provided if the web component is not
20
20
  * registered in by the [link](#link) provided
@@ -194,7 +194,15 @@ export type StacEndpoint = `${string}/catalog.json`;
194
194
 
195
195
  /** @group Eodash */
196
196
  type ExecutionTime = "runtime" | "compiletime";
197
-
197
+ type EodashFont = {
198
+ /**
199
+ * Link to stylesheet that defines font-face. Could be either a relative
200
+ * or absolute URL.
201
+ */
202
+ link?: string;
203
+ /** Font family name. */
204
+ family: string;
205
+ };
198
206
  /**
199
207
  * Eodash instance API
200
208
  *
@@ -212,15 +220,12 @@ export type Eodash<T extends ExecutionTime = "compiletime"> = {
212
220
  /** Custom error message to alert the users if something crashes */
213
221
  errorMessage?: string;
214
222
  /** Fetches the specified font family from the specified `link` property. */
215
- font?: {
216
- /**
217
- * Link to stylesheet that defines font-face. Could be either a relative
218
- * or absolute URL.
219
- */
220
- link: string;
221
- /** Font family name. */
222
- family: string;
223
- };
223
+ font?:
224
+ | EodashFont
225
+ | {
226
+ body: EodashFont;
227
+ headers: EodashFont;
228
+ };
224
229
  /** Title that will be shown in the app header */
225
230
  name: string;
226
231
  /** Brand logo */
@@ -320,8 +325,8 @@ export declare const store: typeof import("@/store").default;
320
325
  export * from "./main.js";
321
326
 
322
327
  export type EodashStyleJson = import("ol/style/webgl.js").WebGLStyle & {
323
- variables?: Record<string, any>;
324
- legend?: Record<string, any>;
328
+ variables?: Record<string, string | number | boolean | null | undefined>;
329
+ legend?: import("@eox/layercontrol/src/components/layer-config.js").EOxLayerControlLayerConfig["layerConfig"]["legend"];
325
330
  jsonform?: Record<string, any>;
326
331
  tooltip?: { id: string; title?: string; appendix?: string }[];
327
332
  };
@@ -1,43 +1,123 @@
1
1
  import log from "loglevel";
2
2
  import { collectionsPalette } from "./states";
3
+ import WebFontLoader from "webfontloader";
4
+
3
5
  /**
4
6
  * Loads font in the app using `webfontloader`
5
7
  *
6
- * @param {string} [family]
7
- * @param {string} [link]
8
- * @param {boolean} [isWebComponent]
9
- * @returns {Promise<string>} - Font family name
8
+ * @param {import("@/types").Eodash["brand"]["font"]} fontConfig
9
+ * @param {boolean} isWebComponent
10
+ * @returns {Promise<string[]>} - Font family name
10
11
  * @see {@link "https://github.com/typekit/webfontloader"}
11
12
  */
12
- export const loadFont = async (
13
- family = "",
14
- link = "",
15
- isWebComponent = false,
16
- ) => {
17
- if (family && link) {
18
- const WebFontLoader = (await import("webfontloader")).default;
19
- WebFontLoader.load({
20
- classes: false,
21
- custom: {
22
- // Use FVD notation to include families https://github.com/typekit/fvd
23
- families: [family],
24
- // Path to stylesheet that defines font-face
25
- urls: [link],
26
- },
27
- fontactive(familyName, _fvd) {
28
- const stylesheet = new CSSStyleSheet();
29
- const styles = isWebComponent
30
- ? `eo-dash {font-family: ${familyName};}`
31
- : `* {font-family: ${familyName};}`;
32
- stylesheet.replaceSync(styles);
33
- document.adoptedStyleSheets.push(stylesheet);
34
- },
35
- fontinactive(familyName, _fvd) {
36
- throw new Error(`error loading font: ${familyName}`);
37
- },
38
- });
13
+ export const loadFont = async (fontConfig, isWebComponent) => {
14
+ if (!fontConfig) {
15
+ return [];
16
+ }
17
+
18
+ let headerFamily = "",
19
+ bodyFamily = "",
20
+ headerLink = "",
21
+ bodyLink = "";
22
+ if ("headers" in fontConfig) {
23
+ headerFamily = fontConfig?.headers?.family;
24
+ headerLink = fontConfig.headers.link ?? "";
25
+ bodyFamily = fontConfig?.body?.family;
26
+ bodyLink = fontConfig.body.link ?? "";
27
+ } else {
28
+ headerFamily = fontConfig.family;
29
+ headerLink = fontConfig.link ?? "";
30
+ bodyFamily = fontConfig?.family;
31
+ bodyLink = fontConfig.link ?? "";
32
+ }
33
+ const families =
34
+ headerFamily === bodyFamily ? [headerFamily] : [headerFamily, bodyFamily];
35
+ const urls = [];
36
+ if (bodyLink && headerLink) {
37
+ if (bodyLink !== headerLink) {
38
+ urls.push(bodyLink);
39
+ urls.push(headerLink);
40
+ } else {
41
+ urls.push(bodyLink);
42
+ }
39
43
  }
40
- return family;
44
+
45
+ WebFontLoader.load({
46
+ classes: false,
47
+ custom: {
48
+ // Use FVD notation to include families https://github.com/typekit/fvd
49
+ families,
50
+ // Path to stylesheet that defines font-face
51
+ urls,
52
+ },
53
+ fontactive(familyName, _fvd) {
54
+ const stylesheet = new CSSStyleSheet();
55
+
56
+ const bodyRule = `
57
+ ${isWebComponent ? "eo-dash" : `:root`} {
58
+ font-family: ${bodyFamily};
59
+ --vc-font-family: ${bodyFamily};
60
+ }
61
+ eox-layercontrol,
62
+ eox-map,
63
+ eox-jsonform,
64
+ eox-timecontrol,
65
+ eox-itemfilter,
66
+ eox-chart,
67
+ eox-stacinfo{
68
+ --eox-body-font-family: ${bodyFamily};
69
+ font-family: ${bodyFamily}
70
+ ;
71
+ }
72
+ *[class*="text-body"]{
73
+ font-family: ${bodyFamily}
74
+ }
75
+ `;
76
+
77
+ const headersRule = `
78
+ ${
79
+ isWebComponent
80
+ ? `
81
+ eo-dash h1,
82
+ eo-dash h2,
83
+ eo-dash h3,
84
+ eo-dash h4,
85
+ eo-dash h5,
86
+ eo-dash *[class*="header"]
87
+ `
88
+ : `
89
+ h1,
90
+ h2,
91
+ h3,
92
+ h4,
93
+ h5,
94
+ *[class*="header"]`
95
+ } {
96
+ font-family: ${headerFamily} !important;
97
+ }
98
+ eox-layercontrol,
99
+ eox-map,
100
+ eox-jsonform,
101
+ eox-timecontrol,
102
+ eox-itemfilter,
103
+ eox-chart,
104
+ eox-stacinfo {
105
+ --eox-header-font-family: ${headerFamily};
106
+ `;
107
+ const isOne = headerFamily && headerFamily === bodyFamily;
108
+ const styles = isOne
109
+ ? bodyRule + "\n" + headersRule
110
+ : familyName == bodyFamily
111
+ ? bodyRule
112
+ : headersRule;
113
+ stylesheet.replaceSync(styles);
114
+ document?.adoptedStyleSheets?.push(stylesheet);
115
+ },
116
+ fontinactive(familyName, _fvd) {
117
+ throw new Error(`error loading font: ${familyName}`);
118
+ },
119
+ });
120
+ return families;
41
121
  };
42
122
 
43
123
  /**
@@ -31,20 +31,17 @@ const props = defineProps({
31
31
  default: false,
32
32
  },
33
33
  });
34
- const eodash = await useEodashRuntime(props.config);
35
34
 
36
35
  useURLSearchParametersSync();
37
36
 
37
+ const eodash = await useEodashRuntime(props.config);
38
+
38
39
  const theme = useUpdateTheme("dashboardTheme", {
39
40
  ...(eodash.brand?.theme ?? {}),
40
41
  });
41
42
  theme.global.name.value = "dashboardTheme";
42
43
 
43
- await loadFont(
44
- eodash.brand?.font?.family,
45
- eodash.brand?.font?.link,
46
- props.isWebComponent,
47
- );
44
+ await loadFont(eodash.brand?.font, props.isWebComponent);
48
45
 
49
46
  const { loadSTAC } = useSTAcStore();
50
47
  await loadSTAC();
@@ -88,4 +85,24 @@ div.v-application__wrap {
88
85
  eo-dash {
89
86
  overflow: hidden;
90
87
  }
88
+ /* set eox-elements colors css vars to match the theme */
89
+ eox-layercontrol,
90
+ eox-map,
91
+ eox-drawtools,
92
+ eox-timecontrol,
93
+ eox-jsonform,
94
+ eox-chart,
95
+ eox-stacinfo,
96
+ eox-itemfilter {
97
+ --primary-color: rgb(var(--v-theme-primary));
98
+ --eox-primary-color: rgb(var(--v-theme-primary));
99
+ --eox-secondary-color: rgb(var(--v-theme-secondary));
100
+ --eox-accent-color: rgb(var(--v-theme-accent));
101
+ --eox-error-color: rgb(var(--v-theme-error));
102
+ --eox-info-color: rgb(var(--v-theme-info));
103
+ --eox-success-color: rgb(var(--v-theme-success));
104
+ --eox-warning-color: rgb(var(--v-theme-warning));
105
+ --range-slider-color: rgb(var(--v-theme-primary));
106
+ --range-slider-track-color: rgb(var(--v-theme-on-primary));
107
+ }
91
108
  </style>
@@ -1,7 +1,7 @@
1
1
  import { openBlock, createBlock, withCtx, createElementVNode, unref, normalizeStyle, createElementBlock, Suspense, resolveDynamicComponent, mergeProps, createCommentVNode, Fragment, renderList, Transition } from 'vue';
2
2
  import '@eox/layout';
3
- import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent-CLUhauLl.js';
4
- import { V as VMain } from './VMain-2GOqWb6m.js';
3
+ import { _ as _export_sfc, F as useDefineTemplate } from './asWebComponent--e4yqM3f.js';
4
+ import { V as VMain } from './VMain-B7G2T3Zv.js';
5
5
 
6
6
  const _hoisted_1 = ["gap"];
7
7
  const _hoisted_2 = ["id", "h", "w", "x", "y"];
@@ -24,7 +24,7 @@ return (_ctx, _cache) => {
24
24
  }, [
25
25
  (unref(bgWidget)?.component)
26
26
  ? (openBlock(), createElementBlock("eox-layout-item", {
27
- key: 0,
27
+ key: unref(bgWidget).id,
28
28
  class: "bg-panel bg-surface",
29
29
  style: normalizeStyle(`margin: -${unref(gap) + 1}px;`),
30
30
  x: "0",
@@ -32,7 +32,7 @@ return (_ctx, _cache) => {
32
32
  h: "12",
33
33
  w: "12"
34
34
  }, [
35
- (openBlock(), createBlock(Suspense, { suspensible: "" }, {
35
+ (openBlock(), createBlock(Suspense, null, {
36
36
  default: withCtx(() => [
37
37
  (openBlock(), createBlock(resolveDynamicComponent(unref(bgWidget)?.component), mergeProps({ id: "bg-widget" }, unref(bgWidget)?.props), null, 16 /* FULL_PROPS */))
38
38
  ]),
@@ -56,7 +56,7 @@ return (_ctx, _cache) => {
56
56
  x: importedWidget.value.layout.x,
57
57
  y: importedWidget.value.layout.y
58
58
  }, [
59
- (openBlock(), createBlock(Suspense, { suspensible: "" }, {
59
+ (openBlock(), createBlock(Suspense, null, {
60
60
  default: withCtx(() => [
61
61
  (openBlock(), createBlock(resolveDynamicComponent(importedWidget.value.component), mergeProps({
62
62
  key: importedWidget.value.id,
@@ -79,6 +79,6 @@ return (_ctx, _cache) => {
79
79
  }
80
80
 
81
81
  };
82
- const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-ebeeb1d1"]]);
82
+ const DashboardLayout = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-7294ae56"]]);
83
83
 
84
84
  export { DashboardLayout as default };
@@ -1,5 +1,5 @@
1
1
  import { withAsyncContext, ref, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
2
- import { $ as useSTAcStore } from './asWebComponent-CLUhauLl.js';
2
+ import { $ as useSTAcStore } from './asWebComponent--e4yqM3f.js';
3
3
 
4
4
  const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
5
5
 
@@ -36,7 +36,7 @@ const props = /** @type {import("@/types").WebComponentProps} */ (
36
36
  const getWebComponent = async () =>
37
37
  typeof props.link === "string"
38
38
  ? await import(/* @vite-ignore */ props.link)
39
- : await props.link();
39
+ : await props.link?.();
40
40
 
41
41
  const imported = !customElements.get(props.tagName)
42
42
  ? (
@@ -53,8 +53,15 @@ const defined = customElements.get(props.tagName);
53
53
 
54
54
  // if the imported link doesn't define the custom tag provided
55
55
  if (!defined && props.constructorProp) {
56
- const Constructor = imported[props.constructorProp];
57
- customElements.define(props.tagName, Constructor);
56
+ try {
57
+ const Constructor = imported[props.constructorProp];
58
+ customElements.define(props.tagName, Constructor);
59
+ } catch (e) {
60
+ console.error(
61
+ `[eodash] ${props.tagName} is not defined, please add a valid link or constructorProp`,
62
+ );
63
+ console.error(e);
64
+ }
58
65
  }
59
66
 
60
67
  const store = useSTAcStore();
@@ -1,9 +1,9 @@
1
1
  import { resolveComponent, render, h, mergeProps, useCssVars, useTemplateRef, customRef, ref, computed, reactive, toRef, watch, onMounted, openBlock, createElementBlock, createVNode, unref, createSlots, withCtx, createElementVNode, withDirectives, createBlock, createCommentVNode, toHandlers } from 'vue';
2
2
  import { DatePicker } from 'v-calendar';
3
- import { E as isObject, Y as consoleError, t as useDisplay, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as collectionsPalette, a2 as makePanelTransparent, V as VBtn, y as VIcon } from './asWebComponent-CLUhauLl.js';
3
+ import { E as isObject, Y as consoleError, t as useDisplay, Z as datetime, $ as useSTAcStore, a0 as eodashCollections, a1 as collectionsPalette, a2 as makePanelTransparent, V as VBtn, y as VIcon } from './asWebComponent--e4yqM3f.js';
4
4
  import { mdiRayEndArrow, mdiRayStartArrow } from '@mdi/js';
5
5
  import log from 'loglevel';
6
- import { V as VTooltip } from './VTooltip-BWg0dxx5.js';
6
+ import { V as VTooltip } from './VTooltip-9810qjB2.js';
7
7
 
8
8
  // Utilities
9
9
  function useDirectiveComponent(component, props) {
@@ -132,7 +132,7 @@ const _sfc_main = {
132
132
  setup(__props) {
133
133
 
134
134
  useCssVars(_ctx => ({
135
- "45a34dce": (transform.value)
135
+ "f4706d8a": (transform.value)
136
136
  }));
137
137
 
138
138
  const { lgAndDown } = useDisplay();
@@ -1,5 +1,5 @@
1
1
  import { computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString } from 'vue';
2
- import { t as useDisplay, $ as useSTAcStore } from './asWebComponent-CLUhauLl.js';
2
+ import { t as useDisplay, $ as useSTAcStore } from './asWebComponent--e4yqM3f.js';
3
3
  import '@eox/itemfilter';
4
4
 
5
5
  const _hoisted_1 = [".items"];
@@ -3,7 +3,7 @@ import '@eox/layercontrol';
3
3
  import '@eox/jsonform';
4
4
  import '@eox/timecontrol';
5
5
  import 'color-legend-element';
6
- import { $ as useSTAcStore, a3 as mapCompareEl, a4 as mapEl, a5 as eodashCompareCollections, a0 as eodashCollections, a6 as layerControlFormValue, a7 as getColFromLayer } from './asWebComponent-CLUhauLl.js';
6
+ import { $ as useSTAcStore, a3 as mapCompareEl, a4 as mapEl, a5 as eodashCompareCollections, a0 as eodashCollections, a6 as layerControlFormValue, a7 as getColFromLayer } from './asWebComponent--e4yqM3f.js';
7
7
  import { storeToRefs } from 'pinia';
8
8
 
9
9
  const _hoisted_1 = { class: "d-flex flex-column fill-height overflow-auto" };
@@ -1,7 +1,7 @@
1
1
  import { ref, openBlock, createElementBlock, createVNode, withCtx, mergeProps } from 'vue';
2
- import { a2 as makePanelTransparent, y as VIcon, al as activeTemplate } from './asWebComponent-CLUhauLl.js';
2
+ import { a2 as makePanelTransparent, y as VIcon, al as activeTemplate } from './asWebComponent--e4yqM3f.js';
3
3
  import { mdiViewDashboard } from '@mdi/js';
4
- import { V as VTooltip } from './VTooltip-BWg0dxx5.js';
4
+ import { V as VTooltip } from './VTooltip-9810qjB2.js';
5
5
 
6
6
  const _sfc_main = {
7
7
  __name: 'EodashLayoutSwitcher',