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

package/README.md

@@ -1,35 +1,59 @@
+# @eodash/eodash [![Version](https://badgen.net/npm/v/@eodash/eodash)](https://www.npmjs.com/package/@eodash/eodash)
+
+A package for creating earth observation dashboards. To learn more about eodash ecosystem visit [eodash.org](https://eodash.org)
+
+## Usage
+
+Checkout the [documentation](https://eodash.github.io/eodash/get-started.html) for a detailed guide.
+
 ## Get Started
+
 Install all the required dependecies after cloning or downloading the repository using Node v18 or higher:
+
 ```bash
 npm run install
 ```
-Run the dev server and the app will open your default browser window to the landing page:
+
+Run the dev server:
+
 ```bash
 npm run dev
 ```
-To compile and minify for production:
+
+To compile and minify a demo instance:
+
 ```bash
 npm run build
 ```
+
 To preview the compiled production files :
+
 ```bash
 npm run preview
 ```
 
+To compile and minify a demo instance as a web component library:
+
+```bash
+npm run build -- --lib
+```
+
 ## Folder Structure
+
     .
-    ├── core               # CLI & Client source code 
+    ├── core               # CLI & Client source code
     ├── docs               # Documentation files
     ├── tests              # CLI & Client component tests folder
     ├── widgets            # Vue componenets as internal widgets.
     ├── public             # Statically served directory
     └── README.md
 
-
 ## Writing commits
+
 To ensure clear communication with the package consumers and enable machine-readable commits, we adhere to [The Conventional Commits](https://www.conventionalcommits.org/) specification that allows the generation of [semVer](https://semver.org) releases and associated change logs using [googleapis/release-please](https://github.com/googleapis/release-please).
 
 The most important prefixes you should have in mind are:
-* fix: which represents bug fixes, and correlates to a SemVer patch.
-* feat: which represents a new feature, and correlates to a SemVer minor.
-* feat!:, or fix!:, refactor!:, etc., which represent a breaking change (indicated by the !) and will result in a SemVer major.
+
+- fix: which represents bug fixes, and correlates to a SemVer patch.
+- feat: which represents a new feature, and correlates to a SemVer minor.
+- feat!:, or fix!:, refactor!:, etc., which represent a breaking change (indicated by the !) and will result in a SemVer major.

package/core/client/App.vue

@@ -1,7 +1,6 @@
 <template>
   <v-app>
     <Suspense>
-
       <Dashboard />
 
       <template #fallback>
@@ -12,16 +11,16 @@
 </template>
 
 <script setup>
-import Dashboard from '@/views/Dashboard.vue';
-import ErrorAlert from './components/ErrorAlert.vue';
-import { onErrorCaptured, ref } from 'vue';
+import Dashboard from "@/views/Dashboard.vue";
+import ErrorAlert from "./components/ErrorAlert.vue";
+import { onErrorCaptured, ref } from "vue";
 
-const error = ref('')
+const error = ref("");
 onErrorCaptured((e, inst, info) => {
   error.value = `
   ${e}.
   component: ${inst?.$.type.name}.
   info: ${info}.
-  `
-})
+  `;
+});
 </script>

package/core/client/SuspensedDashboard.ce.vue

@@ -10,82 +10,96 @@
   </v-app>
 </template>
 <script setup>
-import Dashboard from '@/views/Dashboard.vue';
-import { createApp, getCurrentInstance, onErrorCaptured, ref } from "vue"
-import { registerPlugins } from '@/plugins';
-import { eodashKey } from '@/utils/keys';
-import ErrorAlert from '@/components/ErrorAlert.vue';
+import Dashboard from "@/views/Dashboard.vue";
+import { createApp, getCurrentInstance, onErrorCaptured, ref } from "vue";
+import { registerPlugins } from "@/plugins";
+import { eodashKey } from "@/utils/keys";
+import ErrorAlert from "@/components/ErrorAlert.vue";
 
 defineProps({
   config: {
     type: String,
-  }
+  },
 });
 
-/** @type { import("vue").Ref<import("vuetify/components").VApp| null > } */
-const vAppRef = ref(null)
-const app = createApp({})
-registerPlugins(app)
+/** @type {import("vue").Ref<import("vuetify/components").VApp | null>} */
+const vAppRef = ref(null);
+const app = createApp({});
+registerPlugins(app);
+
+const inst = getCurrentInstance();
+
+Object.assign(inst?.appContext ?? {}, app._context);
 
-const inst = getCurrentInstance()
-//@ts-expect-error
-Object.assign(inst.appContext, app._context)
-//@ts-expect-error
-Object.assign(inst.provides, app._context.provides)
+//@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
+Object.assign(inst?.provides ?? {}, app._context.provides);
 
-/** @param {import("vue").Ref<HTMLElement | import("vue").ComponentPublicInstance>[]} [hiddenElements] */
+/**
+ * @param {import("vue").Ref<
+ *   HTMLElement | import("vue").ComponentPublicInstance
+ * >[]} [hiddenElements]
+ */
 function setStylesFromHead(hiddenElements) {
-  const eodashShadowRoot = vAppRef.value?.$el.getRootNode()
-  const styleSheet = new CSSStyleSheet()
-  const head = document.querySelector('head')
-  let stylesStr = ''
+  const eodashShadowRoot = vAppRef.value?.$el.getRootNode();
+  const styleSheet = new CSSStyleSheet();
+  const head = document.querySelector("head");
+  let stylesStr = "";
 
   Array.from(head?.children ?? []).forEach((child) => {
-    if (child.getAttribute('type') === 'text/css') {
-      stylesStr += `\n ${child.innerHTML}`
-      return
+    if (child.getAttribute("type") === "text/css") {
+      stylesStr += `\n ${child.innerHTML}`;
+      return;
     }
 
-    if (child.tagName == 'LINK' && child.getAttribute('rel')?.includes('stylesheet')) {
-      eodashShadowRoot?.appendChild(child.cloneNode(true))
+    if (
+      child.tagName == "LINK" &&
+      child.getAttribute("rel")?.includes("stylesheet")
+    ) {
+      eodashShadowRoot?.appendChild(child.cloneNode(true));
     }
   });
 
-  stylesStr += `\n * {
-      font-family:${
-        //@ts-expect-error
-        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.font?.family ?? 'Roboto'}
-      }
-      ${//@ts-expect-error
-        /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey]).brand.noLayout ?
-      `div.v-application__wrap {
+  stylesStr += `\n
+      ${
+        //@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
+        /** @type {import("@/types").Eodash} */ (inst?.provides[eodashKey])
+          ?.brand.noLayout
+          ? `div.v-application__wrap {
           min-height: fit-content;
-        }`: ""}
-        `
-  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"))
+        }`
+          : ""
+      }
+        `;
+  styleSheet.replaceSync(stylesStr.replaceAll(":root", ":host"));
   eodashShadowRoot?.adoptedStyleSheets.push(styleSheet);
 
-  //@ts-expect-error
-  if (hiddenElements && !(/** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand.noLayout)) {
-    hiddenElements.forEach(element => {
+  if (
+    hiddenElements &&
+    !(
+      //@ts-expect-error Property 'provides' does not exist on type 'ComponentInternalInstance'
+      /** @type {import("@/types").Eodash} */ (inst.provides[eodashKey])?.brand
+        .noLayout
+    )
+  ) {
+    hiddenElements.forEach((element) => {
       if (element.value) {
         if (element.value instanceof HTMLElement) {
-          element.value.style.opacity = "1"
+          element.value.style.opacity = "1";
         } else {
           /** @type {HTMLElement} */
-          (element.value.$el).style.opacity = "1"
+          (element.value.$el).style.opacity = "1";
         }
       }
-    })
+    });
   }
 }
 
-const error = ref('')
+const error = ref("");
 onErrorCaptured((e, comp, info) => {
   error.value = `
   ${e}.
   component: ${comp?.$.type.name}.
   info: ${info}.
-  `
-})
+  `;
+});
 </script>

