@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/application/VcsSplashScreen.vue

@@ -7,42 +7,43 @@
     :max-width="position.maxWidth"
     :max-height="position.maxHeight"
     persistent
+    class="vcs-splash-screen"
   >
     <v-card>
-      <div class="px-2 pt-2 pb-1">
-        <v-card-text>
-          <div v-html="splashScreenText"></div>
+      <v-card-text>
+        <VcsMarkdown :content="$st(options.content)" />
+        <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
+          <template #label>
+            <VcsMarkdown
+              :content="
+                $st(
+                  options.checkBoxText ||
+                    'components.splashScreen.checkBoxText',
+                )
+              "
+              class="marked-checkbox-content"
+            />
+          </template>
+        </VcsCheckbox>
+      </v-card-text>
 
-          <v-row class="mt-2" v-if="options.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-card-actions>
+        <v-row no-gutters>
           <v-col class="text-right">
             <VcsFormButton
               color="primary"
+              variant="filled"
               @click="exitScreen"
-              :disabled="!checkBox"
-              >{{ $t(options.buttonTitle) }}</VcsFormButton
+              :disabled="options.acceptInput && !checkBox"
+              >{{
+                $st(
+                  options.buttonTitle || 'components.splashScreen.buttonTitle',
+                )
+              }}</VcsFormButton
             >
           </v-col>
-        </v-card-actions>
-      </div>
+        </v-row>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
@@ -56,16 +57,15 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, getCurrentInstance, ref, watch } from 'vue';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { computed, ref } from 'vue';
   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';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+  import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default {
     name: 'VcsSplashScreen',
     components: {
-      VcsLabel,
       VDialog,
       VCard,
       VCardText,
@@ -74,9 +74,10 @@
       VcsCheckbox,
       VRow,
       VCol,
+      VcsMarkdown,
     },
     props: {
-      value: {
+      modelValue: {
         type: Boolean,
         default: false,
       },
@@ -86,28 +87,12 @@
       },
     },
     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.$st(props.options.content);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
