@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/components/flight/VcsFlightComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-flight-component">
     <VcsFormSection
       :heading="heading"
       :expandable="expandable"
@@ -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="`${cid}-name`" required>
               {{ $t('components.flight.name') }}
             </VcsLabel>
           </v-col>
           <v-col>
-            <VcsTextField id="name" dense clearable v-model="name" />
+            <VcsTextField :id="`${cid}-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="`${cid}-title`">
               {{ $t('components.flight.title') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="title"
-              dense
+              :id="`${cid}-title`"
               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="`${cid}-interpolation`">
               {{ $t('components.flight.interpolation') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSelect
-              id="title"
-              dense
+              :id="`${cid}-interpolation`"
               :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,17 +60,17 @@
         </v-row>
         <v-row no-gutters v-if="!hideDuration">
           <v-col cols="6">
-            <VcsLabel html-for="duration" dense>
+            <VcsLabel :html-for="`${cid}-duration`">
               {{ $t('components.flight.duration') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="duration"
-              v-model.number="duration"
+              :id="`${cid}-duration`"
+              v-model="duration"
+              :hide-spin-buttons="true"
               type="number"
               unit="s"
-              step="1"
               :decimals="2"
               :disabled="disablePlayer"
               :rules="[durationRule]"
@@ -81,12 +79,7 @@
         </v-row>
         <v-row no-gutters v-if="!hideLoop">
           <v-col cols="6">
-            <VcsCheckbox
-              id="animate"
-              label="components.flight.loop"
-              dense
-              v-model="loop"
-            />
+            <VcsCheckbox label="components.flight.loop" v-model="loop" />
           </v-col>
         </v-row>
       </v-container>
@@ -103,9 +96,9 @@
 
 <script>
   import { computed, onUnmounted, ref, inject } from 'vue';
-  import { VSheet, VContainer, VRow, VCol, VDivider } from 'vuetify/lib';
+  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';
@@ -119,6 +112,7 @@
     getProvidedFlightInstance,
     setupFlightAnchorEditingListener,
   } from './composables.js';
+  import { useComponentId } from '../composables.js';
 
   /**
    * @param {import("@vcmap/core").FlightInstance} instance
@@ -127,7 +121,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;
   }
@@ -207,6 +201,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 = [
@@ -230,6 +225,8 @@
         editingListener();
       });
 
+      const cid = useComponentId();
+
       return {
         name: flightInstance.name,
         title: computed({
@@ -257,12 +254,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;
               });
@@ -272,13 +266,15 @@
         durationRule,
         loop: computed({
           get() {
-            return flightInstance?.loop;
+            return loop.value;
           },
           set(value) {
+            loop.value = !!value;
             flightInstance.loop = !!value;
           },
         }),
         disablePlayer,
+        cid,
       };
     },
   };

package/src/components/flight/VcsFlightComponent.vue.d.ts

@@ -42,12 +42,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     name: string;
     title: import("vue").WritableComputedRef<unknown>;
-    interpolation: import("vue").WritableComputedRef<import("@vcmap/core").FlightInterpolation>;
+    interpolation: import("vue").WritableComputedRef<import("@vcmap/core", { with: { "resolution-mode": "import" } }).FlightInterpolation>;
     duration: import("vue").WritableComputedRef<number>;
     durationRule: typeof durationRule;
     loop: import("vue").WritableComputedRef<boolean>;
     disablePlayer: 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<{
+    cid: string;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;
         default: string;
@@ -89,8 +90,8 @@ declare const _default: import("vue").DefineComponent<{
         default: symbol;
     };
 }>>, {
-    parentId: string;
     owner: string | symbol;
+    parentId: string;
     heading: string;
     expandable: boolean;
     hideName: boolean;
@@ -99,6 +100,6 @@ declare const _default: import("vue").DefineComponent<{
     hideInterpolation: boolean;
     hideDuration: boolean;
     hideLoop: boolean;
-}>;
+}, {}>;
 export default _default;
 import { durationRule } from './VcsFlightAnchorsComponent.vue';

package/src/components/flight/VcsFlightEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <AbstractConfigEditor
+    class="vcs-flight-editor"
     @submit="apply"
     @cancel="cancel"
     @reset="reset"

package/src/components/flight/VcsFlightEditor.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     apply(): Promise<void>;
     cancel(): Promise<void>;
     reset(): Promise<void>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     getFlightInstance: {
         type: FunctionConstructor;
         required: true;
@@ -30,5 +30,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     resetFlightInstance: Function;
-}>;
+}, {}>;
 export default _default;

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-container class="py-0 px-1">
-    <VcsLabel>{{ $t('flight.player') }}</VcsLabel>
+  <v-container class="py-0 px-1 vcs-flight-player">
+    <VcsLabel html-for="player">{{ $t('flight.player') }}</VcsLabel>
     <VcsSlider
       v-if="clock"
       type="number"
-      v-model="clock.currentTime"
-      @change="setTime"
+      :model-value="clock.currentTime"
+      @update:modelValue="setTime"
       :step="0"
       :min="clock.startTime"
       :max="clock.endTime"
@@ -26,7 +26,7 @@
         :background="btn.background"
         @click.stop="btn.callback($event)"
         v-bind="{ ...$attrs }"
-        v-on="{ ...$listeners, ...btn.listeners }"
+        v-on="btn.listeners ? btn.listeners : {}"
       />
       <span>{{ clockTime(clock.endTime) }}</span>
     </div>
@@ -34,7 +34,7 @@
 </template>
 <script>
   import { inject, onMounted, onUnmounted, ref } from 'vue';
-  import { VContainer } from 'vuetify/lib';
+  import { VContainer } from 'vuetify/components';
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsButton from '../buttons/VcsButton.vue';
@@ -50,6 +50,19 @@
     };
   }
 
+  /**
+   *
+   * @param {import("vue").Ref<Partial<import("@vcmap/core").FlightPlayerClock>>} clock
+   * @param {import("@vcmap/core").FlightPlayerClock} changed
+   */
+  function syncClocks(clock, changed) {
+    Object.keys(getDefaultClock()).forEach((key) => {
+      if (clock.value[key] !== changed[key]) {
+        clock.value[key] = changed[key];
+      }
+    });
+  }
+
   /**
    * @description A component for editing flight anchors.
    * Requires a flightInstance to be provided via vue-provide.
@@ -80,24 +93,37 @@
         flightInstance,
       );
 
-      const playerChangedListener = app.flights.playerChanged.addEventListener(
-        (player) => {
-          if (player?.flightInstanceName === flightInstance.name) {
-            isCurrentPlayer.value = true;
-            flightInstancePlayer = player;
-            clock.value = player.clock;
-          } else {
-            isCurrentPlayer.value = false;
-            flightInstancePlayer = undefined;
-            clock.value = getDefaultClock();
-          }
-        },
-      );
+      let clockChangedListener = () => {};
+      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);
-        clock.value = flightInstancePlayer.clock;
+        syncPlayer(flightInstancePlayer);
+        syncClocks(clock, flightInstancePlayer.clock);
+        playerChangedListener = app.flights.playerChanged.addEventListener(
+          (player) => {
+            clockChangedListener();
+            syncPlayer(player);
+          },
+        );
       });
 
       onUnmounted(() => {
@@ -115,6 +141,7 @@
           return `${mins}:${secs < 10 ? 0 : ''}${secs}`;
         },
         setTime(seconds) {
+          clock.value.currentTime = seconds;
           flightInstancePlayer?.goToTime(seconds);
         },
       };

package/src/components/flight/VcsFlightPlayer.vue.d.ts

@@ -10,16 +10,16 @@ declare const _default: import("vue").DefineComponent<{
         currentTime: number;
         times: never[];
     }>;
-    actions: import("../../actions/actionHelper.js").VcsAction[];
+    actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
     isCurrentPlayer: import("vue").Ref<boolean>;
     clockTime(seconds: any): string;
     setTime(seconds: any): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
     disabled: boolean;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,115 +1,110 @@
 <template>
-  <VcsTooltip
-    :tooltip-position="tooltipPosition"
-    :tooltip="errorMessage"
-    color="error"
-    :max-width="200"
+  <v-checkbox
+    ref="checkbox"
+    true-icon="$vcsCheckboxChecked"
+    false-icon="$vcsCheckbox"
+    indeterminate-icon="$vcsCheckboxIndeterminate"
+    :hide-details="false"
+    class="vcs-checkbox"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+    v-bind="$attrs"
   >
-    <template #activator="{ on, attrs }">
-      <span v-on="on">
-        <v-checkbox
-          ref="checkbox"
-          :input-value="$attrs.value"
-          on-icon="$vcsCheckboxChecked"
-          off-icon="$vcsCheckbox"
-          class="vcs-checkbox"
-          :class="{ 'pl-1': !isDense }"
-          hide-details
-          indeterminate-icon="$vcsCheckboxIndeterminate"
-          :dense="isDense"
-          :ripple="false"
-          v-bind="{ ...$attrs, ...attrs }"
-          v-on="{ ...$listeners, ...on }"
-        >
-          <template #label>
-            <VcsLabel :html-for="$attrs.id" :dense="isDense">
-              <slot name="label" />
-              <span v-if="!$slots.label">{{ $t($attrs.label) }}</span>
-            </VcsLabel>
-          </template>
-        </v-checkbox>
+    <template #label="scope" v-if="label || $slots.label">
+      <span class="pl-1">
+        <slot name="label" v-bind="scope ?? {}">{{ $st(label) }}</slot>
       </span>
     </template>
-  </VcsTooltip>
+    <template v-for="slot of forwardSlots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope ?? {}" />
+    </template>
+    <template #message="scope">
+      <v-tooltip
+        ref="errorTooltip"
+        :activator="checkbox"
+        v-if="scope?.message"
+        :text="$st(scope?.message)"
+        content-class="bg-error"
+        :location="tooltipPosition"
+      />
+      <slot name="message" v-bind="scope ?? {}"></slot>
+    </template>
+    <v-tooltip
+      v-if="tooltip && !errorTooltip"
+      :activator="checkbox"
+      :location="tooltipPosition"
+      :text="$st(tooltip)"
+    ></v-tooltip>
+  </v-checkbox>
 </template>
 <style lang="scss" scoped>
-  @import '../../styles/shades.scss';
-  .vcs-checkbox {
-    ::v-deep {
-      .v-input--selection-controls__input {
-        margin: 0;
-        padding: 0;
-      }
-      label.v-label.error--text {
-        animation: none;
-      }
-
-      .primary--text,
-      .v-label:not(.v-label--is-disabled) {
-        &.theme--light {
-          color: map-get($shades, 'black') !important;
-          &.error--text {
-            color: var(--v-error-base) !important;
-          }
-        }
-        &.theme--dark {
-          color: map-get($shades, 'white') !important;
-          &.error--text {
-            color: var(--v-error-base) !important;
-          }
-        }
-      }
-    }
+  :deep(.v-icon--size-default) {
+    font-size: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3));
+  }
+  .v-input--density-compact :deep(.v-selection-control) {
+    --v-selection-control-size: calc(
+      var(--v-vcs-font-size) * (1.2 + 0.1 / 3) + 4
+    );
+    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
   }
-  .v-input--selection-controls {
-    margin: 0;
-    padding: 0;
+  :deep(.v-input__control) {
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
+  }
+  // remove ripple effect
+  :deep(.v-selection-control__input::before) {
+    background-color: transparent;
+  }
+  // remove details
+  :deep(.v-input__details) {
+    display: none;
   }
 </style>
 <script>
-  import { computed, ref } from 'vue';
-  import { VCheckbox } from 'vuetify/lib';
-  import VcsLabel from './VcsLabel.vue';
-  import VcsTooltip from '../notification/VcsTooltip.vue';
-  import { useErrorSync } from './composables.js';
+  import { ref } from 'vue';
+  import { VCheckbox, VTooltip } from 'vuetify/components';
+  import { getForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
-   * Provides two height options depending on "dense" property:
-   * - if dense is set true (default), height is 24 px
-   * - if dense is set false, height is 32 px
-   * Provides VcsTooltip to show error messages
-   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
-   * @vue-prop {string} label - Label to be displayed, will be translated.
+   * 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-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
    */
   export default {
     name: 'VcsCheckbox',
+    inheritAttrs: true,
     components: {
-      VcsTooltip,
-      VcsLabel,
+      VTooltip,
       VCheckbox,
     },
     props: {
+      tooltip: {
+        type: String,
+        default: undefined,
+      },
       tooltipPosition: {
         type: String,
         default: 'right',
       },
+      label: {
+        type: String,
+        default: undefined,
+      },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const checkbox = ref();
-
-      const errorMessage = useErrorSync(checkbox);
-      const isDense = computed(() => attrs.dense !== false);
-
+      const errorTooltip = ref();
+      const paddingProvided = usePadding(attrs);
+      const forwardSlots = getForwardSlots(slots, ['label', 'message']);
       return {
+        forwardSlots,
+        paddingProvided,
         checkbox,
-        errorMessage,
-        isDense,
+        errorTooltip,
       };
     },
-    model: {
-      event: 'change',
-    },
   };
 </script>

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

@@ -1,18 +1,37 @@
 declare const _default: import("vue").DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }, {
+    forwardSlots: string[];
+    paddingProvided: import("vue").ComputedRef<boolean>;
     checkbox: import("vue").Ref<any>;
-    errorMessage: import("vue").Ref<string>;
-    isDense: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    errorTooltip: import("vue").Ref<any>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
     tooltipPosition: {
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>>, {
+    label: string;
+    tooltip: string;
     tooltipPosition: string;
-}>;
+}, {}>;
 export default _default;