@eodash/eodash 5.0.0-alpha.1.9 → 5.0.0-alpha.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 (79) hide show
  1. package/README.md +1 -1
  2. package/bin/cli.js +15 -8
  3. package/bin/main.js +9 -0
  4. package/bin/serverConfig.js +58 -29
  5. package/bin/types.d.ts +52 -0
  6. package/bin/utils.js +70 -20
  7. package/core/App.vue +10 -12
  8. package/core/SuspensedDashboard.ce.vue +59 -0
  9. package/core/asWebComponent.d.ts +18 -0
  10. package/core/asWebComponent.js +12 -0
  11. package/core/components/DashboardLayout.vue +23 -27
  12. package/core/components/DynamicWebComponent.vue +6 -6
  13. package/core/components/Footer.vue +11 -12
  14. package/core/components/Header.vue +5 -29
  15. package/core/components/Loading.vue +27 -0
  16. package/core/components/MobileLayout.vue +34 -63
  17. package/core/composables/DefineEodash.js +57 -0
  18. package/core/composables/DefineWidgets.js +26 -15
  19. package/core/composables/index.js +139 -67
  20. package/core/eodash.js +100 -0
  21. package/core/main.js +2 -4
  22. package/core/plugins/index.js +3 -12
  23. package/core/plugins/vuetify.js +5 -2
  24. package/core/store/Actions.js +0 -28
  25. package/core/store/States.js +12 -3
  26. package/core/store/stac.js +7 -5
  27. package/core/types.d.ts +148 -124
  28. package/core/utils/eodashSTAC.js +164 -0
  29. package/core/utils/helpers.js +40 -0
  30. package/core/utils/index.js +28 -0
  31. package/core/utils/keys.js +6 -0
  32. package/core/views/Dashboard.vue +33 -23
  33. package/core/vite-env.d.ts +16 -2
  34. package/dist/.gitkeep +0 -0
  35. package/dist/DashboardLayout-YLfAa8wH.js +168 -0
  36. package/dist/DynamicWebComponent-BDOQsEcj.js +57 -0
  37. package/dist/EodashDatePicker-DlehqSgz.js +1645 -0
  38. package/dist/EodashItemFilter-TSp7XRGy.js +51 -0
  39. package/dist/EodashMap-DInb9cfS.js +53405 -0
  40. package/dist/Footer-CIzHgJbK.js +118 -0
  41. package/dist/Header-C5PSB8Uc.js +609 -0
  42. package/dist/IframeWrapper-DYHQQRUh.js +19 -0
  43. package/dist/MobileLayout-DZmqrpub.js +523 -0
  44. package/dist/VBtn-CFPhsIX8.js +1106 -0
  45. package/dist/VMain-deI9jyIf.js +35 -0
  46. package/dist/WidgetsContainer-D_PLP1qf.js +122 -0
  47. package/dist/_commonjsHelpers-DaMA6jEr.js +8 -0
  48. package/dist/asWebComponent-BKe6Spni.js +11323 -0
  49. package/dist/basedecoder-Qm25PwVp-CHo5Pomv.js +89 -0
  50. package/dist/color-D72nEBIR.js +115 -0
  51. package/dist/decoder-kAoyGIq9-HAkjSTCt.js +10 -0
  52. package/dist/deflate-Be2Arps5-hDqMz3RA.js +10 -0
  53. package/dist/dimensions-BZkmIizV.js +53 -0
  54. package/dist/eo-dash.js +6 -0
  55. package/dist/eox-itemfilter-DcQkRD2l.js +7537 -0
  56. package/dist/eox-map-BJ9SIixs.js +36205 -0
  57. package/dist/eox-stacinfo-B-YrT7Ug.js +13698 -0
  58. package/dist/forwardRefs-Bxeu9Obx.js +142 -0
  59. package/dist/index-8ch8xKfa.js +152 -0
  60. package/dist/index-DIt8GjSR.js +65 -0
  61. package/dist/jpeg-DNfUpLwy-Fjan-04T.js +515 -0
  62. package/dist/lerc-C9VL9kri-DyVxBvsf.js +1029 -0
  63. package/dist/lzw-BOMhmEDy-Dboc93VO.js +84 -0
  64. package/dist/packbits-DaUD6MLm-Bu1PoTGa.js +24 -0
  65. package/dist/pako.esm-C3kYPGGQ-BMki8cQY.js +1087 -0
  66. package/dist/raw-CcGKjn8q-DFOt-i8n.js +9 -0
  67. package/dist/ssrBoot-Cm5pWM14.js +17 -0
  68. package/dist/style.css +5 -0
  69. package/dist/webfontloader-CyOFAuFB.js +471 -0
  70. package/dist/webimage-D2c098k3-DLj1LQxB.js +19 -0
  71. package/package.json +40 -12
  72. package/widgets/EodashDatePicker.vue +56 -0
  73. package/widgets/EodashItemFilter.vue +60 -0
  74. package/widgets/EodashMap.vue +82 -0
  75. package/widgets/WidgetsContainer.vue +1 -1
  76. package/core/composables/DefineConfig.js +0 -45
  77. package/core/eodashConfig.js +0 -136
  78. package/core/plugins/router.js +0 -20
  79. package/core/store/Keys.js +0 -6
