@eodash/eodash 5.0.0-alpha.2.6 → 5.0.0-alpha.2.7

package/dist/client/{transition-DCePIwYR.js → transition-C8le0YwQ.js}

@@ -1,4 +1,4 @@
-import { p as m, aw as d, d as l, av as u, ab as b } from "./asWebComponent-CpQUVi2N.js";
+import { p as m, ay as b, d, b9 as l, ab as u } from "./asWebComponent-DeaU3QoK.js";
 const j = m({
   transition: {
     type: [Boolean, String, Object],
@@ -15,10 +15,10 @@ const j = m({
     group: r,
     ...a
   } = o, {
-    component: i = r ? u : b,
+    component: i = r ? l : u,
     ...p
   } = typeof t == "object" ? t : {};
-  return d(i, l(typeof t == "string" ? {
+  return b(i, d(typeof t == "string" ? {
     name: n ? "" : t
   } : p, typeof t == "string" ? {} : Object.fromEntries(Object.entries({
     disabled: n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.2.6",
+  "version": "5.0.0-alpha.2.7",
   "type": "module",
   "types": "./core/client/types.d.ts",
   "files": [
@@ -74,7 +74,7 @@
     "@types/node": "latest",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^13.6.6",
+    "cypress": "^13.13.0",
     "eslint": "^9.4.0",
     "eslint-plugin-vue": "^9.26.0",
     "prettier": "^3.3.2",

package/widgets/EodashMapBtns.vue

@@ -0,0 +1,34 @@
+<template>
+  <div ref="rootRef" class="d-flex align-end justify-end my-3 pa-2">
+    <v-btn
+      class="map-btn"
+      color="primary"
+      :icon="[mdiMapPlus]"
+      @click="showMapState = !showMapState"
+    />
+    <ExportState :header="header" :code="code" v-model="showMapState" />
+  </div>
+</template>
+<script setup>
+import { makePanelTransparent } from "@/composables";
+import { mdiMapPlus } from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { ref } from "vue";
+const header = "Export Map";
+const code = `<h2>
+           code example
+         </h2>`;
+
+const showMapState = ref(false);
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+makePanelTransparent(rootRef);
+</script>
+<style scoped>
+.map-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 25%;
+}
+</style>

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(props.for) }}
+        </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 } from "@/store/Actions";
+import { mapPosition } from "@/store/States";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  for: {
+    type: String,
+    default: "eox-map",
+  },
+});
+
+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(getLayers(props?.for)), 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(getLayers(props?.for))}' ${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(getLayers(props?.for))}' ${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>