@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.3

package/src/application/VcsSplashScreen.vue

@@ -11,32 +11,29 @@
     <v-card>
       <div class="px-2 pt-2 pb-1">
         <v-card-text>
-          <VcsMarked :content="splashScreenText"></VcsMarked>
-
-          <v-row class="mt-2" v-if="options.acceptInput" no-gutters>
-            <v-col class="align-center d-flex">
-              <VcsCheckbox v-model="checkBox"> </VcsCheckbox>
-
-              <VcsLabel>
-                <div
-                  v-html="splashScreenCheckboxText"
-                  class="marked-checkbox-content"
-                ></div>
-              </VcsLabel>
-            </v-col>
-          </v-row>
+          <VcsMarkdown :content="$st(options.content)" />
+          <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
+            <template #label>
+              <VcsMarkdown
+                :content="$st(options.checkBoxText)"
+                class="marked-checkbox-content"
+              />
+            </template>
+          </VcsCheckbox>
         </v-card-text>
 
         <v-card-actions>
-          <v-col class="text-right">
-            <VcsFormButton
-              color="primary"
-              variant="filled"
-              @click="exitScreen"
-              :disabled="!checkBox"
-              >{{ $t(options.buttonTitle) }}</VcsFormButton
-            >
-          </v-col>
+          <v-row no-gutters>
+            <v-col class="text-right">
+              <VcsFormButton
+                color="primary"
+                variant="filled"
+                @click="exitScreen"
+                :disabled="options.acceptInput && !checkBox"
+                >{{ $t(options.buttonTitle) }}</VcsFormButton
+              >
+            </v-col>
+          </v-row>
         </v-card-actions>
       </div>
     </v-card>