package/README.md CHANGED
@@ -20,7 +20,7 @@ npm run preview
20
20
  .
21
21
  ├── core # Main source code that hosts the microfrontends and renders the dashboard
22
22
  ├── docs # Documentation files
23
- ├── widgets # Internal Vue widgets that can be imported in the configuration
23
+ ├── widgets # Vue componenets as internal widgets.
24
24
  ├── public # Statically served directory
25
25
  └── README.md
26
26
 
package/bin/cli.js CHANGED
@@ -19,9 +19,9 @@ export const createDevServer = async () => {
19
19
  }
20
20
 
21
21
  export const buildApp = async () => {
22
- const htmlPath = path.join(appPath, '/index.html')
23
- await writeFile(htmlPath, indexHtml).then(async () => {
24
- const config = await serverConfig({ mode: 'production', command: 'build' });
22
+ /** @param {"production"|"lib"} mode */
23
+ const viteBuild = async (mode) => {
24
+ const config = await serverConfig({ mode, command: 'build' });
25
25
  await build(config)
26
26
 
27
27
  if (existsSync(runtimeConfigPath)) {
@@ -30,11 +30,18 @@ export const buildApp = async () => {
30
30
  console.error(e)
31
31
  })
32
32
  }
33
-
34
- await rm(htmlPath).catch(() => {
35
- console.error('failed to remove index.html')
33
+ }
34
+ if (userConfig.lib) {
35
+ await viteBuild("lib")
36
+ } else {
37
+ const htmlPath = path.join(appPath, '/index.html')
38
+ await writeFile(htmlPath, indexHtml).then(async () => {
39
+ await viteBuild("production")
40
+ await rm(htmlPath).catch(() => {
41
+ console.error('failed to remove index.html')
42
+ })
36
43
  })
37
- })
44
+ }
38
45
  }
39
46
 
40
47
 
@@ -43,7 +50,7 @@ export async function previewApp() {
43
50
  root: rootPath,
44
51
  base: userConfig.base ?? '',
45
52
  preview: {
46
- port: userConfig.port ?? 8080,
53
+ port: isNaN(userConfig.port) ? 8080 : userConfig.port,
47
54
  open: userConfig.open,
48
55
  host: userConfig.host
49
56
  },
package/bin/main.js ADDED
@@ -0,0 +1,9 @@
1
+ #!/usr/bin/env node
2
+
3
+ /**
4
+ * @param {import('./types').EodashConfig} config
5
+ */
6
+ export const defineConfig = (config) => {
7
+ return config
8
+ }
9
+
package/bin/serverConfig.js CHANGED
@@ -2,17 +2,18 @@
2
2
 
3
3
  import vue from '@vitejs/plugin-vue';
4
4
  import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
5
- import virtual, { updateVirtualModule } from 'vite-plugin-virtual'
6
5
  import { fileURLToPath, URL } from 'url';
7
6
  import {
8
7
  runtimeConfigPath,
9
- appPath, compiletimeConfigPath,
8
+ appPath, entryPath,
10
9
  cachePath, publicPath, userConfig,
11
- buildTargetPath
10
+ buildTargetPath,
11
+ logger,
12
+ rootPath,
13
+ internalWidgetsPath
12
14
  } from "./utils.js";
13
15
  import { readFile } from "fs/promises";
14
16
  import { defineConfig, searchForWorkspaceRoot } from "vite"
15
- import { getUserModules } from './utils.js';
16
17
  import { existsSync } from 'fs';
17
18
  import path from "path";
18
19
 
@@ -28,21 +29,22 @@ export const indexHtml = `
28
29
  </head>
29
30
 
30
31
  <body>
31
- <div id="app"></div>
32
- <script type="module" src="${path.resolve(`/@fs/${appPath}/core/render.js`)}"></script>
32
+ ${userConfig.lib ? `<eo-dash/>
33
+ <script type="module" src="${path.resolve(`/@fs/${appPath}`, `core/asWebComponent.js`)}"></script>
34
+ `: ` <div id="app"/>
35
+ <script type="module" src="${path.resolve(`/@fs/${appPath}`, `core/render.js`)}"></script>
36
+ `}
33
37
  </body>
34
38
  </html>`
35
39
 
36
- /**
37
- * @type {import('vite').Plugin | null}
38
- */
39
- let virtualPlugin = null;
40
+ //@ts-expect-error
40
41
  export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(defineConfig(async ({ mode, command }) => {
41
42
  return {
42
43
  base: userConfig.base ?? '',
43
44
  cacheDir: cachePath,
44
45
  plugins: [
45
46
  vue({
47
+ customElement: userConfig.lib,
46
48
  template: {
47
49
  transformAssetUrls,
48
50
  compilerOptions: {
@@ -57,18 +59,23 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
57
59
  (mode === "development" && {
58
60
  name: "inject-html",
59
61
  configureServer
60
- }),
61
- virtualPlugin = virtual(await getUserModules())
62
+ })
62
63
  ],
64
+ customLogger: logger,
63
65
  define: { 'process.env': {} },
64
66
  resolve: {
65
67
  alias: {
66
68
  '@': fileURLToPath(new URL('../core', import.meta.url)),
67
69
  '^': fileURLToPath(new URL('../widgets', import.meta.url)),
70
+ "user:config": entryPath,
71
+ "user:widgets": internalWidgetsPath
68
72
  },
69
73
  extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
70
74
  },
71
75
  server: {
76
+ warmup: {
77
+ clientFiles: [path.join(appPath, "core/**")]
78
+ },
72
79
  port: userConfig.port ?? 3000,
73
80
  open: userConfig.open,
74
81
  fs: {
@@ -78,17 +85,23 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
78
85
  },
79
86
  root: fileURLToPath(new URL('..', import.meta.url)),
80
87
  optimizeDeps: mode === "development" ? {
81
- include: ["webfontloader", "vuetify", "vue", "pinia"],
88
+ include: ["webfontloader", "vuetify", "vue", "pinia", "stac-js", "urijs"],
82
89
  noDiscovery: true,
83
90
  } : {},
84
91
  /** @type {string|false} */
85
92
  publicDir: userConfig.publicDir === false ? false : publicPath,
86
93
  build: {
94
+ lib: (mode === 'lib' && command === 'build') && {
95
+ entry: path.join(appPath, "core/asWebComponent.js"),
96
+ fileName: "eo-dash",
97
+ formats: ["es"],
98
+ name: "@eodash/eodash"
99
+ },
87
100
  outDir: buildTargetPath,
88
101
  emptyOutDir: true,
89
- rollupOptions: {
90
- input: fileURLToPath(new URL(command === 'build' ? '../index.html' : '../core/main.js', import.meta.url)),
91
- },
102
+ rollupOptions: command == 'build' ? {
103
+ input: fileURLToPath(new URL(mode === 'lib' ? '../core/asWebComponent.js' : '../index.html', import.meta.url)),
104
+ } : undefined,
92
105
  target: "esnext"
93
106
  }
94
107
  }
@@ -100,26 +113,42 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
100
113
  * @type {import("vite").ServerHook}
101
114
  */
102
115
  async function configureServer(server) {
103
- server.watcher.add([compiletimeConfigPath, runtimeConfigPath])
116
+ server.watcher.add([entryPath, runtimeConfigPath, path.join(internalWidgetsPath, "**/*.vue")])
117
+
118
+ let updatedPath = ''
119
+ const loggerInfo = logger.info
120
+ logger.info = (msg, options) => {
121
+ if (msg.includes('core')) {
122
+ const removedPath = msg.split('/')[0].split(" ")
123
+ removedPath.pop()
124
+ const updatedMsg = removedPath.join(" ") + " " + updatedPath.replace(rootPath, "")
125
+
126
+ return loggerInfo(updatedMsg, options)
127
+ }
128
+ return loggerInfo(msg, options)
129
+ }
104
130
 
105
131
  server.watcher.on('change', async (path) => {
106
- if (path == runtimeConfigPath) {
107
- server.hot.send('reload')
108
- } else if (path === compiletimeConfigPath) {
109
- updateVirtualModule(virtualPlugin, 'user:config',
110
- await getUserModules().then(modules => modules['user:config']))
132
+ updatedPath = path
133
+ if (path === runtimeConfigPath) {
134
+ server.hot.send({
135
+ type: 'full-reload',
136
+ path: path
137
+ })
111
138
  }
112
139
  })
113
140
 
114
141
  return () => {
115
142
  server.middlewares.use(async (req, res, next) => {
116
- if (req.originalUrl === '/@fs/config.js' && existsSync(runtimeConfigPath)) {
117
- await readFile(runtimeConfigPath).then(runtimeConfig => {
118
- res.statusCode = 200
119
- res.setHeader('Content-Type', 'text/javascript')
120
- res.write(runtimeConfig)
121
- res.end()
122
- })
143
+ if (req.originalUrl === '/@fs/config.js') {
144
+ res.statusCode = 200
145
+ res.setHeader('Content-Type', 'text/javascript')
146
+ if (existsSync(runtimeConfigPath)) {
147
+ await readFile(runtimeConfigPath).then(runtimeConfig => {
148
+ res.write(runtimeConfig)
149
+ })
150
+ }
151
+ res.end()
123
152
  return
124
153
  }
125
154
 
package/bin/types.d.ts ADDED
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Extending [Vite's](https://vitejs.dev/) config to configure eodash's server, build and setup.
3
+ * @group CLI
4
+ */
5
+ export interface EodashConfig {
6
+ dev?: {
7
+ /** serving port */
8
+ port?: string | number
9
+ host?: string | boolean
10
+ /** open default browser when the server starts */
11
+ open?: boolean
12
+ }
13
+ preview?: {
14
+ /** serving port */
15
+ port?: string | number
16
+ host?: string | boolean
17
+ /** open default browser when the server starts */
18
+ open?: boolean
19
+ }
20
+ /**
21
+ * Base public path
22
+ */
23
+ base?: string;
24
+ /**
25
+ * Build target folder path
26
+ */
27
+ outDir?: string;
28
+ /**
29
+ * Path to statically served assets folder, can be set to `false`
30
+ * to disable serving assets statically
31
+ **/
32
+ publicDir?: string | false;
33
+ /**
34
+ * Cache folder
35
+ */
36
+ cacheDir?: string
37
+ /** Specifies main entry file, exporting `createEodash`*/
38
+ entryPoint?: string
39
+ /**
40
+ * File exporting eodash client runtime config
41
+ */
42
+ runtime?: string
43
+ widgets?: string
44
+ /** builds eodash as a web component library */
45
+ lib?: boolean
46
+ }
47
+ /**
48
+ * helper function that provides intellisense
49
+ * without the need for JSDOC for `eodash.config.js`:
50
+ * @group CLI
51
+ */
52
+ export declare const definConfig: (config: EodashConfig) => EodashConfig
package/bin/utils.js CHANGED
@@ -1,53 +1,103 @@
1
1
  #!/usr/bin/env node
2
2
 
3
- import { readFile } from 'fs/promises';
4
3
  import { existsSync, readFileSync } from 'fs';
5
4
  import path from 'path';
6
5
  import { fileURLToPath } from 'url';
7
- import { searchForWorkspaceRoot } from 'vite';
6
+ import { searchForWorkspaceRoot, createLogger } from 'vite';
8
7
  import { Command } from 'commander';
8
+
9
+ export const rootPath = searchForWorkspaceRoot(process.cwd());
9
10
  const cli = new Command('eodash')
10
11
 
11
12
  const pkg = JSON.parse(
12
13
  readFileSync(
13
- fileURLToPath(new URL('../package.json', import.meta.url))
14
+ path.join(rootPath, 'package.json')
14
15
  , 'utf-8')
15
16
  );
16
17
 
18
+ /**
19
+ * CLI flags object
20
+ * @typedef {Object} Options
21
+ * @property {string | false} publicDir
22
+ * @property {string} outDir
23
+ * @property {string} entryPoint
24
+ * @property {string} widgets
25
+ * @property {string} cacheDir
26
+ * @property {string} runtime
27
+ * @property {string} base
28
+ * @property {string | number} port
29
+ * @property {boolean} open
30
+ * @property {boolean | string} host
31
+ * @property {string} config
32
+ * @property {boolean} lib
33
+ */
17
34
  cli.version(pkg.version, '-v, --version', 'output the current version')
18
35
  .option('--publicDir <path>', 'path to statically served assets folder')
19
36
  .option('--no-publicDir', 'stop serving static assets')
20
37
  .option('--outDir <path>', 'minified output folder')
21
- .option('-e, --entryPoint <path>', 'file exporting `defineConfig`')
22
- .option('-c, --cacheDir <path>', 'cache folder')
23
- .option('-r, --runtime <path>', 'file exporting eodash runtime config')
38
+ .option('-e, --entryPoint <path>', 'file exporting `createEodash`')
39
+ .option('-w, --widgets <path>', 'folder that contains vue components as internal widgets')
40
+ .option('--cacheDir <path>', 'cache folder')
41
+ .option('-r, --runtime <path>', 'file exporting eodash client runtime config')
24
42
  .option('-b, --base <path>', 'base public path')
25
43
  .option('-p, --port <port>', 'serving port')
26
44
  .option('-o, --open', 'open default browser when the server starts')
45
+ .option('-c, --config <path>', 'path to eodash server and build configuration file')
27
46
  .option('--host [IP address]', 'specify which IP addresses the server should listen on')
47
+ .option('-l, --lib', 'builds eodash as a web component library')
48
+ .option('--no-lib', 'builds eodash as an SPA')
49
+ .option('--no-host', 'do not expose server to the network')
28
50
  .parse(process.argv)
29
51
 
30
52
 
31
- export const userConfig = cli.opts()
53
+ export const userConfig = await getUserConfig(cli.opts(), process.argv?.[2])
54
+
32
55
  export const appPath = fileURLToPath(new URL("..", import.meta.url)),
33
- rootPath = searchForWorkspaceRoot(process.cwd()),
34
56
  publicPath = userConfig.publicDir ? path.resolve(rootPath, userConfig.publicDir) : path.join(rootPath, './public'),
35
57
  srcPath = path.join(rootPath, "/src"),
36
- runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./config.runtime.js"),
37
- compiletimeConfigPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/config.js"),
58
+ runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./runtime.js"),
59
+ entryPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/main.js"),
60
+ internalWidgetsPath = userConfig.widgets ? path.resolve(rootPath, userConfig.widgets) : path.join(srcPath, "widgets"),
38
61
  dotEodashPath = path.join(rootPath, "/.eodash"),
39
62
  buildTargetPath = userConfig.outDir ? path.resolve(rootPath, userConfig.outDir) : path.join(dotEodashPath, '/dist'),
40
63
  cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
41
64
 
42
65
 
43
- export const getUserModules = async () => {
44
- /** @type {Record<string,string>} */
45
- let userModules = {}
46
- const indexJs = await readFile(compiletimeConfigPath, 'utf-8').catch(() => {
47
- if (!existsSync(runtimeConfigPath)) {
48
- console.error(new Error("no eodash configuration found"))
49
- }
50
- })
51
- userModules['user:config'] = typeof indexJs === 'string' ? indexJs : ''
52
- return userModules
66
+ export const logger = createLogger()
67
+
68
+ /**
69
+ * @param {Options} options
70
+ * @param {string | undefined} command
71
+ */
72
+ async function getUserConfig(options, command) {
73
+ let eodashCLiConfigFile = options.config ? path.resolve(rootPath, options.config) : path.join(rootPath, 'eodash.config.js');
74
+ /** @type {import("./types").EodashConfig} */
75
+ let config = {};
76
+ if (existsSync(eodashCLiConfigFile)) {
77
+ config = await import(eodashCLiConfigFile).then(config => {
78
+ if (config.default instanceof Function) {
79
+ return config.default()
80
+ } else {
81
+ return config.default
82
+ }
83
+ }).catch(err => {
84
+ console.error(err);
85
+ })
86
+ } else {
87
+ eodashCLiConfigFile = null
88
+ }
89
+
90
+ return {
91
+ base: options.base ?? config?.base,
92
+ port: Number(options.port ?? config?.[command]?.port),
93
+ host: options.host ?? config?.[/**@type {"dev"|"preview"} */(command)]?.host,
94
+ open: options.open ?? config?.[/**@type {"dev"|"preview"} */(command)]?.open,
95
+ cacheDir: options.cacheDir ?? config?.cacheDir,
96
+ entryPoint: options.entryPoint ?? config?.entryPoint,
97
+ outDir: options.outDir ?? config?.outDir,
98
+ publicDir: options.publicDir ?? config?.publicDir,
99
+ runtime: options.runtime ?? config?.runtime,
100
+ widgets: options.widgets ?? config?.widgets,
101
+ lib: options.lib ?? config?.lib
102
+ }
53
103
  }
package/core/App.vue CHANGED
@@ -1,21 +1,19 @@
1
1
  <template>
2
2
  <v-app>
3
- <RouterView v-slot="{ Component }">
4
- <template v-if="Component">
5
- <Suspense>
6
- <!-- main content -->
7
- <component :is="Component"></component>
3
+ <Suspense>
4
+ <!-- main content -->
5
+ <Dashboard />
8
6
 
9
- <!-- loading state -->
10
- <template #fallback>
11
- Loading...
12
- </template>
13
- </Suspense>
7
+ <!-- loading state -->
8
+ <template #fallback>
9
+ <Loading />
14
10
  </template>
15
- </RouterView>
11
+ </Suspense>
16
12
  </v-app>
17
13
  </template>
18
14
 
19
15
  <script setup>
20
- //
16
+ import Loading from '@/components/Loading.vue';
17
+ import Dashboard from '@/views/Dashboard.vue';
18
+
21
19
  </script>
package/core/SuspensedDashboard.ce.vue ADDED
@@ -0,0 +1,59 @@
1
+ <template>
2
+ <v-app>
3
+ <Suspense>
4
+ <Dashboard :on-template-mount="setStylesFromHead" :config="config" />
5
+ <template #fallback>
6
+ <div style="height: 100dvh; display: flex; align-items: center; justify-content: center;">
7
+ <Loading />
8
+ </div>
9
+ </template>
10
+ </Suspense>
11
+ </v-app>
12
+ </template>
13
+ <script setup>
14
+ import Dashboard from '@/views/Dashboard.vue';
15
+ import { createApp, getCurrentInstance } from "vue"
16
+ import { registerPlugins } from '@/plugins';
17
+ import { eodashKey } from '@/utils/keys';
18
+ import Loading from '@/components/Loading.vue';
19
+
20
+ defineProps({
21
+ config: {
22
+ type: String,
23
+ }
24
+ })
25
+ const app = createApp({})
26
+ registerPlugins(app)
27
+
28
+ const inst = getCurrentInstance()
29
+ //@ts-expect-error
30
+ Object.assign(inst.appContext, app._context)
31
+ //@ts-expect-error
32
+ Object.assign(inst.provides, app._context.provides)
33
+
34
+ function setStylesFromHead() {
35
+ const eodashComponent = document.querySelector('eo-dash')
36
+ const styleSheet = new CSSStyleSheet()
37
+ const head = document.querySelector('head')
38
+ let stylesStr = ''
39
+
40
+ Array.from(head?.children ?? []).forEach((child) => {
41
+ if (child.getAttribute('type') === 'text/css') {
42
+ stylesStr += `\n ${child.innerHTML}`
43
+ return
44
+ }
45
+
46
+ if (child.tagName == 'LINK' && child.getAttribute('rel') === 'stylesheet') {
47
+ eodashComponent?.shadowRoot?.appendChild(child.cloneNode(true))
48
+ }
49
+ });
50
+
51
+ stylesStr += `\n * {
52
+ font-family:${
53
+ //@ts-expect-error
54
+ /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
55
+ }`
56
+ styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
57
+ eodashComponent?.shadowRoot?.adoptedStyleSheets.push(styleSheet)
58
+ }
59
+ </script>
package/core/asWebComponent.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /** @group WebComponent */
2
+ type EodashConstructor = import("vue").VueElementConstructor<import("vue").ExtractPropTypes<{ config: string }>>
3
+ /**
4
+ * Eodash Web Component constructor
5
+ * @group WebComponent
6
+ */
7
+ export declare const Eodash: EodashConstructor
8
+ /**
9
+ * Registers `eo-dash` as Custom Element in the window
10
+ * @group WebComponent
11
+ */
12
+ export declare function register(): void
13
+
14
+ /**
15
+ * Eodash store @see EodashStore
16
+ * @group WebComponent
17
+ */
18
+ export declare const store: import("./types").EodashStore
package/core/asWebComponent.js ADDED
@@ -0,0 +1,12 @@
1
+ import SuspensedDashboard from './SuspensedDashboard.ce.vue';
2
+ import { defineCustomElement } from 'vue'
3
+ /** @type {import("./asWebComponent").EodashConstructor} */
4
+ export const Eodash = defineCustomElement(SuspensedDashboard)
5
+
6
+ export function register() {
7
+ customElements.define('eo-dash', Eodash)
8
+ }
9
+
10
+ export { default as store } from '@/store'
11
+
12
+ register()
package/core/components/DashboardLayout.vue CHANGED
@@ -1,36 +1,47 @@
1
1
  <template>
2
2
  <v-main>
3
- <eox-layout :gap="eodashConfig.template.gap ?? 2">
4
- <eox-layout-item class="bg-widget" x="0" y="0" h="12" w="12">
5
- <component :is="bgWidget.component" v-bind="bgWidget.props" />
3
+ <eox-layout :gap="eodash.template.gap ?? 2">
4
+ <eox-layout-item style="z-index: 0;" x="0" y="0" h="12" w="12">
5
+ <Suspense>
6
+ <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
7
+ <template #fallback>
8
+ <Loading />
9
+ </template>
10
+ </Suspense>
6
11
  </eox-layout-item>
7
- <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx" class="custom-widget"
12
+ <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx"
13
+ style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
8
14
  :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
9
15
 
10
- <v-btn position="absolute" variant="tonal" :style="slideBtns[idx].style" class="slide-btn"
11
- @click="slideInOut(idx)">
16
+ <v-btn v-if="slideBtns[idx].enabled" position="absolute" variant="tonal" :style="slideBtns[idx].style"
17
+ class="slide-btn" @click="slideInOut(idx)">
12
18
  <v-icon :icon="slideBtns[idx].active ? slideBtns[idx].icon.in : slideBtns[idx].icon.out" />
13
19
  </v-btn>
14
- <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
15
- v-bind="importedWidgets[idx].value.props" />
20
+ <Suspense>
21
+ <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
22
+ v-bind="importedWidgets[idx].value.props" />
23
+ <template #fallback>
24
+ <Loading />
25
+ </template>
26
+ </Suspense>
16
27
 
17
28
  </eox-layout-item>
18
29
  </eox-layout>
19
30
  </v-main>
20
31
  </template>
21
32
  <script setup>
22
- import { eodashConfigKey } from '@/store/Keys';
33
+ import { eodashKey } from '@/utils/keys';
23
34
  import { inject } from 'vue';
24
35
  import { useDefineWidgets } from '@/composables/DefineWidgets'
25
36
  import { useSlidePanels } from '@/composables'
26
37
  import { ref } from 'vue';
27
38
  import '@eox/layout'
28
39
 
29
- const eodashConfig = /** @type {import("@/types").EodashConfig} */ (inject(eodashConfigKey))
40
+ const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
30
41
 
31
- const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
42
+ const [bgWidget] = useDefineWidgets([eodash.template?.background])
32
43
 
33
- const widgetsConfig = eodashConfig.template?.widgets
44
+ const widgetsConfig = eodash.template?.widgets
34
45
 
35
46
  const importedWidgets = useDefineWidgets(widgetsConfig)
36
47
  /**
@@ -41,18 +52,3 @@ const itemEls = ref([])
41
52
 
42
53
  const { slideBtns, slideInOut } = useSlidePanels(itemEls, widgetsConfig)
43
54
  </script>
44
- <style scoped>
45
- eox-layout-item {
46
- background: rgb(var(--v-theme-surface))
47
- }
48
-
49
- .bg-widget {
50
- z-index: 0;
51
- }
52
-
53
- .custom-widget {
54
- position: relative;
55
- overflow: visible;
56
- z-index: 1;
57
- }
58
- </style>
package/core/components/DynamicWebComponent.vue CHANGED
@@ -11,7 +11,6 @@ import {
11
11
  onMounted as whenMounted
12
12
  } from 'vue';
13
13
  import { ref } from 'vue';
14
- import { useRouter } from 'vue-router';
15
14
 
16
15
  const props = /** @type {import("@/types").WebComponentProps} */(defineProps({
17
16
  link: {
@@ -52,17 +51,18 @@ if (!defined && props.constructorProp) {
52
51
  const store = useSTAcStore()
53
52
 
54
53
  /**
55
- * @template {HTMLElement} CE
56
- * @type {import('vue').Ref<CE|null>}
54
+ * @typedef {HTMLElement &
55
+ * Record<string|number|symbol,unknown>} CustomElement
56
+ * @type {import('vue').Ref<CustomElement|null>}
57
57
  */
58
58
  const elementRef = ref(null)
59
- const router = useRouter()
59
+
60
60
 
61
61
  whenMounted(() => {
62
- props.onMounted?.(elementRef.value, store, router)
62
+ props.onMounted?.(elementRef.value, store)
63
63
  })
64
64
 
65
65
  whenUnMounted(() => {
66
- props.onUnmounted?.(elementRef.value, store, router)
66
+ props.onUnmounted?.(elementRef.value, store)
67
67
  })
68
68
  </script>