npm - @vcmap/ui - Versions diffs - 5.2.4 → 5.3.1 - Mend

@vcmap/ui 5.2.4 → 5.3.1

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 (55) hide show

package/config/base.config.json +54 -0
package/config/www.config.json +4 -0
package/dist/assets/cesium.js +1 -1
package/dist/assets/{core.83d353.js → core.380ce3.js} +3498 -3347
package/dist/assets/core.js +1 -1
package/dist/assets/index-b466fb2c.js +1 -0
package/dist/assets/ol.js +1 -1
package/dist/assets/{ui.300809.css → ui.cf282c.css} +1 -1
package/dist/assets/{ui.300809.js → ui.cf282c.js} +7275 -6745
package/dist/assets/ui.js +1 -1
package/dist/assets/vue.js +2 -2
package/dist/assets/{vuetify.b3de7a.js → vuetify.12f757.js} +1 -1
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -1
package/index.d.ts +4 -0
package/index.js +2 -0
package/package.json +2 -2
package/plugins/package.json +2 -1
package/src/application/VcsApp.vue +162 -1
package/src/application/VcsApp.vue.d.ts +15 -0
package/src/application/VcsCustomScreen.vue +45 -0
package/src/application/VcsCustomScreen.vue.d.ts +15 -0
package/src/application/VcsSettings.vue +67 -0
package/src/application/VcsSettings.vue.d.ts +2 -0
package/src/application/VcsSplashScreen.vue +140 -0
package/src/application/VcsSplashScreen.vue.d.ts +36 -0
package/src/application/markdownHelper.js +19 -1
package/src/components/icons/+all.js +4 -0
package/src/components/icons/CrosshairIcon.vue +33 -0
package/src/components/icons/CrosshairIcon.vue.d.ts +2 -0
package/src/i18n/de.d.ts +43 -18
package/src/i18n/de.js +25 -0
package/src/i18n/en.d.ts +43 -18
package/src/i18n/en.js +25 -0
package/src/navigation/MapNavigation.vue +74 -4
package/src/navigation/MapNavigation.vue.d.ts +36 -0
package/src/navigation/ObliqueRotation.vue +8 -0
package/src/navigation/ObliqueRotation.vue.d.ts +13 -1
package/src/navigation/TiltSlider.vue +8 -1
package/src/navigation/TiltSlider.vue.d.ts +13 -1
package/src/navigation/VcsCompass.vue +7 -1
package/src/navigation/VcsCompass.vue.d.ts +11 -0
package/src/navigation/VcsZoomButton.vue +10 -0
package/src/navigation/VcsZoomButton.vue.d.ts +15 -1
package/src/navigation/locatorHelper.d.ts +9 -0
package/src/navigation/locatorHelper.js +294 -0
package/src/navigation/overviewMap.d.ts +21 -20
package/src/navigation/overviewMap.js +51 -39
package/src/uiConfig.d.ts +67 -0
package/src/uiConfig.js +30 -0
package/dist/assets/index-69733149.js +0 -1
/package/dist/assets/{cesium.162cd3.js → cesium.86b93e.js} +0 -0
/package/dist/assets/{ol.7cdede.js → ol.d0972a.js} +0 -0
/package/dist/assets/{vue.27f25a.js → vue.89f1c0.js} +0 -0
/package/dist/assets/{vuetify.b3de7a.css → vuetify.12f757.css} +0 -0

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~300809~~.js";
1	+ export * from "./ui.cf282c.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.27f25a.js";
-import { default as f } from "./vue.27f25a.js";
+export * from "./vue.89f1c0.js";
+import { default as f } from "./vue.89f1c0.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.b3de7a.js → vuetify.12f757.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.b3de7a.css');import v from "./vue.27f25a.js";
+} await loadCss('./assets/vuetify.12f757.css');import v from "./vue.89f1c0.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.b3de7a.js";
-import { default as f } from "./vuetify.b3de7a.js";
+export * from "./vuetify.12f757.js";
+import { default as f } from "./vuetify.12f757.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -95,7 +95,7 @@
         }
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-69733149.js"></script>
+    <script type="module" crossorigin src="./assets/index-b466fb2c.js"></script>
   </head>
   <body style="height: 100vh; margin: 0;">
     <noscript>

package/index.d.ts CHANGED Viewed

