@vcmap/ui 6.0.0-rc.8 → 6.0.0

package/src/application/VcsObliqueFooter.vue

@@ -0,0 +1,110 @@
+<template>
+  <span
+    v-if="content"
+    class="d-flex align-center overflow-hidden vcs-oblique-footer"
+    v-html="content"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .vcs-oblique-footer {
+    :deep(p) {
+      font-size: smaller;
+      margin: 0;
+    }
+  }
+</style>
+
+<script>
+  import { computed, inject, onUnmounted, shallowRef } from 'vue';
+  import { ObliqueMap, ObliqueViewDirection } from '@vcmap/core';
+  import { renderTemplate } from '../components/form-output/markdownHelper.js';
+
+  const i18nViewDirection = {
+    [ObliqueViewDirection.NORTH]: 'footer.oblique.north',
+    [ObliqueViewDirection.EAST]: 'footer.oblique.east',
+    [ObliqueViewDirection.SOUTH]: 'footer.oblique.south',
+    [ObliqueViewDirection.WEST]: 'footer.oblique.west',
+    [ObliqueViewDirection.NADIR]: 'footer.oblique.nadir',
+  };
+
+  /**
+   * @description Renders image information according to configured markdown template
+   * @vue-computed {string} content - the derived rendered image information
+   */
+  export default {
+    name: 'VcsObliqueFooter',
+    setup() {
+      const app = inject('vcsApp');
+
+      /**
+       * @returns {import("@vcmap/core").ObliqueImage|null}
+       */
+      function getImage() {
+        const map = app.maps.activeMap;
+        if (map instanceof ObliqueMap) {
+          return map.currentImage;
+        }
+        return null;
+      }
+
+      /**
+       * @param {import("@vcmap/core").ObliqueImage?} image
+       * @returns {import("@vcmap/core").ObliqueImage & {viewDirection: string}|null}
+       */
+      function getTranslatedImageInfo(image) {
+        if (image) {
+          return {
+            ...image,
+            viewDirection: app.vueI18n.t(
+              i18nViewDirection[image.viewDirection],
+            ),
+          };
+        }
+        return null;
+      }
+
+      const currentImage = shallowRef(getImage());
+
+      let imageChangedListener = () => {};
+      const mapChangedListener = app.maps.mapActivated.addEventListener(
+        (map) => {
+          imageChangedListener();
+          if (map instanceof ObliqueMap) {
+            currentImage.value = map.currentImage;
+            imageChangedListener = map.imageChanged.addEventListener(
+              (image) => {
+                currentImage.value = image;
+              },
+            );
+          } else if (currentImage.value) {
+            currentImage.value = null;
+            imageChangedListener = () => {};
+          }
+        },
+      );
+
+      onUnmounted(() => {
+        imageChangedListener();
+        mapChangedListener();
+      });
+
+      const content = computed(() => {
+        if (!app.uiConfig.config.hideObliqueFooter && currentImage.value) {
+          const template =
+            app.uiConfig.config.obliqueFooterTemplate ??
+            'footer.oblique.template';
+          return renderTemplate(
+            app.vueI18n.te(template) ? app.vueI18n.tm(template) : template,
+            getTranslatedImageInfo(currentImage.value),
+          );
+        }
+        return null;
+      });
+
+      return {
+        content,
+      };
+    },
+  };
+</script>

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

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    content: import("vue").ComputedRef<string | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/application/VcsTextPageFooter.vue

@@ -15,6 +15,7 @@
       >{{ $st(textPage.title) }}</span
     >
     <v-tooltip
+      v-if="$st(textPage.tooltip)"
       :text="$st(textPage.tooltip)"
       activator="parent"
       location="top"

package/src/application/attributionsHelper.js

@@ -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/components/buttons/VcsButton.vue

@@ -65,7 +65,7 @@
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
   import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
@@ -124,7 +124,7 @@
           return null;
         }
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });

package/src/components/buttons/VcsButton.vue.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
     appliedColor: import("vue").ComputedRef<string | null>;
     iconSize: import("vue").ComputedRef<number>;