@@ -52,18 +49,15 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, getCurrentInstance, ref } 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 VcsMarked from '../components/form-output/VcsMarkdown.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
   import { useProxiedAtomicModel } from '../components/modelHelper.js';
 
   export default {
     name: 'VcsSplashScreen',
     components: {
-      VcsLabel,
       VDialog,
       VCard,
       VCardText,
@@ -72,7 +66,7 @@
       VcsCheckbox,
       VRow,
       VCol,
-      VcsMarked,
+      VcsMarkdown,
     },
     props: {
       modelValue: {
@@ -87,19 +81,10 @@
     setup(props, { emit }) {
       const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
 
-      const vm = getCurrentInstance().proxy;
-      const splashScreenText = computed(() => {
-        return vm.$st(props.options.content);
-      });
-
-      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;
+        checkBox.value = false;
       };
 
       const position = computed(() => ({
@@ -112,8 +97,6 @@
       return {
         localValue,
         exitScreen,
-        splashScreenText,
-        splashScreenCheckboxText,
         checkBox,
         position,
       };

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

@@ -10,8 +10,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     localValue: import("vue").Ref<any>;
     exitScreen: () => void;
-    splashScreenText: import("vue").ComputedRef<any>;
-    splashScreenCheckboxText: import("vue").ComputedRef<string>;
     checkBox: import("vue").Ref<boolean>;
     position: import("vue").ComputedRef<{
         width: any;

package/src/application/VcsTextPage.vue

@@ -1,65 +1,34 @@
 <template>
-  <v-sheet>
-    <v-container>
-      <VcsMarkdown :content="markedHtml"></VcsMarkdown>
-    </v-container>
-  </v-sheet>
+  <v-container>
+    <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 { 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,
-      VcsMarkdown,
-    },
     props: {
       content: {
         type: String,
-        default: () => '',
+        required: true,
       },
     },
-    setup(props) {
-      const vm = getCurrentInstance().proxy;
-      const markedHtml = computed(() => {
-        return vm.$st(props.content);
-      });
-
-      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<any>;
-}, 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,55 +1,37 @@
 <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">
+    <span v-if="textPage.url" class="imprint">
+      <a :href="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="imprint 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 {
     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';
@@ -61,7 +43,7 @@
    */
   export default {
     name: 'VcsTextPageFooter',
-    components: { VcsTooltip },
+    components: { VTooltip },
     props: {
       textPage: {
         type: Object,

package/src/components/extent/VcsExtentEditor.vue

@@ -18,7 +18,7 @@
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { setupExtentComponentActions } from '../../actions/extentActions.js';
   import VcsExtent from './VcsExtent.vue';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
 
   /**
    * A VcsFormSection with actions to draw and edit an extent

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -7,13 +7,14 @@
   >
     <v-container class="py-0 px-0">
       <v-sheet v-if="items.length < 1" class="ma-2 pl-2">
-        {{ $t('components.flight.noAnchor') }}
-        <VcsButton
-          :icon="addAnchorAction.icon"
-          :tooltip="addAnchorAction.title"
-          @click.stop="addAnchorAction.callback()"
-          class="d-flex justify-center"
-        />
+        <p>{{ $t('components.flight.noAnchor') }}</p>
+        <div class="d-flex justify-center">
+          <VcsButton
+            :icon="addAnchorAction.icon"
+            :tooltip="addAnchorAction.title"
+            @click.stop="addAnchorAction.callback()"
+          />
+        </div>
       </v-sheet>
       <VcsList
         v-else
@@ -22,32 +23,35 @@
         :show-title="false"
         @item-moved="move"
       >
-        <!-- eslint-disable-next-line -->
-        <template #item.append-title="{ item, index }">
-          <VcsTextField
-            v-if="showDuration(index)"
-            v-model.number="item.duration"
-            :hide-spin-buttons="true"
-            type="number"
-            unit="s"
-            step="1"
-            :decimals="2"
-            :rules="[durationRule]"
-            no-padding
-            class="ml-auto"
-            style="width: 50px"
-          />
+        <template #item.title="{ item, index }">
+          <div class="d-flex align-center">
+            <span>{{ $st(item.title) }}</span>
+            <v-spacer />
+            <div class="duration-input">
+              <VcsTextField
+                v-if="showDuration(index)"
+                v-model.number="item.duration"
+                :hide-spin-buttons="true"
+                type="number"
+                unit="s"
+                step="1"
+                :decimals="2"
+                :rules="[durationRule]"
+                no-padding
+                class="ml-auto"
+              />
+            </div>
+          </div>
         </template>
-        <!-- eslint-disable-next-line -->
-        <template #item.intermediate="{ item, index }">
-          <VcsButton
-            :key="`item-intermediate-${index}`"
-            :icon="addAnchorAction.icon"
-            :tooltip="addAnchorAction.title"
-            @click.stop="addAnchorAction.callback(index + 1)"
-            class="d-flex justify-center z-index-99"
-            height="0"
-          />
+        <template #item.intermediate="{ index }">
+          <div class="d-flex justify-center h-0">
+            <VcsButton
+              :icon="addAnchorAction.icon"
+              :tooltip="addAnchorAction.title"
+              @click.stop="addAnchorAction.callback(index + 1)"
+              class="z-index-99 mx-auto add-in-button"
+            />
+          </div>
         </template>
       </VcsList>
     </v-container>
@@ -55,7 +59,7 @@
 </template>
 <script>
   import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer, VSheet } from 'vuetify/components';
+  import { VContainer, VSheet, VSpacer } from 'vuetify/components';
   import {
     anchorFromViewpoint,
     anchorToViewpoint,
@@ -63,7 +67,7 @@
   } from '@vcmap/core';
   import { Cartesian3 } from '@vcmap-cesium/engine';
   import { createToggleAction } from '../../actions/actionHelper.js';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsList from '../lists/VcsList.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsButton from '../buttons/VcsButton.vue';
@@ -197,7 +201,8 @@
   }
 
   export function durationRule(value) {
-    if (Number.isFinite(value) && value > 0) {
+    const v = Number.parseFloat(value);
+    if (Number.isFinite(v) && v > 0) {
       return true;
     }
     return 'components.flight.invalidDuration';
@@ -217,6 +222,7 @@
       VcsTextField,
       VContainer,
       VSheet,
+      VSpacer,
       VcsFormSection,
       VcsList,
     },
@@ -242,6 +248,14 @@
         flightInstance.propertyChanged.addEventListener((prop) => {
           if (prop === 'loop') {
             loop.value = flightInstance.loop;
+            // update last anchor's duration
+            const lastAnchor = flightInstance.anchors.get(
+              flightInstance.anchors.size - 1,
+            );
+            lastAnchor.duration = calculateDuration(
+              lastAnchor,
+              flightInstance.anchors.get(0),
+            );
           }
         });
 
@@ -328,7 +342,20 @@
   };
 </script>
 <style scoped lang="scss">
+  :deep(.v-list-item) {
+    padding: 0 8px 0 16px;
+  }
+  :deep(.v-list) {
+    overflow: visible;
+  }
+  .duration-input {
+    width: 60px;
+  }
   .z-index-99 {
-    z-index: 99;
+    z-index: 99 !important;
+  }
+  .add-in-button {
+    min-height: 0 !important;
+    margin-top: -8px;
   }
 </style>

package/src/components/flight/VcsFlightComponent.vue

@@ -18,24 +18,23 @@
       <v-container class="py-0 px-1">
         <v-row no-gutters v-if="!hideName">
           <v-col cols="6">
-            <VcsLabel html-for="name" dense required>
+            <VcsLabel html-for="name" required>
               {{ $t('components.flight.name') }}
             </VcsLabel>
           </v-col>
           <v-col>
-            <VcsTextField id="name" dense clearable v-model="name" />
+            <VcsTextField id="name" clearable v-model="name" />
           </v-col>
         </v-row>
         <v-row no-gutters v-if="!hideTitle">
           <v-col cols="6">
-            <VcsLabel html-for="title" dense>
+            <VcsLabel html-for="title">
               {{ $t('components.flight.title') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
               id="title"
-              dense
               clearable
               :placeholder="$t('components.flight.titlePlaceholder')"
               v-model="title"
@@ -44,17 +43,16 @@
         </v-row>
         <v-row no-gutters v-if="!hideInterpolation">
           <v-col cols="6">
-            <VcsLabel html-for="interpolation" dense>
+            <VcsLabel html-for="interpolation">
               {{ $t('components.flight.interpolation') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSelect
               id="title"
-              dense
               :items="[
-                { value: 'spline', text: 'components.flight.spline' },
-                { value: 'linear', text: 'components.flight.linear' },
+                { value: 'spline', title: 'components.flight.spline' },
+                { value: 'linear', title: 'components.flight.linear' },
               ]"
               v-model="interpolation"
             />
@@ -62,18 +60,17 @@
         </v-row>
         <v-row no-gutters v-if="!hideDuration">
           <v-col cols="6">
-            <VcsLabel html-for="duration" dense>
+            <VcsLabel html-for="duration">
               {{ $t('components.flight.duration') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
               id="duration"
-              v-model.number="duration"
+              v-model="duration"
               :hide-spin-buttons="true"
               type="number"
               unit="s"
-              step="1"
               :decimals="2"
               :disabled="disablePlayer"
               :rules="[durationRule]"
@@ -85,7 +82,6 @@
             <VcsCheckbox
               id="animate"
               label="components.flight.loop"
-              dense
               v-model="loop"
             />
           </v-col>
@@ -106,7 +102,7 @@
   import { computed, onUnmounted, ref, inject } from 'vue';
   import { VSheet, VContainer, VRow, VCol, VDivider } from 'vuetify/components';
   import { getSplineAndTimesForInstance } from '@vcmap/core';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsSelect from '../form-inputs-controls/VcsSelect.vue';
@@ -128,7 +124,7 @@
   function getFlightDuration(instance) {
     if (instance.isValid()) {
       const { times } = getSplineAndTimesForInstance(instance);
-      return times.at(-1);
+      return Math.round(times.at(-1) * 100) / 100;
     }
     return 0;
   }
@@ -208,6 +204,7 @@
     setup() {
       const app = inject('vcsApp');
       const flightInstance = getProvidedFlightInstance();
+      const loop = ref(flightInstance.loop);
       const flightDuration = ref(getFlightDuration(flightInstance));
       const disablePlayer = ref(!(flightDuration.value > 0));
       const flightDurationListener = [
@@ -258,12 +255,9 @@
             return flightDuration.value;
           },
           set(value) {
-            if (
-              Number.isFinite(value) &&
-              value > 0 &&
-              flightDuration.value > 0
-            ) {
-              const factor = value / flightDuration.value;
+            const v = parseFloat(value);
+            if (Number.isFinite(v) && v > 0 && flightDuration.value > 0) {
+              const factor = v / flightDuration.value;
               [...flightInstance.anchors].forEach((anchor) => {
                 anchor.duration *= factor;
               });
@@ -273,9 +267,10 @@
         durationRule,
         loop: computed({
           get() {
-            return flightInstance?.loop;
+            return loop.value;
           },
           set(value) {
+            loop.value = !!value;
             flightInstance.loop = !!value;
           },
         }),