@@ -206,6 +206,10 @@ export { default as FileDrop } from "./src/components/import/FileDrop.vue";
 export type * from "./src/components/import/FileDrop.vue.d.ts";
 export { default as ImportComponent } from "./src/components/import/ImportComponent.vue";
 export type * from "./src/components/import/ImportComponent.vue.d.ts";
+export { default as VcsSplashScreen } from "./src/application/VcsSplashScreen.vue";
+export type * from "./src/application/VcsSplashScreen.vue.d.ts";
+export { default as VcsCustomScreen } from "./src/application/VcsCustomScreen.vue";
+export type * from "./src/application/VcsCustomScreen.vue.d.ts";
 export { createMapButtonAction, createToggleAction, createOverviewMapAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction } from "./src/actions/actionHelper.js";
 export type * from "./src/actions/actionHelper.d.ts";
 export { parseAndSanitizeMarkdown, replaceAttributes } from "./src/application/markdownHelper.js";

package/index.js CHANGED Viewed

@@ -322,3 +322,5 @@ export { default as VcsFeatureStyleComponent } from './src/components/style/VcsF
 export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';
 export { default as FileDrop } from './src/components/import/FileDrop.vue';
 export { default as ImportComponent } from './src/components/import/ImportComponent.vue';
+export { default as VcsSplashScreen } from './src/application/VcsSplashScreen.vue';
+export { default as VcsCustomScreen } from './src/application/VcsCustomScreen.vue';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.2.4",
+  "version": "5.3.1",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -53,7 +53,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^4.0.3",
-    "@vcmap/core": "^5.2.0",
+    "@vcmap/core": "^5.3.0",
     "ol": "^7.5.2",
     "vue": "~2.7.3",
     "vuetify": "~2.6.7"

package/plugins/package.json CHANGED Viewed

@@ -18,7 +18,8 @@
     "@vcmap/height-profile": "^1.0.0",
     "@vcmap/search-wfs": "^1.0.0",
     "@vcmap/search-esri": "^1.0.0",
-    "@vcmap/link-button": "^1.0.0"
+    "@vcmap/link-button": "^1.0.0",
+    "@vcmap/walk": "^1.0.2"
   },
   "optionalDependencies": {
     "@vcmap/planning": "^5.2.0"

package/src/application/VcsApp.vue CHANGED Viewed

@@ -1,5 +1,11 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
+    <VcsSplashScreen
+      v-if="splashScreen"
+      v-model="splashScreenRef"
+      :options="splashScreen"
+      :window-id="'splashScreen'"
+    ></VcsSplashScreen>
     <VcsNavbar />
     <VcsContainer :attribution-action="attributionAction" />
     <v-footer
@@ -46,6 +52,7 @@
     onMounted,
     onUnmounted,
     provide,
+    ref,
     watch,
   } from 'vue';
   import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
@@ -68,6 +75,8 @@
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
+  import VcsSplashScreen from './VcsSplashScreen.vue';
+  import VcsCustomScreen from './VcsCustomScreen.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
@@ -254,6 +263,109 @@
     };
   }