package/src/components/buttons/VcsFormButton.vue

@@ -68,7 +68,7 @@
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
   import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
@@ -121,7 +121,7 @@
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const fontSize = useFontSize();
       const iconSize = useIconSize();
       const itemHeight = computed(() => {

package/src/components/buttons/VcsFormButton.vue.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<string>;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
     itemHeight: import("vue").ComputedRef<number>;

package/src/components/buttons/VcsToolButton.vue

@@ -69,7 +69,7 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
@@ -140,7 +140,7 @@
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const buttonVariant = computed(() => {
         if (props.active && !props.disabled) {
           return 'flat';

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     itemHeight: import("vue").ComputedRef<number>;
     iconSize: import("vue").ComputedRef<number>;
     appliedColor: import("vue").ComputedRef<string | null>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<"flat" | "text">;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/src/components/composables.d.ts

@@ -9,9 +9,9 @@ export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
  * returns only the slotNames which are not excluded as a computed.
  * @param {import("vue").Slots} slots
  * @param {Array<string>} exclude
- * @returns {import("vue").ComputedRef<Array<string>>}
+ * @returns {Array<string>}
  */
-export function useForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): import("vue").ComputedRef<Array<string>>;
+export function getForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): Array<string>;
 /**
  * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
  * @param {import("vue").ComputedRef<string|undefined>} tooltip

package/src/components/composables.js

@@ -22,12 +22,10 @@ export function usePadding(attrs) {
  * returns only the slotNames which are not excluded as a computed.
  * @param {import("vue").Slots} slots
  * @param {Array<string>} exclude
- * @returns {import("vue").ComputedRef<Array<string>>}
+ * @returns {Array<string>}
  */
-export function useForwardSlots(slots, exclude = []) {
-  return computed(() => {
-    return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
-  });
+export function getForwardSlots(slots, exclude = []) {
+  return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
 }
 
 let intersectionObserver = null;

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="py-0 px-1 vcs-flight-player">
-    <VcsLabel>{{ $t('flight.player') }}</VcsLabel>
+    <VcsLabel html-for="player">{{ $t('flight.player') }}</VcsLabel>
     <VcsSlider
       v-if="clock"
       type="number"
@@ -94,30 +94,36 @@
       );
 
       let clockChangedListener = () => {};
-      const playerChangedListener = app.flights.playerChanged.addEventListener(
-        (player) => {
-          clockChangedListener();
-          if (player?.flightInstanceName === flightInstance.name) {
-            isCurrentPlayer.value = true;
-            flightInstancePlayer = player;
-            syncClocks(clock, player.clock);
-            clockChangedListener = player.clock.changed.addEventListener(
-              (changed) => {
-                syncClocks(clock, changed);
-              },
-            );
-          } else {
-            isCurrentPlayer.value = false;
-            flightInstancePlayer = undefined;
-            clock.value = getDefaultClock();
-          }
-        },
-      );
+      let playerChangedListener = () => {};
+
+      function syncPlayer(player) {
+        if (player?.flightInstanceName === flightInstance.name) {
+          isCurrentPlayer.value = true;
+          flightInstancePlayer = player;
+          syncClocks(clock, player.clock);
+          clockChangedListener = player.clock.changed.addEventListener(
+            (changed) => {
+              syncClocks(clock, changed);
+            },
+          );
+        } else {
+          isCurrentPlayer.value = false;
+          flightInstancePlayer = undefined;
+          clock.value = getDefaultClock();
+        }
+      }
 
       onMounted(async () => {
         flightInstancePlayer =
           await app.flights.setPlayerForFlight(flightInstance);
+        syncPlayer(flightInstancePlayer);
         syncClocks(clock, flightInstancePlayer.clock);
+        playerChangedListener = app.flights.playerChanged.addEventListener(
+          (player) => {
+            clockChangedListener();
+            syncPlayer(player);
+          },
+        );
       });
 
       onUnmounted(() => {

package/src/components/form-inputs-controls/VcsCheckbox.vue

@@ -11,8 +11,10 @@
     }"
     v-bind="$attrs"
   >
-    <template #label="scope">
-      <slot name="label" v-bind="scope ?? {}">{{ $st($attrs.label) }}</slot>
+    <template #label="scope" v-if="label || $slots.label">
+      <span class="pl-1">
+        <slot name="label" v-bind="scope ?? {}">{{ $st(label) }}</slot>
+      </span>
     </template>
     <template v-for="slot of forwardSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope ?? {}" />
@@ -61,14 +63,14 @@
 <script>
   import { ref } from 'vue';
   import { VCheckbox, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
    * Provides VTooltip to show error messages
    * @vue-prop {string} [tooltip] - A message to be displayed when there is no error.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip, see {@link https://vuetifyjs.com/en/api/v-tooltip/#props-location | vuetify tooltip}.
-   * @vue-prop {string} label - Label to be displayed, will be translated.
+   * @vue-prop {string} [label] - Label to be displayed, will be translated.
    * @vue-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
    */
   export default {
@@ -87,12 +89,16 @@
         type: String,
         default: 'right',
       },
+      label: {
+        type: String,
+        default: undefined,
+      },
     },
     setup(props, { attrs, slots }) {
       const checkbox = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['label', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['label', 'message']);
       return {
         forwardSlots,
         paddingProvided,

package/src/components/form-inputs-controls/VcsCheckbox.vue.d.ts

@@ -7,8 +7,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     checkbox: import("vue").Ref<any>;
     errorTooltip: import("vue").Ref<any>;
@@ -21,7 +25,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>>, {
+    label: string;
     tooltip: string;
     tooltipPosition: string;
 }, {}>;

package/src/components/form-inputs-controls/VcsDatePicker.vue

@@ -31,11 +31,10 @@
 </template>
 <style lang="scss" scoped></style>
 <script>
-  import { computed, ref } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import { VMenu, VDatePicker, VBtn } from 'vuetify/components';
   import { useI18n } from 'vue-i18n';
   import VcsTextField from './VcsTextField.vue';
-  import { useProxiedAtomicModel } from '../modelHelper.js';
 
   /**
    * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/date-pickers/#internationalization}.
@@ -63,8 +62,29 @@
     emits: ['update:modelValue'],
     setup(props, { emit }) {
       const i18n = useI18n();
-      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
       const menuOpen = ref(false);
+      const internal = ref(props.modelValue);
+
+      watch(
+        () => props.modelValue,
+        (newValue) => {
+          if (!menuOpen.value) {
+            internal.value = newValue;
+          }
+        },
+      );
+
+      const localValue = computed({
+        get() {
+          return internal.value;
+        },
+        set(newValue) {
+          if (internal.value?.getTime() !== newValue?.getTime()) {
+            internal.value = newValue;
+            emit('update:modelValue', newValue);
+          }
+        },
+      });
 
       const formatDate = (date) => {
         if (date) {

package/src/components/form-inputs-controls/VcsDatePicker.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
-    localValue: import("vue").Ref<any>;
+    localValue: import("vue").WritableComputedRef<Date>;
     menuOpen: import("vue").Ref<boolean>;
     formatDate: (date: any) => string;
     goToToday: () => void;

package/src/components/form-inputs-controls/VcsFileInput.vue

@@ -38,7 +38,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import './vcsTextField.scss';
+  @use './vcsTextField.scss';
 
   // set text overflow for file input
   :deep(.v-field__input) {
@@ -53,7 +53,7 @@
 <script>
   import { ref } from 'vue';
   import { VFileInput, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description extends API of {@link https://vuetifyjs.com/en/api/v-file-input v-text-field}.
@@ -86,7 +86,7 @@
       const errorTooltipRef = ref();
 
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
         forwardSlots,

package/src/components/form-inputs-controls/VcsFileInput.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     paddingProvided: import("vue").ComputedRef<boolean>;
     fileInputRef: import("vue").Ref<any>;
     errorTooltipRef: import("vue").Ref<any>;

package/src/components/form-inputs-controls/VcsLabel.vue

@@ -17,6 +17,9 @@
         :text="$st(labelTooltip)"
       ></v-tooltip>
     </span>
+    <vcs-help-tooltip :text="helpText" v-if="helpText || $slots.help">
+      <slot name="help" />
+    </vcs-help-tooltip>
   </label>
 </template>
 
@@ -38,7 +41,7 @@
     height: calc(var(--v-vcs-font-size) * 2 - 2px);
     font-size: var(--v-vcs-font-size);
   }
-  .vcs-label-required:after {
+  .vcs-label-required .ellipsis-text:after {
     content: ' *';
     color: rgb(var(--v-theme-error));
   }
@@ -50,6 +53,7 @@
   import { VTooltip } from 'vuetify/components';
   import { computed, ref } from 'vue';
   import { createEllipseTooltip, usePadding } from '../composables.js';
+  import VcsHelpTooltip from '../notification/VcsHelpTooltip.vue';
 
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
@@ -63,6 +67,7 @@
   export default {
     name: 'VcsLabel',
     components: {
+      VcsHelpTooltip,
       VTooltip,
     },
     props: {
@@ -86,6 +91,10 @@
         type: String,
         default: 'right',
       },
+      helpText: {
+        type: String,
+        default: undefined,
+      },
     },
     setup(props, { attrs }) {
       const paddingProvided = usePadding(attrs);

package/src/components/form-inputs-controls/VcsLabel.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }, {
     paddingProvided: import("vue").ComputedRef<boolean>;
     labelTooltip: import("vue").ComputedRef<string>;
@@ -44,11 +48,16 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    helpText: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>>, {
     disabled: boolean;
     required: boolean;
     tooltip: string;
     tooltipPosition: string;
     htmlFor: string;
+    helpText: string;
 }, {}>;
 export default _default;

package/src/components/form-inputs-controls/VcsRadio.vue

@@ -57,6 +57,10 @@
   :deep(.v-selection-control__input::before) {
     background-color: transparent;
   }
+  :deep(.v-icon--size-default) {
+    font-size: calc(var(--v-vcs-font-size) + 3px);
+    padding-right: 2px;
+  }
   // remove details
   :deep(.v-input__details) {
     display: none;

package/src/components/form-inputs-controls/VcsSelect.vue

@@ -141,7 +141,7 @@
 <script>
   import { VSelect, VTooltip, VListItem } from 'vuetify/components';
   import { computed, ref } from 'vue';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import VcsCheckbox from './VcsCheckbox.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -213,7 +213,7 @@
         return props.multiple;
       });
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append-inner', 'message']);
+      const forwardSlots = getForwardSlots(slots, ['append-inner', 'message']);
 
       return {
         forwardSlots,

package/src/components/form-inputs-controls/VcsSelect.vue.d.ts

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | NumberConstructor | ArrayConstructor)[];
         default(rawProps: any): never[] | null;
     };
     tooltip: {
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     localModelValue: import("vue").Ref<any>;
     additionalItems: import("vue").ComputedRef<number>;
     isMultiple: import("vue").ComputedRef<boolean>;
@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | NumberConstructor | ArrayConstructor)[];
         default(rawProps: any): never[] | null;
     };
     tooltip: {

package/src/components/form-inputs-controls/VcsSlider.vue

@@ -76,7 +76,7 @@
 <script>
   import { computed, ref } from 'vue';
   import { VSlider, VTooltip } from 'vuetify/components';
-  import { useForwardSlots, usePadding } from '../composables.js';
+  import { getForwardSlots, usePadding } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
@@ -112,7 +112,7 @@
         return trackSize.value * 2;
       });
       const paddingProvided = usePadding(attrs);
-      const forwardSlots = useForwardSlots(slots, ['append']);
+      const forwardSlots = getForwardSlots(slots, ['append']);
       const sliderRef = ref();
       return {
         hasAppendSlot: computed(() => {