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

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;
           },
         }),

package/src/components/flight/VcsFlightPlayer.vue

@@ -4,8 +4,8 @@
     <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"
@@ -25,7 +25,8 @@
         :has-update="btn.hasUpdate"
         :background="btn.background"
         @click.stop="btn.callback($event)"
-        v-bind="{ ...$attrs, ...btn.listeners }"
+        v-bind="{ ...$attrs }"
+        v-on="btn.listeners ? btn.listeners : {}"
       />
       <span>{{ clockTime(clock.endTime) }}</span>
     </div>
@@ -49,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.
@@ -79,12 +93,19 @@
         flightInstance,
       );
 
+      let clockChangedListener = () => {};
       const playerChangedListener = app.flights.playerChanged.addEventListener(
         (player) => {
+          clockChangedListener();
           if (player?.flightInstanceName === flightInstance.name) {
             isCurrentPlayer.value = true;
             flightInstancePlayer = player;
-            clock.value = player.clock;
+            syncClocks(clock, player.clock);
+            clockChangedListener = player.clock.changed.addEventListener(
+              (changed) => {
+                syncClocks(clock, changed);
+              },
+            );
           } else {
             isCurrentPlayer.value = false;
             flightInstancePlayer = undefined;
@@ -96,7 +117,7 @@
       onMounted(async () => {
         flightInstancePlayer =
           await app.flights.setPlayerForFlight(flightInstance);
-        clock.value = flightInstancePlayer.clock;
+        syncClocks(clock, flightInstancePlayer.clock);
       });
 
       onUnmounted(() => {
@@ -114,6 +135,7 @@
           return `${mins}:${secs < 10 ? 0 : ''}${secs}`;
         },
         setTime(seconds) {
+          clock.value.currentTime = seconds;
           flightInstancePlayer?.goToTime(seconds);
         },
       };

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

@@ -5,38 +5,45 @@
     false-icon="$vcsCheckbox"
     indeterminate-icon="$vcsCheckboxIndeterminate"
     :hide-details="false"
+    class="vcs-checkbox"
     :class="{
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
   >
-    <template #label>
-      <slot name="label" />
-      <template v-if="!$slots.label">{{ $st($attrs.label) }}</template>
+    <template #label="scope">
+      <slot name="label" v-bind="scope ?? {}">{{ $st($attrs.label) }}</slot>
     </template>
-    <template #message="{ message }">
+    <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="message"
-        :text="message"
+        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="tooltip"
+      :text="$st(tooltip)"
     ></v-tooltip>
   </v-checkbox>
 </template>
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-selection-control) {
-    --v-selection-control-size: calc(var(--v-vcs-item-height) - 8px);
+    --v-selection-control-size: 20px;
     --v-input-control-height: calc(var(--v-vcs-item-height) - 16px);
   }
+  :deep(.v-input__control) {
+    height: calc(var(--v-vcs-item-height) - 8px);
+  }
   // remove ripple effect
   :deep(.v-selection-control__input::before) {
     background-color: transparent;
@@ -49,7 +56,7 @@
 <script>
   import { ref } from 'vue';
   import { VCheckbox, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useForwardSlots, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
@@ -76,12 +83,13 @@
         default: 'right',
       },
     },
-    setup(props, { attrs }) {
+    setup(props, { attrs, slots }) {
       const checkbox = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
-
+      const forwardSlots = useForwardSlots(slots, ['label', 'message']);
       return {
+        forwardSlots,
         paddingProvided,
         checkbox,
         errorTooltip,

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

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

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex d-inline-block align-center"
+    class="d-flex d-inline-block align-center vcs-chip-array-input"
     :class="{
       'py-1': !paddingProvided,
     }"

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

@@ -1,5 +1,12 @@
 <template>
-  <v-row no-gutters v-if="localValue">
+  <v-row
+    no-gutters
+    v-if="localValue"
+    class="vcs-coordinate"
+    :class="{
+      'py-1': !paddingProvided,
+    }"
+  >
     <slot name="prepend" v-bind="{ ...$props }" />
     <template v-for="(_, idx) in localValue">
       <v-col :key="`${prefixes[idx]}-coordinate`" v-if="!hideZ || idx < 2">
@@ -7,6 +14,7 @@
           :id="`${prefixes[idx]}-coordinate`"
           :hide-spin-buttons="true"
           type="number"
+          class="py-0"
           :min="getRangeFromExtent(idx, extent)?.[0]"
           :max="getRangeFromExtent(idx, extent)?.[1]"
           :step="steps[idx]"
@@ -33,6 +41,7 @@
   import { between } from '../style/composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
+  import { usePadding } from '../composables.js';
 
   /**
    *
@@ -114,11 +123,14 @@
         default: () => [[], [], []],
       },
     },
+    emits: ['update:modelValue'],
     setup(props, { attrs, emit }) {
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       const noListenerAttrs = computed(() => removeListenersFromAttrs(attrs));
+      const paddingProvided = usePadding(attrs);
 
       return {
+        paddingProvided,
         localValue,
         noListenerAttrs,
         getRangeFromExtent,

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

@@ -32,11 +32,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[][];
     };
 }, {
+    paddingProvided: import("vue").ComputedRef<boolean>;
     localValue: import("vue").Ref<any>;
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     getRangeFromExtent: typeof getRangeFromExtent;
     getRulesForAxis(idx: any): any[];
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: () => number[];
@@ -69,7 +70,9 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[][];
     };
-}>>, {
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
     modelValue: unknown[];
     decimals: unknown[];
     extent: unknown[];

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

@@ -1,47 +1,45 @@
 <template>
-  <v-menu
-    v-model="menuOpen"
-    :close-on-content-click="false"
-    transition="scale-transition"
-    max-width="290px"
-    min-width="290px"
+  <VcsTextField
+    :prepend-icon="icon"
+    class="vcs-date-picker"
+    readonly
+    v-bind="$attrs"
+    v-model="formattedDate"
   >
-    <template #activator="{ props }">
-      <VcsTextField
-        :placeholder="formatDate(new Date().toISOString())"
-        :prepend-icon="icon"
-        readonly
-        hide-details
-        class="ma-0 py-1"
-        v-bind="props"
-        v-model="formattedDate"
-      />
-    </template>
-    <v-date-picker
-      v-model="date"
-      hide-header
-      @update:model-value="menuOpen = false"
-      color="primary"
+    <v-menu
+      activator="parent"
+      v-model="menuOpen"
+      :close-on-content-click="false"
+      transition="scale-transition"
+      max-width="290px"
+      min-width="290px"
     >
-      <template #actions>
-        <v-btn color="primary" @click="goToToday">
-          {{ $t('datePicker.today') }}
-        </v-btn>
-      </template>
-    </v-date-picker>
-  </v-menu>
+      <v-date-picker
+        v-model="localValue"
+        hide-header
+        @update:model-value="menuOpen = false"
+        color="primary"
+      >
+        <template #actions>
+          <v-btn color="primary" @click="goToToday">
+            {{ $t('datePicker.today') }}
+          </v-btn>
+        </template>
+      </v-date-picker>
+    </v-menu>
+  </VcsTextField>
 </template>
 <style lang="scss" scoped></style>
 <script>
-  import { computed, ref, watch, onBeforeMount } from 'vue';
+  import { computed, ref } from 'vue';
   import { VMenu, VDatePicker, VBtn } from 'vuetify/components';
   import { useI18n } from 'vue-i18n';
-  import { getLogger } from '@vcsuite/logger';
   import VcsTextField from './VcsTextField.vue';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
 
   /**
-   * @description stylized wrapper around {@link https://v15.vuetifyjs.com/en/components/date-pickers/#month-pickers-in-dialog-and-menu}.
-   * @vue-prop {string} modelValue - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
+   * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/date-pickers/#internationalization}.
+   * @vue-prop {Date} modelValue - value of the date picker as a Date (changes to the Date Object are not tracked, handled as atomic value)
    * @vue-prop {string} [icon] - specify optional prepend icon, defaults to mdi-calendar
    */
   export default {
@@ -65,27 +63,14 @@
     emits: ['update:modelValue'],
     setup(props, { emit }) {
       const i18n = useI18n();
-      const localValue = ref(props.modelValue);
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
       const menuOpen = ref(false);
 
-      const isValid = (date) => !Number.isNaN(date.getTime());
-      const setFromValue = () => {
-        if (isValid(props.modelValue)) {
-          localValue.value = props.modelValue;
-        } else if (localValue.value) {
-          getLogger('VcsDatePicker').error(
-            'Invalid date provided: ',
-            props.modelValue,
-          );
-        }
-      };
-      onBeforeMount(() => setFromValue());
-
       const formatDate = (date) => {
         if (date) {
           return new Intl.DateTimeFormat(i18n.locale.value, {
             dateStyle: 'short',
-          }).format(Date.parse(date));
+          }).format(date);
         }
         return '';
       };
@@ -93,27 +78,16 @@
         localValue.value = new Date();
         menuOpen.value = false;
       };
-      watch(
-        () => props.modelValue,
-        () => setFromValue(),
-      );
       const formattedDate = computed({
         get: () => {
           return formatDate(localValue.value);
         },
         set: () => {},
       });
-      const date = computed({
-        get: () => localValue.value,
-        set: (nv) => {
-          localValue.value = nv;
-          emit('update:modelValue', localValue.value);
-        },
-      });
 
       return {
         formattedDate,
-        date,
+        localValue,
         menuOpen,
         formatDate,
         goToToday,