+  /**
+   * This helper function will add a customScreen action button to the apps NavbarManager MENU location.
+   * @param {import("../vcsUiApp.js").default} app
+   * @returns {function():void}
+   */
+  function setupCustomScreen(app) {
+    function setupCustomScreenAction() {
+      const { customScreen } = app.uiConfig.config.value;
+      const { action: customScreenAction, destroy: customScreenDestroy } =
+        createToggleAction(
+          {
+            name: customScreen.name || 'components.customScreen.name',
+            icon: customScreen.icon || 'mdi-information',
+            title: customScreen.title,
+          },
+          {
+            id: 'customScreenId',
+            component: VcsCustomScreen,
+            state: {
+              headerIcon: customScreen.icon,
+              headerTitle: customScreen.name,
+            },
+            slot: WindowSlot.DETACHED,
+            position: customScreen.windowPosition,
+            props: {
+              content: customScreen.content,
+            },
+          },
+          app.windowManager,
+          vcsAppSymbol,
+        );
+      app.navbarManager.add(
+        {
+          id: 'customScreenToggle',
+          action: customScreenAction,
+        },
+        vcsAppSymbol,
+        ButtonLocation.MENU,
+      );
+      return () => {
+        customScreenDestroy();
+      };
+    }
+    let customScreen;
+    const stopCustomScreenWatcher = watch(
+      () => app.uiConfig.config.value.customScreen,
+      (newCustomScreen) => {
+        if (app.navbarManager.has('customScreenToggle')) {
+          app.navbarManager.remove('customScreenToggle');
+        }
+        if (newCustomScreen) {
+          customScreen = setupCustomScreenAction();
+        }
+      },
+      { immediate: true },
+    );
+    return () => {
+      if (customScreen) {
+        customScreen();
+      }
+      stopCustomScreenWatcher();
+    };
+  }
+  /**
+   * This helper function will add a Splash Screen action button to the apps NavbarManager MENU location.
+   * @param {import("../vcsUiApp.js").default} app
+   * @param {import("vue").Ref} splashScreenRef
+   * @returns {WatchStopHandle}
+   */
+  function setupSplashScreen(app, splashScreenRef) {
+    function setupSplashScreenAction() {
+      const { splashScreen } = app.uiConfig.config.value;
+      const splashScreenAction = {
+        name: splashScreen.name || 'components.splashScreen.name',
+        icon: splashScreen.icon || 'mdi-alert-box',
+        title: splashScreen.title,
+        callback() {
+          splashScreenRef.value = !splashScreenRef.value;
+        },
+      };
+      app.navbarManager.add(
+        {
+          id: 'splashScreenToggle',
+          action: splashScreenAction,
+        },
+        vcsAppSymbol,
+        ButtonLocation.MENU,
+      );
+    }
+    return watch(
+      () => app.uiConfig.config.value.splashScreen,
+      (newSplashScreen) => {
+        if (app.navbarManager.has('splashScreenToggle')) {
+          app.navbarManager.remove('splashScreenToggle');
+        }
+        if (newSplashScreen && newSplashScreen.menuEntry) {
+          setupSplashScreenAction();
+        }
+      },
+      { immediate: true },
+    );
+  }
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
    * @param {import("../vcsUiApp.js").default} app
@@ -456,6 +568,33 @@
     };
   }
+  /**
+   * This helper sets up a listener to sync the display quality settings from the {@see UiConfigObject}
+   * @param {import("../vcsUiApp.js").default} app
+   * @returns {function():void} - call to stop syncing
+   */
+  export function setupUiConfigDisplayQuality(app) {
+    const listeners = [
+      app.uiConfig.added.addEventListener((item) => {
+        if (item.name === 'displayQuality') {
+          app.displayQuality.updateOptions(item.value);
+        }
+      }),
+      app.uiConfig.removed.addEventListener((item) => {
+        if (item.name === 'displayQuality') {
+          app.displayQuality.updateOptions({});
+        }
+      }),
+    ];
+    return () => {
+      listeners.forEach((cb) => {
+        cb();
+      });
+      listeners.splice(0);
+    };
+  }
   /**
    * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
    * It also returns a attributionAction to toggle the attributions window and a destroy function.
@@ -507,6 +646,7 @@
       VcsPositionDisplay,
       VcsAttributionsFooter,
       VcsTextPageFooter,
+      VcsSplashScreen,
       VcsNavbar,
       VContainer,
       VFooter,
@@ -521,16 +661,19 @@
       /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
       const mapNavbarListener = setupMapNavbar(app);
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
+      const stopCustomScreen = setupCustomScreen(app);
+      const splashScreenRef = ref(true);
+      const stopSplashScreen = setupSplashScreen(app, splashScreenRef);
       setupHelpButton(app);
       const destroyComponentsWindow = setupCategoryManagerWindow(app);
       const destroyThemingListener = setupUiConfigTheming(
         app,
         getCurrentInstance().proxy.$vuetify,
       );
+      const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
@@ -546,9 +689,12 @@
         mapNavbarListener();
         legendDestroy();
         settingsDestroy();
+        stopCustomScreen();
+        stopSplashScreen();
         destroyComponentsWindow();
         destroyThemingListener();
         destroyAttributions();
+        destroyDisplayQualityListener();
       });
       return {
@@ -578,6 +724,21 @@
           }
           return undefined;
         }),
+        splashScreenRef,
+        splashScreen: computed(() => {
+          if (app.uiConfig.config.value.splashScreen) {
+            return {
+              title: 'components.splashScreen.name',
+              tooltip: 'components.splashScreen.tooltip',
+              position: {
+                width: '800px',
+                height: '400px',
+              },
+              ...app.uiConfig.config.value.splashScreen,
+            };
+          }
+          return undefined;
+        }),
         attributionEntries,
         attributionAction,
       };

package/src/application/VcsApp.vue.d.ts CHANGED Viewed

@@ -49,6 +49,12 @@ export function setupCategoryManagerWindow(app: import("../vcsUiApp.js").default
  * @returns {function():void} - call to stop syncing
  */
 export function setupUiConfigTheming(app: import("../vcsUiApp.js").default, vuetify: import("vuetify").Framework): () => void;