package/core/client/asWebComponent.d.ts

@@ -1,18 +1,23 @@
 /** @group WebComponent */
-type EodashConstructor = import("vue").VueElementConstructor<import("vue").ExtractPropTypes<{ config: string }>>
+type EodashConstructor = import("vue").VueElementConstructor<
+  import("vue").ExtractPropTypes<{ config: string }>
+>;
 /**
- *  Eodash Web Component constructor
+ * Eodash Web Component constructor
+ *
  * @group WebComponent
  */
-export declare const Eodash: EodashConstructor
+export declare const Eodash: EodashConstructor;
 /**
  * Registers `eo-dash` as Custom Element in the window
+ *
  * @group WebComponent
  */
-export declare function register(): void
+export declare function register(): void;
 
 /**
  * Eodash store @see EodashStore
+ *
  * @group WebComponent
  */
-export declare const store: import("./types").EodashStore
+export declare const store: import("./types").EodashStore;

package/core/client/asWebComponent.js

@@ -1,12 +1,12 @@
-import SuspensedDashboard from './SuspensedDashboard.ce.vue';
-import { defineCustomElement } from 'vue'
+import SuspensedDashboard from "./SuspensedDashboard.ce.vue";
+import { defineCustomElement } from "vue";
 /** @type {import("./asWebComponent").EodashConstructor} */
