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

package/widgets/ExportState.vue

@@ -0,0 +1,112 @@
+<template>
+  <PopUp v-model="dialog">
+    <v-card>
+      <v-card-title class="bg-primary">
+        <h5 class="text-h5">Storytelling map configuration</h5>
+      </v-card-title>
+
+      <v-card-text class="py-5">
+        <p class="text-body-2">
+          Copy and paste this code into the map layers field of the storytelling
+          editor:
+        </p>
+        <div class="pa-3 code-block">
+          {{ getLayers() }}
+        </div>
+
+        <div style="position: absolute; bottom: 15px">
+          <v-expand-transition>
+            <div v-if="copySuccess" class="text-success mr-3">
+              <v-icon color="success" left :icon="[mdiClipboardCheckOutline]" />
+              <small>copied!</small>
+            </div>
+          </v-expand-transition>
+        </div>
+        <v-row class="d-flex pt-3 justify-end">
+          <v-col cols="6" class="flex-column align-center text-end">
+            <v-btn
+              v-for="btn in copyBtns"
+              class="text-body-2"
+              @click="btn.copyFn"
+              :key="btn.id"
+              small
+              variant="text"
+              :prepend-icon="[mdiContentCopy]"
+            >
+              copy as {{ btn.copyAs }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
+      </v-card-actions>
+    </v-card>
+  </PopUp>
+</template>
+<script setup>
+import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
+import PopUp from "./PopUp.vue";
+import { copyToClipBoard } from "@/utils";
+import { computed, ref } from "vue";
+import { getLayers as getLayerAction } from "@/store/Actions";
+import { mapPosition } from "@/store/States";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  getLayers: {
+    type: Function,
+    default: getLayerAction,
+  },
+});
+
+const copySuccess = ref(false);
+
+const copyBtns = [
+  {
+    id: Symbol(),
+    copyFn: async () => await copyToClipBoard(mapEntryCode.value, copySuccess),
+    copyAs: "simple map",
+  },
+  {
+    id: Symbol(),
+    copyFn: async () =>
+      await copyToClipBoard(JSON.stringify(props.getLayers()), copySuccess),
+    copyAs: "layers configuration",
+  },
+  {
+    id: Symbol(),
+    copyFn: async () => await copyToClipBoard(mapStepCode.value, copySuccess),
+    copyAs: "map tour section",
+  },
+];
+
+const mapStepCode = computed(() => {
+  const [x, y, z] = mapPosition.value;
+  const preTag = "### <!--{ layers=";
+  const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
+#### Tour step title
+Text describing the current step of the tour and why it is interesting what the map shows currently
+`;
+  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+});
+const mapEntryCode = computed(() => {
+  const [x, y, z] = mapPosition.value;
+  const preTag =
+    '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+  const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
+  return `${preTag}'${JSON.stringify(props.getLayers())}' ${endTag}`;
+});
+</script>
+<style scoped>
+.code-block {
+  background-color: #ddd;
+  font-family: monospace;
+  font-size: small;
+}
+</style>

package/widgets/PopUp.vue

@@ -0,0 +1,40 @@
+<template>
+  <span>
+    <v-dialog
+      max-width="500px"
+      max-height="500px"
+      absolute
+      scrollable
+      scroll-strategy="block"
+      close-on-back
+      v-model="dialog"
+    >
+      <v-sheet>
+        <component
+          v-if="widget"
+          :is="definedWidget.component"
+          :key="definedWidget.id"
+          v-bind="definedWidget.props"
+        />
+        <span v-if="$slots.default">
+          <slot />
+        </span>
+      </v-sheet>
+    </v-dialog>
+  </span>
+</template>
+<script setup>
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  widget: {
+    /** @type {import("vue").PropType<import("@/types").Widget>} */
+    type: Object,
+    default: undefined,
+  },
+});
+
+const [definedWidget] = useDefineWidgets([props?.widget]);
+</script>

package/widgets/WidgetsContainer.vue

@@ -1,6 +1,12 @@
 <template>
-  <details is="animated-details" v-for="mod, idx in importedWidgets" ref="detailsEls" :key="idx" class="overflow-auto"
-    exclusive>
+  <details
+    is="animated-details"
+    v-for="(mod, idx) in importedWidgets"
+    ref="detailsEls"
+    :key="idx"
+    class="overflow-auto"
+    exclusive
+  >
     <summary ref="summaryEls">{{ mod.value.title }}</summary>
     <span :style="{ height: widgetHeight }" class="d-flex flex-column">
       <component :is="mod.value.component" v-bind="mod.value.props" />
@@ -8,39 +14,53 @@
   </details>
 </template>
 <script setup>
-import { useDefineWidgets } from '@/composables/DefineWidgets';
-import { onMounted } from 'vue';
-import { ref } from 'vue';
-import { useLayout } from 'vuetify/lib/framework.mjs';
-import 'animated-details'
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { nextTick, onMounted } from "vue";
+import { ref } from "vue";
+import { useLayout } from "vuetify/lib/framework.mjs";
+import "animated-details";
 
 const props = defineProps({
   widgets: {
-    /** @type {import('vue').PropType<Omit<import("@/types").Widget,'layout'>[]>} */
+    /**
+     * @type {import("vue").PropType<
+     *   Omit<import("@/types").Widget, "layout">[]
+     * >}
+     */
     type: Array,
     required: true,
-  }
-})
+  },
+});
 
-const importedWidgets = useDefineWidgets(props.widgets)
+const importedWidgets = useDefineWidgets(props.widgets);
 
 /**
- *  details elements template ref
- * @type {import('vue').Ref<HTMLDetailsElement[]>}
- **/
-const detailsEls = ref([])
+ * Details elements template ref
+ *
+ * @type {import("vue").Ref<HTMLDetailsElement[]>}
+ */
+const detailsEls = ref([]);
 /**
- *  summary elements template ref
- * @type {import('vue').Ref<HTMLDetailsElement[]>}
- **/
-const summaryEls = ref([])
-const widgetHeight = ref('')
-const summariesHeights = ref(0)
+ * Summary elements template ref
+ *
+ * @type {import("vue").Ref<HTMLDetailsElement[]>}
+ */
+const summaryEls = ref([]);
+const widgetHeight = ref("");
+const summariesHeights = ref(0);
 
-
-onMounted(() => {
-  summariesHeights.value = summaryEls.value.reduce((acc, el) => acc += el.clientHeight, 0)
-  const { mainRect } = useLayout()
-  widgetHeight.value = ((detailsEls.value[0].parentElement?.scrollHeight ?? 0) - summariesHeights.value - mainRect.value['top']) + 'px'
-})
+const { mainRect } = useLayout();
+onMounted(async () => {
+  await nextTick(() => {
+    summariesHeights.value = summaryEls.value.reduce(
+      (acc, el) => (acc += el.clientHeight),
+      0,
+    );
+    widgetHeight.value =
+      (detailsEls.value[0].parentElement?.scrollHeight ?? 0) -
+      summariesHeights.value -
+      mainRect.value["top"] +
+      "px";
+  });
+});
 </script>

package/bin/app.js

@@ -1,22 +0,0 @@
-#!/usr/bin/env node
-
-import { buildApp, createDevServer, previewApp } from './cli.js'
-
-const command = process.argv?.[2];
-(async () => {
-  switch (command) {
-    case "dev":
-      await createDevServer();
-      break;
-    case "build":
-      await buildApp();
-      break;
-    case "preview":
-      await previewApp();
-      break;
-
-    default:
-      console.error('command not found')
-      break;
-  }
-})();

package/bin/cli.js

@@ -1,62 +0,0 @@
-#!/usr/bin/env node
-
-import { build, createServer, preview } from "vite"
-import {
-  rootPath, appPath, buildTargetPath,
-  userConfig, runtimeConfigPath,
-} from "./utils.js";
-import { writeFile, rm, cp } from "fs/promises";
-import { indexHtml, serverConfig } from "./serverConfig.js";
-import path from "path";
-import { existsSync } from "fs";
-
-
-export const createDevServer = async () => {
-  const server = await createServer(await serverConfig({ mode: 'development', command: 'serve' }))
-  await server.listen()
-  server.printUrls()
-  server.bindCLIShortcuts({ print: true })
-}
-
-export const buildApp = async () => {
-  /** @param {"production"|"lib"} mode  */
-  const viteBuild = async (mode) => {
-    const config = await serverConfig({ mode, command: 'build' });
-    await build(config)
-
-    if (existsSync(runtimeConfigPath)) {
-      await cp(runtimeConfigPath, path.join(buildTargetPath, 'config.js'),
-        { recursive: true }).catch((e) => {
-          console.error(e)
-        })
-    }
-  }
-  if (userConfig.lib) {
-    await viteBuild("lib")
-  } else {
-    const htmlPath = path.join(appPath, '/index.html')
-    await writeFile(htmlPath, indexHtml).then(async () => {
-      await viteBuild("production")
-      await rm(htmlPath).catch(() => {
-        console.error('failed to remove index.html')
-      })
-    })
-  }
-}
-
-
-export async function previewApp() {
-  const previewServer = await preview({
-    root: rootPath,
-    base: userConfig.base ?? '',
-    preview: {
-      port: isNaN(userConfig.port) ? 8080 : userConfig.port,
-      open: userConfig.open,
-      host: userConfig.host
-    },
-    build: {
-      outDir: buildTargetPath,
-    }
-  })
-  previewServer.printUrls()
-}

package/bin/main.js

@@ -1,9 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * @param {import('./types').EodashConfig} config
- */
-export const defineConfig = (config) => {
-  return config
-}
-

package/bin/serverConfig.js

@@ -1,165 +0,0 @@
-#!/usr/bin/env node
-
-import vue from '@vitejs/plugin-vue';
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
-import { fileURLToPath, URL } from 'url';
-import {
-  runtimeConfigPath,
-  appPath, entryPath,
-  cachePath, publicPath, userConfig,
-  buildTargetPath,
-  logger,
-  rootPath,
-  internalWidgetsPath
-} from "./utils.js";
-import { readFile } from "fs/promises";
-import { defineConfig, searchForWorkspaceRoot } from "vite"
-import { existsSync } from 'fs';
-import path from "path";
-
-export const indexHtml = `
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Welcome to Eodash v5</title>
-</head>
-
-<body>
-${userConfig.lib ? `<eo-dash style="height:100dvh;"/>
-<script type="module" src="${path.resolve(`/@fs/${appPath}`, `core/asWebComponent.js`)}"></script>
-`: ` <div id="app"/>
-<script type="module" src="${path.resolve(`/@fs/${appPath}`, `core/render.js`)}"></script>
-`}
-</body>
-</html>`
-
-//@ts-expect-error
-export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(defineConfig(async ({ mode, command }) => {
-  return {
-    base: userConfig.base ?? '',
-    cacheDir: cachePath,
-    plugins: [
-      vue({
-        customElement: userConfig.lib,
-        template: {
-          transformAssetUrls,
-          compilerOptions: {
-            isCustomElement: (tag) => !tag.includes('v-') && tag.includes('-')
-          }
-        },
-      }),
-      // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
-      vuetify({
-        autoImport: true,
-      }),
-      (mode === "development" && {
-        name: "inject-html",
-        configureServer
-      })
-    ],
-    customLogger: logger,
-    define: { 'process.env': {} },
-    resolve: {
-      alias: {
-        '@': fileURLToPath(new URL('../core', import.meta.url)),
-        '^': fileURLToPath(new URL('../widgets', import.meta.url)),
-        "user:config": entryPath,
-        "user:widgets": internalWidgetsPath
-      },
-      extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
-    },
-    server: {
-      warmup: {
-        clientFiles: [path.join(appPath, "core/**")]
-      },
-      port: userConfig.port ?? 3000,
-      open: userConfig.open,
-      fs: {
-        allow: [searchForWorkspaceRoot(process.cwd())]
-      },
-      host: userConfig.host
-    },
-    root: fileURLToPath(new URL('..', import.meta.url)),
-    optimizeDeps: mode === "development" ? {
-      include: ["webfontloader", "vuetify", "vue", "pinia", "stac-js", "urijs"],
-      noDiscovery: true,
-    } : {},
-    /** @type {string|false} */
-    publicDir: userConfig.publicDir === false ? false : publicPath,
-    build: {
-      lib: (mode === 'lib' && command === 'build') && {
-        entry: path.join(appPath, "core/asWebComponent.js"),
-        fileName: "eo-dash",
-        formats: ["es"],
-        name: "@eodash/eodash"
-      },
-      outDir: buildTargetPath,
-      emptyOutDir: true,
-      rollupOptions: command == 'build' ? {
-        input: fileURLToPath(new URL(mode === 'lib' ? '../core/asWebComponent.js' : '../index.html', import.meta.url)),
-      } : undefined,
-      target: "esnext"
-    }
-  }
-}));
-
-
-
-/**
- * @type {import("vite").ServerHook}
- */
-async function configureServer(server) {
-  server.watcher.add([entryPath, runtimeConfigPath, path.join(internalWidgetsPath, "**/*.vue")])
-
-  let updatedPath = ''
-  const loggerInfo = logger.info
-  logger.info = (msg, options) => {
-    if (msg.includes('core')) {
-      const removedPath = msg.split('/')[0].split(" ")
-      removedPath.pop()
-      const updatedMsg = removedPath.join(" ") + " " + updatedPath.replace(rootPath, "")
-
-      return loggerInfo(updatedMsg, options)
-    }
-    return loggerInfo(msg, options)
-  }
-
-  server.watcher.on('change', async (path) => {
-    updatedPath = path
-    if (path === runtimeConfigPath) {
-      server.hot.send({
-        type: 'full-reload',
-        path: path
-      })
-    }
-  })
-
-  return () => {
-    server.middlewares.use(async (req, res, next) => {
-      if (req.originalUrl === '/@fs/config.js') {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'text/javascript')
-        if (existsSync(runtimeConfigPath)) {
-          await readFile(runtimeConfigPath).then(runtimeConfig => {
-            res.write(runtimeConfig)
-          })
-        }
-        res.end()
-        return
-      }
-
-      if (req.url?.endsWith('.html')) {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'text/html')
-        const html = await server.transformIndexHtml(req.url, indexHtml, req.originalUrl)
-        res.end(html)
-        return
-      }
-      next()
-    })
-  }
-}

package/bin/types.d.ts

@@ -1,52 +0,0 @@
-/**
- * Extending [Vite's](https://vitejs.dev/) config to configure eodash's server, build and setup.
- * @group CLI
- */
-export interface EodashConfig {
-  dev?: {
-    /** serving  port */
-    port?: string | number
-    host?: string | boolean
-    /** open default browser when the server starts */
-    open?: boolean
-  }
-  preview?: {
-    /** serving  port */
-    port?: string | number
-    host?: string | boolean
-    /** open default browser when the server starts */
-    open?: boolean
-  }
-  /**
-   * Base public path
-   */
-  base?: string;
-  /**
-   * Build target folder path
-   */
-  outDir?: string;
-  /**
-   * Path to statically served assets folder, can be set to `false`
-   * to disable serving assets statically
-   **/
-  publicDir?: string | false;
-  /**
-   * Cache folder
-   */
-  cacheDir?: string
-  /** Specifies main entry file, exporting `createEodash`*/
-  entryPoint?: string
-  /**
-   * File exporting eodash client runtime config
-   */
-  runtime?: string
-  widgets?: string
-  /** builds eodash as a web component library */
-  lib?: boolean
-}
-/**
- *  helper function that provides intellisense
- *  without the need for JSDOC for `eodash.config.js`:
- * @group CLI
- */
-export declare const definConfig: (config: EodashConfig) => EodashConfig

package/bin/utils.js

@@ -1,103 +0,0 @@
-#!/usr/bin/env node
-
-import { existsSync, readFileSync } from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { searchForWorkspaceRoot, createLogger } from 'vite';
-import { Command } from 'commander';
-
-export const rootPath = searchForWorkspaceRoot(process.cwd());
-const cli = new Command('eodash')
-
-const pkg = JSON.parse(
-  readFileSync(
-    path.join(rootPath, 'package.json')
-    , 'utf-8')
-);
-
-/**
- * CLI flags object
- * @typedef {Object} Options
- * @property {string | false} publicDir
- * @property {string} outDir
- * @property {string} entryPoint
- * @property {string} widgets
- * @property {string} cacheDir
- * @property {string} runtime
- * @property {string} base
- * @property {string | number} port
- * @property {boolean} open
- * @property {boolean | string} host
- * @property {string} config
- * @property {boolean} lib
- */
-cli.version(pkg.version, '-v, --version', 'output the current version')
-  .option('--publicDir <path>', 'path to statically served assets folder')
-  .option('--no-publicDir', 'stop serving static assets')
-  .option('--outDir <path>', 'minified output folder')
-  .option('-e, --entryPoint <path>', 'file exporting `createEodash`')
-  .option('-w, --widgets <path>', 'folder that contains vue components as internal widgets')
-  .option('--cacheDir <path>', 'cache folder')
-  .option('-r, --runtime <path>', 'file exporting eodash client runtime config')
-  .option('-b, --base <path>', 'base public path')
-  .option('-p, --port <port>', 'serving  port')
-  .option('-o, --open', 'open default browser when the server starts')
-  .option('-c, --config <path>', 'path to eodash server and build configuration file')
-  .option('--host [IP address]', 'specify which IP addresses the server should listen on')
-  .option('-l, --lib', 'builds eodash as a web component library')
-  .option('--no-lib', 'builds eodash as an SPA')
-  .option('--no-host', 'do not expose server to the network')
-  .parse(process.argv)
-
-
-export const userConfig = await getUserConfig(cli.opts(), process.argv?.[2])
-
-export const appPath = fileURLToPath(new URL("..", import.meta.url)),
-  publicPath = userConfig.publicDir ? path.resolve(rootPath, userConfig.publicDir) : path.join(rootPath, './public'),
-  srcPath = path.join(rootPath, "/src"),
-  runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./runtime.js"),
-  entryPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/main.js"),
-  internalWidgetsPath = userConfig.widgets ? path.resolve(rootPath, userConfig.widgets) : path.join(srcPath, "widgets"),
-  dotEodashPath = path.join(rootPath, "/.eodash"),
-  buildTargetPath = userConfig.outDir ? path.resolve(rootPath, userConfig.outDir) : path.join(dotEodashPath, '/dist'),
-  cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
-
-
-export const logger = createLogger()
-
-/**
- * @param {Options} options
- * @param {string | undefined} command
- */
-async function getUserConfig(options, command) {
-  let eodashCLiConfigFile = options.config ? path.resolve(rootPath, options.config) : path.join(rootPath, 'eodash.config.js');
-  /** @type {import("./types").EodashConfig} */
-  let config = {};
-  if (existsSync(eodashCLiConfigFile)) {
-    config = await import(eodashCLiConfigFile).then(config => {
-      if (config.default instanceof Function) {
-        return config.default()
-      } else {
-        return config.default
-      }
-    }).catch(err => {
-      console.error(err);
-    })
-  } else {
-    eodashCLiConfigFile = null
-  }
-
-  return {
-    base: options.base ?? config?.base,
-    port: Number(options.port ?? config?.[command]?.port),
-    host: options.host ?? config?.[/**@type {"dev"|"preview"} */(command)]?.host,
-    open: options.open ?? config?.[/**@type {"dev"|"preview"} */(command)]?.open,
-    cacheDir: options.cacheDir ?? config?.cacheDir,
-    entryPoint: options.entryPoint ?? config?.entryPoint,
-    outDir: options.outDir ?? config?.outDir,
-    publicDir: options.publicDir ?? config?.publicDir,
-    runtime: options.runtime ?? config?.runtime,
-    widgets: options.widgets ?? config?.widgets,
-    lib: options.lib ?? config?.lib
-  }
-}

package/core/App.vue

@@ -1,19 +0,0 @@
-<template>
-  <v-app>
-    <Suspense>
-      <!-- main content -->
-      <Dashboard />
-
-      <!-- loading state -->
-      <template #fallback>
-        <Loading />
-      </template>
-    </Suspense>
-  </v-app>
-</template>
-
-<script setup>
-import Loading from '@/components/Loading.vue';
-import Dashboard from '@/views/Dashboard.vue';
-
-</script>