+/**
+ * This helper sets up a listener to sync the display quality settings from the {@see UiConfigObject}
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void} - call to stop syncing
+ */
+export function setupUiConfigDisplayQuality(app: import("../vcsUiApp.js").default): () => void;
 /**
  * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
  * It also returns a attributionAction to toggle the attributions window and a destroy function.
@@ -75,6 +81,15 @@ declare const _default: import("vue").DefineComponent<{
         title: string;
         tooltip: string;
     } | undefined>;
+    splashScreenRef: import("vue").Ref<boolean>;
+    splashScreen: import("vue").ComputedRef<{
+        title: string;
+        tooltip: string;
+        position: {
+            width: string;
+            height: string;
+        };
+    } | undefined>;
     attributionEntries: import("vue").Ref<import("./attributionsHelper.js").AttributionEntry[]>;
     attributionAction: import("../actions/actionHelper.js").VcsAction;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{

package/src/application/VcsCustomScreen.vue ADDED Viewed

@@ -0,0 +1,45 @@
+<template>
+  <v-card>
+    <div class="px-2 pt-2 pb-1">
+      <v-card-text>
+        <div v-html="customScreenText"></div>
+      </v-card-text>
+    </div>
+  </v-card>
+</template>
+<script>
+  import { VCard, VCardText } from 'vuetify/lib';
+  import { computed, getCurrentInstance } from 'vue';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  export default {
+    name: 'VcsCustomScreen',
+    components: {
+      VCard,
+      VCardText,
+    },
+    props: {
+      content: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const vm = getCurrentInstance().proxy;
+      const dialog = true;
+      const customScreenText = computed(() => {
+        const translatedContent = vm.$t(props.content);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+      return {
+        dialog,
+        customScreenText,
+      };
+    },
+  };
+</script>
+<style scoped lang="scss"></style>

package/src/application/VcsCustomScreen.vue.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    dialog: boolean;
+    customScreenText: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/application/VcsSettings.vue CHANGED Viewed

@@ -14,6 +14,27 @@
         />
       </v-col>
     </v-row>
+    <v-row v-if="is3D" no-gutters>
+      <VcsLabel html-for="settingsDisplayQuality">
+        {{ $t('settings.displayQuality.title') }}
+      </VcsLabel>
+    </v-row>
+    <v-row v-if="is3D" no-gutters class="quality-slider-padding">
+      <VcsSlider
+        step="1"
+        v-model="displaySettings"
+        type="number"
+        max="2"
+        min="0"
+        ticks="always"
+        tick-size="5"
+        :tick-labels="[
+          $t('settings.displayQuality.level.low'),
+          $t('settings.displayQuality.level.medium'),
+          $t('settings.displayQuality.level.high'),
+        ]"
+      />
+    </v-row>
     <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
@@ -38,9 +59,11 @@
 <script>
   import { ref, inject, onUnmounted, getCurrentInstance, computed } from 'vue';
   import { VCol, VContainer, VRow } from 'vuetify/lib';
+  import { CesiumMap, DisplayQualityLevel } from '@vcmap/core';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
   import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
+  import VcsSlider from '../components/form-inputs-controls/VcsSlider.vue';
   /**
    * @description The settings window of a VcsMap application
@@ -48,6 +71,7 @@
   export default {
     name: 'VcsSettings',
     components: {
+      VcsSlider,
       VcsSelect,
       VcsRadio,
       VcsLabel,
@@ -84,15 +108,58 @@
       const addedListener = app.i18n.added.addEventListener(setupI18n);
       const removedListener = app.i18n.removed.addEventListener(setupI18n);
+      const levels = [
+        DisplayQualityLevel.LOW,
+        DisplayQualityLevel.MEDIUM,
+        DisplayQualityLevel.HIGH,
+      ];
+      const localDisplaySettings = ref();
+      const displaySettings = computed({
+        get() {
+          return localDisplaySettings.value;
+        },
+        set(value) {
+          app.displayQuality.setLevel(levels[value]);
+        },
+      });
+      const setDisplayQualityLevel = () => {
+        localDisplaySettings.value = levels.indexOf(
+          app.displayQuality.currentQualityLevel,
+        );
+      };
+      setDisplayQualityLevel();
+      const displayQualityListener =
+        app.displayQuality.qualityLevelChanged.addEventListener(
+          setDisplayQualityLevel,
+        );
+      const is3D = ref(false);
+      const updateIs3D = () => {
+        is3D.value = app.maps.activeMap instanceof CesiumMap;
+      };
+      const mapActivatedListener =
+        app.maps.mapActivated.addEventListener(updateIs3D);
+      updateIs3D();
       onUnmounted(() => {
         localeChangedListener();
         addedListener();
         removedListener();
+        displayQualityListener();
+        mapActivatedListener();
       });
       return {
         language,
         languages,
+        displaySettings,
+        is3D,
       };
     },
   };
 </script>
+<style scoped>
+  .quality-slider-padding {
+    padding-bottom: 20px !important;
+  }
+</style>

package/src/application/VcsSettings.vue.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
     language: import("vue").WritableComputedRef<string>;
     languages: import("vue").Ref<never[]>;
+    displaySettings: import("vue").WritableComputedRef<any>;
+    is3D: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/src/application/VcsSplashScreen.vue ADDED Viewed

@@ -0,0 +1,140 @@
+<template>
+  <v-dialog
+    v-if="options"
+    v-model="localValue"
+    :width="position.width"
+    :height="position.height"
+    :max-width="position.maxWidth"
+    :max-height="position.maxHeight"
+    persistent
+  >
+    <v-card>
+      <div class="px-2 pt-2 pb-1">
+        <v-card-text>
+          <div v-html="splashScreenText"></div>
+          <v-row class="mt-2" v-if="acceptInput" no-gutters>
+            <v-col class="align-center d-flex">
+              <VcsCheckbox
+                id="checkbox_splashScreen"
+                style="margin-bottom: 16px"
+                v-model="checkBox"
+              >
+              </VcsCheckbox>
+              <VcsLabel>
+                <div
+                  v-html="splashScreenCheckboxText"
+                  class="marked-checkbox-content"
+                ></div>
+              </VcsLabel>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-col class="text-right">
+            <VcsFormButton
+              color="primary"
+              @click="exitScreen"
+              :disabled="!checkBox"
+              >{{ buttonTitle }}</VcsFormButton
+            >
+          </v-col>
+        </v-card-actions>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+  import {
+    VDialog,
+    VCard,
+    VCardText,
+    VCardActions,
+    VRow,
+    VCol,
+  } from 'vuetify/lib';
+  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import VcsFormButton from '../components/buttons/VcsFormButton.vue';
+  import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
+  import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
+  export default {
+    name: 'VcsSplashScreen',
+    components: {
+      VcsLabel,
+      VDialog,
+      VCard,
+      VCardText,
+      VCardActions,
+      VcsFormButton,
+      VcsCheckbox,
+      VRow,
+      VCol,
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      options: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      const localValue = ref(props.value);
+      watch(
+        () => props.value,
+        (newValue) => {
+          localValue.value = newValue;
+        },
+      );
+      const vm = getCurrentInstance().proxy;
+      const splashScreenText = computed(() => {
+        const translatedContent = vm.$t(props.options.content);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+      const buttonTitle = vm.$t(props.options.buttonTitle);
+      const splashScreenCheckboxText = computed(() => {
+        const translatedContent = vm.$t(props.options.checkBoxText);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+      const acceptInput = ref(props.options.acceptInput);
+      const checkBox = ref(!acceptInput.value);
+      const exitScreen = () => {
+        localValue.value = false;
+        emit('input', localValue.value);
+      };
+      const position = computed(() => ({
+        width: props.options.position?.width || 800,
+        height: props.options.position?.width || 500,
+        maxWidth: props.options.position?.maxWidth,
+        maxHeight: props.options.position?.maxHeight,
+      }));
+      return {
+        localValue,
+        exitScreen,
+        splashScreenText,
+        splashScreenCheckboxText,
+        checkBox,
+        acceptInput,
+        buttonTitle,
+        position,
+      };
+    },
+  };
+</script>
+<style scoped lang="scss">
+  .marked-checkbox-content ::v-deep p {
+    margin-bottom: 0;
+  }
+</style>