-export const Eodash = defineCustomElement(SuspensedDashboard)
+export const Eodash = defineCustomElement(SuspensedDashboard);
 
 export function register() {
-  customElements.define('eo-dash', Eodash)
+  customElements.define("eo-dash", Eodash);
 }
 
-export { default as store } from '@/store'
+export { default as store } from "@/store";
 
-register()
+register();

package/core/client/components/DashboardLayout.vue

@@ -1,36 +1,78 @@
 <template>
   <v-main>
     <eox-layout :gap="eodash.template.gap ?? 2">
-      <eox-layout-item v-if="bgWidget.component" style="z-index: 0;" x="0" y="0" h="12" w="12">
+      <eox-layout-item
+        v-if="bgWidget.component"
+        class="bg-panel"
+        x="0"
+        y="0"
+        h="12"
+        w="12"
+      >
         <Suspense suspensible>
-          <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props" />
+          <component
+            id="bg-widget"
+            :is="bgWidget.component"
+            v-bind="bgWidget.props"
+          />
         </Suspense>
       </eox-layout-item>
-      <template v-for="(config, idx) in widgetsConfig" :key="idx">
-        <eox-layout-item v-if="importedWidgets[idx].value.component"
-          style="position: relative; overflow: visible; z-index: 1; border-radius: 0px; background: rgb(var(--v-theme-surface))"
-          :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
-
-          <Suspense suspensible>
-            <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
-              v-bind="importedWidgets[idx].value.props" />
-          </Suspense>
-        </eox-layout-item>
+      <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+        <Transition name="fade">
+          <eox-layout-item
+            v-if="importedWidget.value.component"
+            :key="importedWidget.value.id"
+            class="panel"
+            :h="importedWidget.value.layout.h"
+            :w="importedWidget.value.layout.w"
+            :x="importedWidget.value.layout.x"
+            :y="importedWidget.value.layout.y"
+          >
+            <Suspense suspensible>
+              <component
+                :key="importedWidget.value.id"
+                :is="importedWidget.value.component"
+                v-bind="importedWidget.value.props"
+              />
+            </Suspense>
+          </eox-layout-item>
+        </Transition>
       </template>
     </eox-layout>
   </v-main>
 </template>
 <script setup>
-import { eodashKey } from '@/utils/keys';
-import { inject } from 'vue';
-import { useDefineWidgets } from '@/composables/DefineWidgets'
-import '@eox/layout'
-
-const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import "@eox/layout";
 