-      const splashScreenCheckboxText = computed(() => {
-        const translatedContent = vm.$st(props.options.checkBoxText);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
-
-      const checkBox = ref(!props.options.acceptInput);
+      const checkBox = ref(false);
       const exitScreen = () => {
         localValue.value = false;
-        emit('input', localValue.value);
+        checkBox.value = false;
       };
 
       const position = computed(() => ({
@@ -120,8 +105,6 @@
       return {
         localValue,
         exitScreen,
-        splashScreenText,
-        splashScreenCheckboxText,
         checkBox,
         position,
       };
@@ -130,7 +113,12 @@
 </script>
 
 <style scoped lang="scss">
-  .marked-checkbox-content ::v-deep p {
-    margin-bottom: 0;
+  .marked-checkbox-content {
+    :deep(p) {
+      margin-bottom: 0;
+    }
+  }
+  .v-input {
+    margin-left: -5px !important;
   }
 </style>

package/src/application/VcsSplashScreen.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -8,10 +8,8 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    localValue: import("vue").Ref<boolean>;
+    localValue: import("vue").Ref<any>;
     exitScreen: () => void;
-    splashScreenText: import("vue").ComputedRef<string>;
-    splashScreenCheckboxText: import("vue").ComputedRef<string>;
     checkBox: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
         width: any;
@@ -20,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         maxHeight: any;
     }>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+    modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -29,6 +27,6 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
-    value: boolean;
+    modelValue: boolean;
 }, {}>;
 export default _default;

package/src/application/VcsTextPage.vue

@@ -1,65 +1,34 @@
 <template>
-  <v-sheet>
-    <v-container>
-      <div v-html="markedHtml"></div>
-    </v-container>
-  </v-sheet>
+  <v-container class="vcs-text-page">
+    <VcsMarkdown :content="$st(content)"></VcsMarkdown>
+  </v-container>
 </template>
 
 <style lang="scss" scoped>
-  @import '../styles/shades.scss';
-
-  .theme--light {
-    a {
-      color: map-get($shades, 'black');
-    }
-  }
-  .theme--dark {
-    a {
-      color: map-get($shades, 'white');
-    }
-  }
-  a {
-    &:hover {
-      color: var(--v-primary-base);
-    }
-    &:before {
-      content: '\00a9';
-    }
+  :deep(a) {
+    color: var(--v-text-color);
   }
 </style>
 
 <script>
-  import { computed, getCurrentInstance } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/components';
-  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import { VContainer } from 'vuetify/components';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
-   * @description Is a component to render and sanitize a String
-   * @vue-prop {string} content - The markdown content to be rendered. Is translatable and will be sanitized.
+   * @description Container wrapper around VcsMarkdown
+   * @vue-prop {string} content - The markdown content to be rendered.
    */
   export default {
     name: 'VcsTextPage',
-    components: {
-      VSheet,
-      VContainer,
-    },
     props: {
       content: {
         type: String,
-        default: () => '',
+        required: true,
       },
     },
-    setup(props) {
-      const vm = getCurrentInstance().proxy;
-      const markedHtml = computed(() => {
-        const translatedContent = vm.$st(props.content);
-        return parseAndSanitizeMarkdown(translatedContent);
-      });
-
-      return {
-        markedHtml,
-      };
+    components: {
+      VContainer,
+      VcsMarkdown,
     },
   };
 </script>

package/src/application/VcsTextPage.vue.d.ts

@@ -1,16 +1,12 @@
 declare const _default: import("vue").DefineComponent<{
     content: {
         type: StringConstructor;
-        default: () => string;
+        required: true;
     };
-}, {
-    markedHtml: import("vue").ComputedRef<string>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;
-        default: () => string;
+        required: true;
     };
-}>>, {
-    content: string;
-}, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/application/VcsTextPageFooter.vue

@@ -1,67 +1,52 @@
 <template v-if="textPage.title">
-  <VcsTooltip :tooltip="textPage.tooltip">
-    <template #activator="{ props }">
-      <span
-        class="d-inline-block text-truncate mr-10 setmargin"
-        v-bind="{ ...$attrs, ...props }"
-      >
-        <span v-if="textPage.url" class="imprint-span imprint button">
-          <a :href="textPage.url" class="link" target="_blank"
-            >{{ $st(textPage.title) }} <span></span>
-          </a>
-        </span>
+  <span
+    class="d-inline-block text-truncate mr-1 flex-shrink-0 vcs-text-page-footer"
+  >
+    <span v-if="textPage.url" class="text-page-footer">
+      <a :href="$st(textPage.url)" target="_blank"
+        >{{ $st(textPage.title) }} <span></span>
+      </a>
+    </span>
 
-        <span
-          v-else
-          class="imprint-span imprint button link"
-          @click="addTextPage()"
-          >{{ $st(textPage.title) }}</span
-        >
-      </span>
-    </template>
-  </VcsTooltip>
+    <span
+      v-else
+      class="text-page-footer cursor-pointer text-decoration-underline"
+      @click="addTextPage()"
+      >{{ $st(textPage.title) }}</span
+    >
+    <v-tooltip
+      :text="$st(textPage.tooltip)"
+      activator="parent"
+      location="top"
+    />
+  </span>
 </template>
 
 <style lang="scss" scoped>
-  .button {
-    cursor: pointer !important;
-  }
-  .setmargin {
-    margin-right: 2px !important;
-  }
-  .imprint {
-    margin-left: 2px;
-  }
-  .link {
-    text-decoration: underline;
-  }
-  .imprint-span {
+  .text-page-footer {
     font-size: smaller;
-
-    &:first-child::before {
-      content: '';
-    }
-    span {
-      font-size: inherit;
+    a {
+      color: var(--v-text-color);
     }
   }
 </style>
 
 <script>
   import { inject } from 'vue';
-  import VcsTooltip from '../components/notification/VcsTooltip.vue';
+  import { VTooltip } from 'vuetify/components';
   import VcsTextPage from './VcsTextPage.vue';
   import { vcsAppSymbol } from '../pluginHelper.js';
   import { WindowSlot } from '../manager/window/windowManager.js';
 
   /**
    * A Footer element opening either an URL in a new tab or a WindowComponent with provided content
+   * textPage title, tooltip and the url can also be i18n keys, and will be translated.
    * @vue-prop {import("../uiConfig.js").TextPageType} [textPage]
    * @vue-prop {string} windowId
    */
   export default {
     name: 'VcsTextPageFooter',
-    components: { VcsTooltip },
+    components: { VTooltip },
     props: {
       textPage: {
         type: Object,

package/src/application/attributionsHelper.d.ts

@@ -1,24 +1,24 @@
 /**
- * @typedef {Object} Attribution.Options
+ * @typedef {Object} AttributionOptions
  * @property {string} provider - name of the data provider
  * @property {number} [year] - year of dataset
- * @property {URL} url - link to data provider
+ * @property {string} url - link to data provider
  */
 /**
  * @typedef {Object} AttributionEntry
  * @property {string} key - name of the VcsObject the attribution applies to
  * @property {string} title - title of the VcsObject the attribution applies to
- * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ * @property {AttributionOptions|Array<AttributionOptions>} attributions - attributions of a map, layer or oblique collection
  */
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
- * @returns {Array<{provider: string, years: string, url: URL}>}
+ * @returns {Array<{provider: string, years: string, url: string}>}
  */
 export function mergeAttributions(entries: Array<AttributionEntry>): Array<{
     provider: string;
     years: string;
-    url: URL;
+    url: string;
 }>;
 /**
  * Gets attributions of all active maps, layers and oblique collections and returns an array of entries.
@@ -32,22 +32,20 @@ export function getAttributions(app: import("../vcsUiApp.js").default): {
     entries: import("vue").UnwrapRef<Array<AttributionEntry>>;
     destroy: () => void;
 };
-export namespace Attribution {
-    type Options = {
-        /**
-         * - name of the data provider
-         */
-        provider: string;
-        /**
-         * - year of dataset
-         */
-        year?: number | undefined;
-        /**
-         * - link to data provider
-         */
-        url: URL;
-    };
-}
+export type AttributionOptions = {
+    /**
+     * - name of the data provider
+     */
+    provider: string;
+    /**
+     * - year of dataset
+     */
+    year?: number | undefined;
+    /**
+     * - link to data provider
+     */
+    url: string;
+};
 export type AttributionEntry = {
     /**
      * - name of the VcsObject the attribution applies to
@@ -60,5 +58,5 @@ export type AttributionEntry = {
     /**
      * - attributions of a map, layer or oblique collection
      */
-    attributions: Attribution.Options | Array<Attribution.Options>;
+    attributions: AttributionOptions | Array<AttributionOptions>;
 };

package/src/application/attributionsHelper.js

@@ -2,23 +2,23 @@ import { reactive } from 'vue';
 import { ObliqueMap } from '@vcmap/core';
 
 /**
- * @typedef {Object} Attribution.Options
+ * @typedef {Object} AttributionOptions
  * @property {string} provider - name of the data provider
  * @property {number} [year] - year of dataset
- * @property {URL} url - link to data provider
+ * @property {string} url - link to data provider
  */
 
 /**
  * @typedef {Object} AttributionEntry
  * @property {string} key - name of the VcsObject the attribution applies to
  * @property {string} title - title of the VcsObject the attribution applies to
- * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ * @property {AttributionOptions|Array<AttributionOptions>} attributions - attributions of a map, layer or oblique collection
  */
 
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
- * @returns {Array<{provider: string, years: string, url: URL}>}
+ * @returns {Array<{provider: string, years: string, url: string}>}
  */
 export function mergeAttributions(entries) {
   const providers = {};
@@ -107,14 +107,14 @@ export function getAttributions(app) {
   }
 
   /**
-   * adds or removes a AttributionEntry on layer state changes
-   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer|import("@vcmap/core").ObliqueCollection} object
+   * adds or removes a AttributionEntry for layers or maps
+   * @param {import("@vcmap/core").VcsMap|import("@vcmap/core").Layer} object
    */
   function syncAttributions(object) {
     if (object?.properties?.attributions === undefined) {
       return;
     }
-    if (object.active || object.loaded) {
+    if (object.active) {
       addAttributions(object);
     } else {
       removeAttributions(object);
@@ -138,9 +138,13 @@ export function getAttributions(app) {
       }
     });
     if (map instanceof ObliqueMap) {
-      syncAttributions(map.collection);
-      obliqueListener =
-        map.collectionChanged.addEventListener(syncAttributions);
+      addAttributions(map.collection);
+      obliqueListener = map.collectionChanged.addEventListener(
+        (obliqueCollection) => {
+          [...app.obliqueCollections].forEach(removeAttributions);
+          addAttributions(obliqueCollection);
+        },
+      );
     }
   }
 

package/src/callback/vcsCallback.d.ts

@@ -5,9 +5,9 @@
  */
 export function executeCallbacks(app: import("@src/vcsUiApp.js").default, vcsCallbackOptions: Array<VcsCallbackOptions>): void;
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>}
+ * @type {ClassRegistry<typeof VcsCallback>}
  */
-export const callbackClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>;
+export const callbackClassRegistry: ClassRegistry<typeof VcsCallback>;
 export default VcsCallback;
 export type VcsCallbackOptions = {
     type: string;

package/src/callback/vcsCallback.js

@@ -1,7 +1,7 @@
 import { ClassRegistry } from '@vcmap/core';
 
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>}
+ * @type {ClassRegistry<typeof VcsCallback>}
  */
 export const callbackClassRegistry = new ClassRegistry();