@eodash/eodash 5.0.0-processing → 5.0.0-rc.1

package/dist/client/eo-dash.js

@@ -1,2 +1,2 @@
-export { aQ as Eodash, aR as register, aS as store } from './asWebComponent-DUUoR7MZ.js';
+export { aW as EodashConstructor, aX as register, aY as store } from './asWebComponent-D8bMMCEr.js';
 import 'vue';

package/dist/client/{forwardRefs-CZJhEAKW.js → forwardRefs-yw6tFXER.js}

@@ -1,5 +1,5 @@
 import { shallowRef, computed, watch } from 'vue';
-import { p as propsFactory, aC as getCurrentInstance } from './asWebComponent-DUUoR7MZ.js';
+import { p as propsFactory, aH as getCurrentInstance } from './asWebComponent-D8bMMCEr.js';
 
 class Box {
   constructor(_ref) {

package/dist/client/{index-DlIO7sJ3.js → index-CpK_Yaom.js}

@@ -1,5 +1,5 @@
 import { TransitionGroup, Transition, h, camelize } from 'vue';
-import { g as genericComponent, p as propsFactory } from './asWebComponent-DUUoR7MZ.js';
+import { g as genericComponent, p as propsFactory } from './asWebComponent-D8bMMCEr.js';
 
 // Utilities
 const makeTransitionProps = propsFactory({

package/dist/client/{transition-BiR8wMn1.js → transition-B2YwqAYJ.js}

@@ -1,5 +1,5 @@
 import { h, mergeProps, TransitionGroup, Transition } from 'vue';
-import { p as propsFactory } from './asWebComponent-DUUoR7MZ.js';
+import { p as propsFactory } from './asWebComponent-D8bMMCEr.js';
 
 // Utilities
 const makeTransitionProps = propsFactory({

package/dist/node/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import{createLogger as S,defineConfig as w,searchForWorkspaceRoot as W,mergeConfig as F,createServer as O,preview as U,build as N}from"vite";import{readFileSync as y,existsSync as u}from"fs";import t from"path";import{Command as E}from"commander";import{fileURLToPath as I}from"url";import{readFile as L,writeFile as T,rm as $,cp as A}from"fs/promises";import H from"@vitejs/plugin-vue";import M,{transformAssetUrls as J}from"vite-plugin-vuetify";const h=new E("eodash"),c=b(),s=b(process.cwd());JSON.parse(y(t.join(s,"package.json"),"utf-8"));const j=JSON.parse(y(t.join(c,"package.json"),"utf-8"))??{},R=["commander","vite","@vitejs/plugin-vue","vite-plugin-vuetify","axios"],V=Object.keys(j?.dependencies).filter(e=>!R.includes(e));h.version(j.version,"-v, --version","output the current version"),h.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);const i=await B(h.opts(),process.argv?.[2]),z=i.publicDir?t.resolve(s,i.publicDir):t.join(s,"./public"),f=t.join(s,"/src"),p=i.runtime?t.resolve(s,i.runtime):t.join(f,"./runtime.js"),m=i.entryPoint?t.resolve(s,i.entryPoint):t.join(f,"/main.js"),D=i.widgets?t.resolve(s,i.widgets):t.join(f,"widgets"),x=t.join(s,"/.eodash"),v=i.outDir?t.resolve(s,i.outDir):t.join(x,"/dist"),Y=i.cacheDir?t.resolve(s,i.cacheDir):t.join(x,"cache"),g=S(void 0,{prefix:"[eodash]"});async function B(e,a){let r=e.config?t.resolve(s,e.config):t.join(s,"eodash.config.js"),o={};return u(r)?o=await import(r).then(n=>n.default instanceof Function?n.default():n.default).catch(n=>{console.error(n)}):r=null,{base:e.base??o?.base,port:Number(e.port??o?.[a]?.port),host:e.host??o?.[a]?.host,open:e.open??o?.[a]?.open,cacheDir:e.cacheDir??o?.cacheDir,entryPoint:e.entryPoint??o?.entryPoint,outDir:e.outDir??o?.outDir,publicDir:e.publicDir??o?.publicDir,runtime:e.runtime??o?.runtime,widgets:e.widgets??o?.widgets,lib:e.lib??o?.lib,vite:o.vite}}function b(e=import.meta.dirname??t.dirname(I(import.meta.url))){if(e?.split("/").length)return u(t.resolve(e,"package.json"))?e:b(t.resolve(e,".."));throw new Error("no package root found from "+e)}const P=`
+import{createLogger as S,defineConfig as w,searchForWorkspaceRoot as W,mergeConfig as F,createServer as O,preview as U,build as N}from"vite";import{readFileSync as y,existsSync as u}from"fs";import t from"path";import{Command as E}from"commander";import{fileURLToPath as I}from"url";import{readFile as L,writeFile as T,rm as $,cp as A}from"fs/promises";import H from"@vitejs/plugin-vue";import M,{transformAssetUrls as J}from"vite-plugin-vuetify";const h=new E("eodash"),c=b(),s=b(process.cwd());JSON.parse(y(t.join(s,"package.json"),"utf-8"));const j=JSON.parse(y(t.join(c,"package.json"),"utf-8"))??{},R=["commander","vite","@vitejs/plugin-vue","vite-plugin-vuetify","axios"],V=Object.keys(j?.dependencies).filter(e=>!R.includes(e));h.version(j.version,"-v, --version","output the current version"),h.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);const i=await B(h.opts(),process.argv?.[2]),z=i.publicDir?t.resolve(s,i.publicDir):t.join(s,"./public"),m=t.join(s,"/src"),p=i.runtime?t.resolve(s,i.runtime):t.join(m,"./runtime.js"),f=i.entryPoint?t.resolve(s,i.entryPoint):t.join(m,"/main.js"),D=i.widgets?t.resolve(s,i.widgets):t.join(m,"widgets"),x=t.join(s,"/.eodash"),v=i.outDir?t.resolve(s,i.outDir):t.join(x,"/dist"),Y=i.cacheDir?t.resolve(s,i.cacheDir):t.join(x,"cache"),g=S(void 0,{prefix:"[eodash]"});async function B(e,a){let r=e.config?t.resolve(s,e.config):t.join(s,"eodash.config.js"),o={};return u(r)?o=await import(r).then(n=>n.default instanceof Function?n.default():n.default).catch(n=>{console.error(n)}):r=null,{base:e.base??o?.base,port:Number(e.port??o?.[a]?.port),host:e.host??o?.[a]?.host,open:e.open??o?.[a]?.open,cacheDir:e.cacheDir??o?.cacheDir,entryPoint:e.entryPoint??o?.entryPoint,outDir:e.outDir??o?.outDir,publicDir:e.publicDir??o?.publicDir,runtime:e.runtime??o?.runtime,widgets:e.widgets??o?.widgets,lib:e.lib??o?.lib,vite:o.vite}}function b(e=import.meta.dirname??t.dirname(I(import.meta.url))){if(e?.split("/").length)return u(t.resolve(e,"package.json"))?e:b(t.resolve(e,".."));throw new Error("no package root found from "+e)}const P=`
 <!DOCTYPE html>
 <html lang="en" style="overflow: hidden">
 
@@ -17,4 +17,4 @@ ${i.lib?`<eo-dash style="height:100dvh;"/>
 <script type="module" src="${t.resolve(`/@fs/${c}`,"core/client/render.js")}"><\/script>
 `}
 </body>
-</html>`,C=w(async({mode:e,command:a})=>({base:i.base??"",cacheDir:Y,plugins:[H({template:{transformAssetUrls:J,compilerOptions:{isCustomElement:r=>!r.includes("v-")&&r.includes("-")}}}),M({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:G}],customLogger:g,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":m,"user:widgets":D},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**"),m]},port:i.port??3e3,open:i.open,fs:{allow:[W(process.cwd())]},host:i.host},root:c,...e==="development"&&{optimizeDeps:{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs","loglevel","vega","vega-lite","vega-embed","@eox/map","@eox/map/src/plugins/advancedLayersAndSources","@eox/drawtools","@eox/jsonform","@eox/chart","@eox/layercontrol","@eox/itemfilter","@eox/timecontrol","@eox/stacinfo"],noDiscovery:!0}},publicDir:i.publicDir===!1?!1:z,build:{outDir:v,emptyOutDir:!0,target:"esnext",cssMinify:!0,...i.lib&&a==="build"&&{minify:!1,lib:{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},rollupOptions:{input:t.join(c,"core/client/asWebComponent.js"),external:r=>{const o=r.includes("vuetify")||r.endsWith(".css")||r.endsWith("styles"),n=V.some(l=>r.startsWith(l));return!o&&n}}}}})),k=w(async e=>i.vite?F(await C(e),i.vite):C(e));async function G(e){e.watcher.add([m,p,t.join(D,"**/*.vue")]);let a="";const r=g.info;return g.info=(o,n)=>{if(o.includes("core")){const l=o.split("/")[0].split(" ");l.pop();const d=l.join(" ")+" "+a.replace(s,"");return r(d,n)}return r(o,n)},e.watcher.on("change",async o=>{a=o,o===p&&e.ws.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,n,l)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){n.statusCode=200,n.setHeader("Content-Type","text/javascript"),u(p)&&await L(p).then(d=>{n.write(d)}),n.end();return}if(o.url?.endsWith(".html")){n.statusCode=200,n.setHeader("Content-Type","text/html");const d=await e.transformIndexHtml(o.url,P,o.originalUrl);n.end(d);return}l()})}}const K=async()=>{const e=await O(await k({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Q=async()=>{const e=async()=>{const a=await k({mode:"production",command:"build"});await N(a),u(p)&&await A(p,t.join(v,"config.js"),{recursive:!0}).catch(r=>{console.error(r)})};if(i.lib)await e();else{const a=t.join(c,"/index.html");await T(a,P).then(async()=>{await e(),await $(a).catch(()=>{console.error("failed to remove index.html")})})}};async function X(){(await U({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:v}})).printUrls()}const Z=process.argv?.[2];(async()=>{switch(Z){case"dev":await K();break;case"build":await Q();break;case"preview":await X();break;default:console.error("command not found");break}})();
+</html>`,C=w(async({mode:e,command:a})=>({base:i.base??"",cacheDir:Y,plugins:[H({template:{transformAssetUrls:J,compilerOptions:{isCustomElement:r=>!r.includes("v-")&&r.includes("-")}}}),M({autoImport:!0}),e==="development"&&{name:"inject-html",configureServer:G}],customLogger:g,define:{"process.env":{}},resolve:{alias:{"@":t.join(c,"core/client"),"^":t.join(c,"widgets"),"user:config":f,"user:widgets":D},extensions:[".js",".json",".jsx",".mjs",".ts",".tsx",".vue"]},server:{warmup:{clientFiles:[t.join(c,"core/client/**"),f]},port:i.port??3e3,open:i.open,fs:{allow:[W(process.cwd())]},host:i.host},root:c,...e==="development"&&{optimizeDeps:{include:["webfontloader","vuetify","vue","pinia","stac-js","urijs","loglevel","vega","vega-lite","vega-embed","@eox/map","@eox/map/src/plugins/advancedLayersAndSources","@eox/layercontrol","@eox/drawtools","@eox/chart","@eox/jsonform","@eox/layout","@eox/itemfilter","@eox/timecontrol","@eox/stacinfo","color-legend-element"],noDiscovery:!0}},publicDir:i.publicDir===!1?!1:z,build:{outDir:v,emptyOutDir:!0,target:"esnext",cssMinify:!0,...i.lib&&a==="build"&&{minify:!1,lib:{entry:t.join(c,"core/client/asWebComponent.js"),fileName:"eo-dash",formats:["es"],name:"@eodash/eodash"},rollupOptions:{input:t.join(c,"core/client/asWebComponent.js"),external:r=>{const o=r.includes("vuetify")||r.endsWith(".css")||r.endsWith("styles"),n=V.some(l=>r.startsWith(l));return!o&&n}}}}})),k=w(async e=>i.vite?F(await C(e),i.vite):C(e));async function G(e){e.watcher.add([f,p,t.join(D,"**/*.vue")]);let a="";const r=g.info;return g.info=(o,n)=>{if(o.includes("core")){const l=o.split("/")[0].split(" ");l.pop();const d=l.join(" ")+" "+a.replace(s,"");return r(d,n)}return r(o,n)},e.watcher.on("change",async o=>{a=o,o===p&&e.ws.send({type:"full-reload",path:o})}),()=>{e.middlewares.use(async(o,n,l)=>{if(o.originalUrl==="/@fs/config.js"||o.originalUrl==="/config.js"){n.statusCode=200,n.setHeader("Content-Type","text/javascript"),u(p)&&await L(p).then(d=>{n.write(d)}),n.end();return}if(o.url?.endsWith(".html")){n.statusCode=200,n.setHeader("Content-Type","text/html");const d=await e.transformIndexHtml(o.url,P,o.originalUrl);n.end(d);return}l()})}}const K=async()=>{const e=await O(await k({mode:"development",command:"serve"}));await e.listen(),e.printUrls(),e.bindCLIShortcuts({print:!0})},Q=async()=>{const e=async()=>{const a=await k({mode:"production",command:"build"});await N(a),u(p)&&await A(p,t.join(v,"config.js"),{recursive:!0}).catch(r=>{console.error(r)})};if(i.lib)await e();else{const a=t.join(c,"/index.html");await T(a,P).then(async()=>{await e(),await $(a).catch(()=>{console.error("failed to remove index.html")})})}};async function X(){(await U({root:s,base:i.base??"",preview:{port:isNaN(i.port)?8080:i.port,open:i.open,host:i.host},build:{outDir:v}})).printUrls()}const Z=process.argv?.[2];(async()=>{switch(Z){case"dev":await K();break;case"build":await Q();break;case"preview":await X();break;default:console.error("command not found");break}})();

package/package.json

@@ -1,24 +1,35 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-processing",
+  "version": "5.0.0-rc.1",
   "type": "module",
+  "types": "./dist/types/core/client/types.d.ts",
   "files": [
     "core/client",
     "widgets",
     "dist"
   ],
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/core/client/types.d.ts"
+      ],
+      "webcomponent": [
+        "./dist/types/core/client/asWebComponent.d.ts"
+      ],
+      "config": [
+        "./dist/node/types.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
-      "types": "./dist/types/core/client/types.d.ts",
       "default": "./core/client/main.js"
     },
     "./webcomponent": {
-      "types": "./dist/types/core/client/asWebComponent.d.ts",
       "default": "./dist/client/eo-dash.js"
     },
-    "./webcomponent.css": "./dist/client/style.css",
+    "./webcomponent.css": "./dist/client/eo-dash.css",
     "./config": {
-      "types": "./dist/node/types.d.ts",
       "default": "./dist/node/main.js"
     }
   },
@@ -32,7 +43,7 @@
     "build": "npx eodash build --entryPoint core/client/eodash.js",
     "build:lib": "npx eodash build --entryPoint core/client/eodash.js --lib --outDir dist/client",
     "build:cli": "rollup -c",
-    "build:types": "vue-tsc --declaration  --emitDeclarationOnly && cp -rf ./core/client/types.d.ts ./dist/types/core/client/types.d.ts && tsc-alias",
+    "build:types": "vue-tsc --declaration  --emitDeclarationOnly && tsc-alias",
     "check": "vue-tsc --noEmit --skipLibCheck && eslint .",
     "format": "prettier . --write --ignore-unknown",
     "preview": "npx eodash preview",
@@ -49,61 +60,61 @@
   },
   "dependencies": {
     "@eox/chart": "^0.3.0",
-    "@eox/drawtools": "^0.13.1",
-    "@eox/itemfilter": "^1.6.2",
-    "@eox/jsonform": "^0.11.0",
-    "@eox/layercontrol": "^0.26.0",
+    "@eox/drawtools": "^0.13.2",
+    "@eox/itemfilter": "^1.7.0",
+    "@eox/jsonform": "0.11.3-dev.1734708668.0",
+    "@eox/layercontrol": "^0.28.0",
     "@eox/layout": "^0.3.0",
-    "@eox/map": "^1.17.0",
+    "@eox/map": "^1.19.0",
     "@eox/stacinfo": "^0.6.0",
-    "@eox/timecontrol": "^0.10.0",
+    "@eox/timecontrol": "^0.12.0",
     "@mdi/js": "^7.4.47",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vueuse/core": "^11.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vueuse/core": "^12.0.0",
     "animated-details": "gist:2912bb049fa906671807415eb0e87188",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "axios-cache-interceptor": "^1.6.2",
-    "commander": "^12.1.0",
     "color-legend-element": "^1.3.0",
+    "commander": "^12.1.0",
     "core-js": "^3.39.0",
     "loglevel": "^1.9.2",
-    "pinia": "^2.2.6",
-    "sass": "^1.80.6",
+    "mustache": "^4.2.0",
+    "pinia": "^2.3.0",
+    "sass": "^1.83.0",
     "stac-js": "^0.0.9",
     "v-calendar": "3.0.0",
     "vega": "^5.30.0",
-    "vega-embed": "^6.28.0",
-    "vega-lite": "^5.21.0",
-    "vite": "^5.4.10",
+    "vega-embed": "^6.29.0",
+    "vega-lite": "^5.23.0",
+    "vite": "^6.0.5",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "^3.5.0",
-    "vuetify": "^3.7.4",
+    "vuetify": "^3.7.6",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/types": "^7.26.0",
+    "@babel/types": "^7.26.3",
     "@eox/eslint-config": "^2.0.0",
     "@pinia/testing": "^0.1.7",
     "@types/mustache": "^4.2.5",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.10.2",
     "@types/openlayers": "^4.6.23",
     "@types/webfontloader": "^1.6.38",
-    "cypress": "^13.15.2",
-    "eslint": "^9.14.0",
-    "eslint-plugin-vue": "^9.30.0",
-    "mustache": "^4.2.0",
-    "prettier": "^3.3.3",
-    "rollup": "^4.24.4",
+    "cypress": "^13.17.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.2",
+    "rollup": "^4.28.1",
     "stac-ts": "^1.0.4",
     "terminate": "^2.8.0",
-    "typedoc": "^0.27.0",
-    "typedoc-plugin-markdown": "^4.2.10",
-    "typedoc-plugin-vue": "^1.2.0",
-    "typedoc-vitepress-theme": "^1.0.2",
-    "typescript": "^5.6.3",
-    "unplugin-fonts": "^1.1.1",
-    "vitepress": "^1.5.0",
     "tsc-alias": "^1.8.10",
+    "typedoc": "^0.27.5",
+    "typedoc-plugin-markdown": "^4.3.3",
+    "typedoc-plugin-vue": "^1.3.0",
+    "typedoc-vitepress-theme": "^1.1.1",
+    "typescript": "^5.7.2",
+    "unplugin-fonts": "^1.3.1",
+    "vitepress": "^1.5.0",
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.22"
   },

package/widgets/EodashDatePicker.vue

@@ -1,57 +1,59 @@
 <template>
-  <VCDatePicker
-    v-model.number="currentDate"
-    :masks="masks"
-    :attributes="attributes"
-  >
-    <template #default="{ inputValue, inputEvents }">
-      <div
-        class="flex rounded-lg border border-gray-300 dark:border-gray-600"
-        style="margin: 2px"
-      >
-        <input
-          :value="inputValue"
-          v-on="inputEvents"
-          style="margin: 1px"
-          class="flex-grow px-1 py-1 bg-white dark:bg-gray-700"
-        />
-      </div>
-    </template>
-    <template #footer v-if="hintText">
-      <div class="w-full px-4 pb-3" style="font-size: 12px">
-        <span v-html="hintText" />
-      </div>
-    </template>
-  </VCDatePicker>
-  <v-row align="center" justify="center" style="margin-top: 6px">
-    <v-btn
-      style="padding: 0px; margin-right: 4px"
-      density="compact"
-      v-tooltip:bottom="'Set date to oldest available dataset'"
-      @click="jumpDate(true)"
+  <div ref="rootRef" class="datePicker">
+    <VCDatePicker
+      v-model.number="currentDate"
+      :attributes="attributes"
+      :masks="masks"
+      expanded
+      class="bg-surface overflow-auto"
+      style="background-color: transparent; max-width: 100%"
     >
-      <v-icon :icon="[mdiRayEndArrow]" />
-    </v-btn>
-    <v-btn
-      style="padding: 0px; margin-left: 4px"
-      density="compact"
-      v-tooltip:bottom="'Set date to latest available dataset'"
-      @click="jumpDate(false)"
-    >
-      <v-icon :icon="[mdiRayStartArrow]" />
-    </v-btn>
-  </v-row>
+      <template #footer>
+        <div class="d-flex flex-row align-center justify-center pb-1">
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            v-tooltip:bottom="'Set date to oldest available dataset'"
+            variant="text"
+            @click="jumpDate(true)"
+          >
+            <v-icon :icon="[mdiRayEndArrow]" />
+          </v-btn>
+          <div
+            class="flex rounded-lg border border-gray-300 dark:border-gray-600"
+            style="margin: 2px"
+          >
+            <input
+              v-if="!hideInputField"
+              :value="new Date(currentDate).toLocaleDateString()"
+              style="margin: 1px"
+              class="flex-grow px-1 py-1 dark:bg-gray-700"
+            />
+          </div>
+          <v-btn
+            v-if="!hideArrows"
+            density="compact"
+            variant="text"
+            v-tooltip:bottom="'Set date to latest available dataset'"
+            @click="jumpDate(false)"
+          >
+            <v-icon :icon="[mdiRayStartArrow]" />
+          </v-btn>
+        </div>
+      </template>
+    </VCDatePicker>
+  </div>
 </template>
 <script setup>
 import { DatePicker as VCDatePicker } from "v-calendar";
 import "v-calendar/style.css";
-import { watch, reactive, ref, customRef, onMounted } from "vue";
-import { storeToRefs } from "pinia";
+import { watch, reactive, ref, customRef, toRef } from "vue";
 import { useSTAcStore } from "@/store/stac";
-import { datetime } from "@/store/States";
+import { datetime } from "@/store/states";
 import { mdiRayStartArrow, mdiRayEndArrow } from "@mdi/js";
 import { eodashCollections } from "@/utils/states";
 import log from "loglevel";
+import { makePanelTransparent } from "@/composables";
 
 // holds the number value of the datetime
 const currentDate = customRef((track, trigger) => ({
@@ -76,6 +78,14 @@ defineProps({
     type: String,
     default: null,
   },
+  hideArrows: {
+    type: Boolean,
+    default: false,
+  },
+  hideInputField: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -90,7 +100,10 @@ defineProps({
  */
 const attributes = reactive([]);
 
-const { selectedStac } = storeToRefs(useSTAcStore());
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+
+const selectedStac = toRef(useSTAcStore(), "selectedStac");
 
 watch(
   selectedStac,
@@ -169,21 +182,22 @@ function jumpDate(reverse) {
   }
 }
 
-// fixes calendar dispalcement on lib mode
-const transform = ref("");
-onMounted(() => {
-  transform.value = document.querySelector("eo-dash")
-    ? "translate3d(50px,-80px,0)"
-    : "translate3d(0px,-80px,0)";
-});
+makePanelTransparent(rootRef);
 </script>
 <style>
+@media (min-width: 960px) {
+  .datePicker {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
 .vc-day-content {
   color: #5e5e5e;
   font-weight: normal;
 }
 
-.vc-popover-content-wrapper {
-  transform: v-bind("transform") !important;
+.vc-highlight-content-solid {
+  color: white !important;
 }
 </style>

package/widgets/EodashItemFilter.vue

@@ -3,8 +3,9 @@
     class="fill-height"
     v-bind="config"
     ref="eoxItemFilter"
-    style="overflow: auto"
+    style="overflow: auto; --background-color: none"
     @select="onSelect"
+    .items='store.stac?.filter((item) => item.rel === "child")'
   >
     <h4 slot="filterstitle" style="margin: 14px 8px">{{ filtersTitle }}</h4>
 
@@ -14,7 +15,11 @@
 <script setup>
 import { useSTAcStore } from "@/store/stac";
 import "@eox/itemfilter";
-import { onMounted, ref } from "vue";
+
+import { computed, ref } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
+
+const emit = defineEmits(["select"]);
 
 const props = defineProps({
   enableCompare: {
@@ -27,16 +32,31 @@ const props = defineProps({
   },
   resultsTitle: {
     type: String,
-    default: "",
+    default: "Results",
   },
   titleProperty: {
     type: String,
     default: "title",
   },
-
   aggregateResults: {
     type: String,
-    default: "themes",
+    default: undefined,
+  },
+  imageProperty: {
+    type: String,
+    default: "",
+  },
+  subTitleProperty: {
+    type: String,
+    default: "",
+  },
+  resultType: {
+    type: String,
+    default: "",
+  },
+  cssVars: {
+    type: [String, Object],
+    default: "",
   },
   enableHighlighting: { type: Boolean, default: true },
   expandMultipleFilters: { type: Boolean, default: true },
@@ -63,119 +83,54 @@ const props = defineProps({
     ],
   },
 });
-/** @param {any} evt*/
-const onSelect = async (evt) => {
-  // reset the style of all compare buttons
-  eoxItemFilter.value?.shadowRoot
-    ?.querySelectorAll(".compareMapButton")
-    .forEach((res) => res.setAttribute("style", defaultStyle));
-  const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
+/**
+ * @param {import("stac-ts").StacLink} item
+ */
+const selectIndicator = async (item) => {
   if (item) {
     // Reset compare stac to empty
     store.resetSelectedCompareSTAC();
     await store.loadSelectedSTAC(item.href);
+    emit("select", item);
   } else {
-    // TODO: it is possible to unselect items now
-    // we need to consider how to reset to "default"
-    // if that happens here
+    store.selectedStac = null;
   }
 };
-const config = {
+/**
+ * @param {import("stac-ts").StacLink} item
+ */
+const selectCompareIndicator = (item) => {
+  if (item) {
+    store.loadSelectedCompareSTAC(item.href);
+    emit("select", item);
+  } else {
+    // TODO
+  }
+};
+/** @param {any} evt*/
+const onSelect = async (evt) => {
+  const item = /** @type {import('stac-ts').StacLink} */ evt.detail;
+  if (props.enableCompare) {
+    selectCompareIndicator(item);
+  } else {
+    selectIndicator(item);
+  }
+};
+const { smAndDown } = useDisplay();
+const config = computed(() => ({
   titleProperty: props.titleProperty,
-  filterProperties: props.filterProperties,
-  aggregateResults: props.aggregateResults,
   enableHighlighting: props.enableHighlighting,
   expandMultipleFilters: props.expandMultipleFilters,
   expandMultipleResults: props.expandMultipleResults,
-};
+  subTitleProperty: props.subTitleProperty,
+  resultType: props.resultType,
+  imageProperty: props.imageProperty,
+  aggregateResults: props.aggregateResults,
+  style: props.cssVars,
+  filterProperties: smAndDown.value ? "" : props.filterProperties,
+}));
 /** @type {import("vue").Ref<HTMLElement & Record<string,any> | null>} */
 const eoxItemFilter = ref(null);
 
 const store = useSTAcStore();
-
-const defaultStyle =
-  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:white;";
-const highlightStyle =
-  "float:right; height:15px; padding:4px;  margin-top:-4px; background-color:#9bcaeb;";
-
-const injectCompareButtons = () => {
-  setTimeout(() => {
-    /** @type {any} */
-    (eoxItemFilter.value)?.shadowRoot
-      .querySelectorAll("details>summary")
-      .forEach((/** @type {HTMLElement} */ el) =>
-        el.setAttribute("style", "width: 100%"),
-      );
-    /** @type {any} */
-    (eoxItemFilter.value)?.shadowRoot
-      .querySelectorAll("details>div li")
-      .forEach((/** @type {HTMLElement} */ res) => {
-        let compareButton = document.createElement("button");
-        compareButton.className = "compareMapButton";
-        compareButton.dataset.id = res.children[0].id;
-
-        compareButton.onclick = async (
-          /** {Event & { currentTarget: HTMLElement }} */ evt,
-        ) => {
-          // reset the style of all compare buttons
-          eoxItemFilter.value?.shadowRoot
-            ?.querySelectorAll(".compareMapButton")
-            .forEach((res) => {
-              res.setAttribute("style", defaultStyle);
-            });
-          const currentTarget = /** @type {HTMLElement}*/ (evt.currentTarget);
-          currentTarget?.setAttribute("style", highlightStyle);
-          const selected = eoxItemFilter.value?.items.find(
-            (/** @type {HTMLElement} */ it) =>
-              it.id === currentTarget?.dataset.id,
-          );
-          if (selected) {
-            await store.loadSelectedCompareSTAC(selected.href);
-          }
-        };
-        compareButton.setAttribute("style", defaultStyle);
-        const svgIcon = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "svg",
-        );
-        const iconPath = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "path",
-        );
-        svgIcon.setAttribute("width", "15");
-        svgIcon.setAttribute("height", "15");
-        svgIcon.setAttribute("viewBox", "0 0 24 24");
-        iconPath.setAttribute(
-          "d",
-          "M19,3H14V5H19V18L14,12V21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,18H5L10,12M10,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H10V23H12V1H10V3Z",
-        );
-        svgIcon.appendChild(iconPath);
-        compareButton.appendChild(svgIcon);
-        res.append(compareButton);
-      });
-  }, 100);
-};
-
-onMounted(() => {
-  const style = document.createElement("style");
-  style.innerHTML = `
-    section {
-      margin: 0 !important;
-    }
-    section button#filter-reset {
-      padding: 0 8px;
-      top: 8px;
-      right: 8px;
-    }
-  `;
-  eoxItemFilter.value?.shadowRoot?.appendChild(style);
-
-  // Only list child elements in list
-  const items = store.stac?.filter((item) => item.rel === "child");
-  /** @type {any} */
-  (eoxItemFilter.value).items = items;
-  if (props.enableCompare) {
-    injectCompareButtons();
-  }
-});
 </script>

package/widgets/EodashLayerControl.vue

@@ -2,24 +2,26 @@
   <span class="d-flex flex-column fill-height overflow-auto">
     <eox-layercontrol
       v-if="showControls"
+      v-bind="config"
       :for="mapElement"
-      .tools="['datetime', 'info', 'config', 'legend', 'opacity']"
       @datetime:updated="debouncedHandleDateTime"
       class="fill-height"
       toolsAsList="true"
+      style="--eox-background-color: transparent"
       ref="eoxLayercontrol"
     />
   </span>
 </template>
 <script setup>
 import "@eox/layercontrol";
+
 import "@eox/jsonform";
 import "@eox/timecontrol";
 import "color-legend-element";
 
 import { computed, ref } from "vue";
-import { mapEl, mapCompareEl } from "@/store/States";
-import { getColFromLayer } from "@/utils/helpers";
+import { mapEl, mapCompareEl } from "@/store/states";
+import { getColFromLayer } from "@/eodashSTAC/helpers";
 import { eodashCollections, eodashCompareCollections } from "@/utils/states";
 import { storeToRefs } from "pinia";
 import { useSTAcStore } from "@/store/stac";
@@ -29,10 +31,21 @@ const props = defineProps({
     type: String,
     default: "first",
   },
+  tools: {
+    type: Array,
+    default: () => ["datetime", "info", "config", "legend", "opacity"],
+  },
+  cssVars: {
+    type: Object,
+  },
 });
 
-const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
+const config = {
+  tools: props.tools,
+  style: props.cssVars,
+};
 
+const { selectedCompareStac, selectedStac } = storeToRefs(useSTAcStore());
 const showControls = computed(() => {
   if (props.map === "second") {
     return mapCompareEl.value !== null && selectedCompareStac.value !== null;