-const [bgWidget] = useDefineWidgets([eodash.template?.background])
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
-const widgetsConfig = eodash.template?.widgets
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
 
-const importedWidgets = useDefineWidgets(widgetsConfig)
+const importedWidgets = useDefineWidgets(eodash.template?.widgets);
 </script>
+<style scoped>
+.panel {
+  position: relative;
+  overflow: visible;
+  z-index: 1;
+  border-radius: 0px;
+  background: rgb(var(--v-theme-surface));
+}
+
+.bg-panel {
+  z-index: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/core/client/components/DynamicWebComponent.vue

@@ -5,64 +5,64 @@
 </template>
 
 <script async setup>
-import { useSTAcStore } from '@/store/stac';
-import {
-  onUnmounted as whenUnMounted,
-  onMounted as whenMounted
-} from 'vue';
-import { ref } from 'vue';
+import { useSTAcStore } from "@/store/stac";
+import { onUnmounted as whenUnMounted, onMounted as whenMounted } from "vue";
+import { ref } from "vue";
 
-const props =   /** @type {import("@/types").WebComponentProps}  */(defineProps({
-  link: {
-    type: [String, Function],
-    required: true
-  },
-  constructorProp: String,
-  tagName: {
-    type: String,
-    required: true
-  },
-  properties: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  },
-  onMounted: Function,
-  onUnmounted: Function
-}))
+const props = /** @type {import("@/types").WebComponentProps} */ (
+  defineProps({
+    link: {
+      type: [String, Function],
+      required: true,
+    },
+    constructorProp: String,
+    tagName: {
+      type: String,
+      required: true,
+    },
+    properties: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    onMounted: Function,
+    onUnmounted: Function,
+  })
+);
 
+const getWebComponent = async () =>
+  typeof props.link === "string"
+    ? await import(/* @vite-ignore */ props.link)
+    : await props.link();
 
-const getWebComponent = async () => typeof props.link === 'string' ?
-  await import( /* @vite-ignore */props.link) : await props.link()
+const imported = !customElements.get(props.tagName)
+  ? await getWebComponent().catch((e) => {
+      console.error(e);
+    })
+  : null;
 
-const imported = !customElements.get(props.tagName) ? await getWebComponent().catch(e => {
-  console.error(e)
-}) : null
-
-const defined = customElements.get(props.tagName)
+const defined = customElements.get(props.tagName);
 
 // if the imported link doesn't define the custom tag provided
 if (!defined && props.constructorProp) {
-  const Constructor = imported[props.constructorProp]
-  customElements.define(props.tagName, Constructor)
+  const Constructor = imported[props.constructorProp];
+  customElements.define(props.tagName, Constructor);
 }
 
-const store = useSTAcStore()
+const store = useSTAcStore();
 
 /**
- *  @typedef {HTMLElement &
- * Record<string|number|symbol,unknown>} CustomElement
- * @type {import('vue').Ref<CustomElement|null>}
+ * @typedef {HTMLElement & Record<string | number | symbol, unknown>} CustomElement
+ * @type {import("vue").Ref<CustomElement | null>}
  */
-const elementRef = ref(null)
-
+const elementRef = ref(null);
 
 whenMounted(() => {
-  props.onMounted?.(elementRef.value, store)
-})
+  props.onMounted?.(elementRef.value, store);
+});
 
 whenUnMounted(() => {
-  props.onUnmounted?.(elementRef.value, store)
-})
+  props.onUnmounted?.(elementRef.value, store);
+});
 </script>

package/core/client/components/ErrorAlert.vue

@@ -1,19 +1,36 @@
 <template>
-  <v-alert v-if="error" translate="yes" location="start bottom" type="error" position="fixed" @click:close="error = ''"
-    variant="elevated" :icon="[mdiAlertCircle]" style="z-index: 10000;" closable :close-icon="[mdiClose]">
+  <v-alert
+    v-if="error"
+    translate="yes"
+    location="start bottom"
+    type="error"
+    position="fixed"
+    @click:close="error = ''"
+    variant="elevated"
+    :icon="[mdiAlertCircle]"
+    class="alert"
+    closable
+    :close-icon="[mdiClose]"
+  >
     {{ errorMessage }}
     <details is="animated-details">
-      <summary> Error </summary>
+      <summary>Error</summary>
       {{ error }}
     </details>
   </v-alert>
 </template>
 <script setup>
 import { eodashKey } from "@/utils/keys";
-import { mdiClose, mdiAlertCircle } from "@mdi/js"
+import { mdiClose, mdiAlertCircle } from "@mdi/js";
 import { inject } from "vue";
 
-const error = defineModel({ type: String, required: true })
-const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
-const errorMessage = eodash.brand.errorMessage ?? 'something went wrong, please try again later'
+const error = defineModel({ type: String, required: true });
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+const errorMessage =
+  eodash.brand.errorMessage ?? "something went wrong, please try again later";
 </script>
+<style scoped>
+.alert {
+  z-index: 10000;
+}
+</style>

package/core/client/components/Footer.vue

@@ -1,31 +1,50 @@
 <template>
-  <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app
-    class="d-flex justify-space-between">
-    <p class="pt-0" style="font-size: 0.8rem;">
+  <v-footer
+    ref="footer"
+    :height="mdAndDown ? '48px' : 'auto'"
+    color="secondary"
+    app
+    class="d-flex justify-space-between"
+  >
+    <p class="pt-0 footer-text">
       {{ eodash.brand.footerText ?? "" }}
     </p>
     <div>
-      <a href="https://github.com/eodash/eodash" class="text-white" target="_blank">eodash</a> by
+      <a
+        href="https://github.com/eodash/eodash"
+        class="text-white"
+        target="_blank"
+        >eodash</a
+      >
+      by
       <a href="https://eox.at" target="_blank" class="text-white">
-        <img :src='`data:image/svg+xml;base64,${base64Logo}`' height="11px">
+        <img :src="`data:image/svg+xml;base64,${base64Logo}`" height="11px" />
       </a>
     </div>
   </v-footer>
 </template>
 <script setup>
-import { eodashKey } from '@/utils/keys';
-import { ref } from 'vue';
-import { inject } from 'vue';
-import { useDisplay } from 'vuetify/lib/framework.mjs';
+import { eodashKey } from "@/utils/keys";
+import { ref } from "vue";
+import { inject } from "vue";
+import { useDisplay } from "vuetify/lib/framework.mjs";
 
 /**
  * Footer template ref
- * @type {import('vue').Ref<import('vuetify/lib/components/index.mjs').VFooter | null>}
+ *
+ * @type {import("vue").Ref<
+ *   import("vuetify/lib/components/index.mjs").VFooter | null
+ * >}
  */
-const footer = ref(null)
-const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+const footer = ref(null);
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
-const { mdAndDown } = useDisplay()
-const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`
-const base64Logo = window.btoa(eoxLogo)
+const { mdAndDown } = useDisplay();
+const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`;
+const base64Logo = window.btoa(eoxLogo);
 </script>
+<style scoped>
+.footer-text {
+  font-size: 0.8rem;
+}
+</style>

package/core/client/components/Header.vue

@@ -1,14 +1,19 @@
 <template>
   <v-app-bar color="primary">
     <v-app-bar-title>{{ title }}</v-app-bar-title>
-    <v-img class="mx-12" style="max-width: 140px;" :src="eodash.brand?.logo" />
+    <v-img class="mx-12 logo" :src="eodash.brand?.logo" />
   </v-app-bar>
 </template>
 <script setup>
-import { eodashKey } from '@/utils/keys';
-import { inject } from 'vue';
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
 
-const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
-const title = eodash.brand?.name
+const title = eodash.brand?.name;
 </script>
+<style scoped>
+.logo {
+  max-width: 140px;
+}
+</style>