@vcmap/ui 6.0.0-rc.9 → 6.0.0

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/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) {

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.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: {
@@ -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/VcsTextField.vue

@@ -55,7 +55,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import './vcsTextField.scss';
+  @use './vcsTextField.scss';
 </style>
 <script>
   import { computed, ref } from 'vue';

package/src/components/form-inputs-controls/VcsWizardStep.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): 0 | never[];
     };
     step: {
@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | NumberConstructor | ArrayConstructor)[];
         default(rawProps: any): 0 | never[];
     };
     step: {

package/src/components/import/VcsImportComponent.vue

@@ -13,15 +13,15 @@
       v-model="files"
     />
     <div class="d-flex justify-end gc-1 mx-3 pt-2 pb-1">
-      <vcs-form-button @click="$emit('close')">
-        {{ $t('components.cancel') }}
-      </vcs-form-button>
       <vcs-form-button
         variant="filled"
         :disabled="files.length === 0"
         @click="doImport"
         >{{ $t('components.import.submit') }}</vcs-form-button
       >
+      <vcs-form-button @click="$emit('close')">
+        {{ $t('components.cancel') }}
+      </vcs-form-button>
     </div>
   </v-card>
 </template>

package/src/components/lists/VcsActionList.vue

@@ -13,7 +13,7 @@
       </template>
       <v-list-item-title>{{ $st(action.name) }}</v-list-item-title>
       <v-tooltip
-        v-if="action.title"
+        v-if="action.title && $st(action.title)"
         activator="parent"
         :text="$st(action.title)"
         :location="tooltipPosition"

package/src/components/lists/VcsList.vue

@@ -86,6 +86,7 @@
     getCurrentInstance,
     inject,
     isReactive,
+    reactive,
     ref,
     shallowRef,
     watch,
@@ -109,36 +110,48 @@
    * @returns {Array<import("../../actions/actionHelper.js").VcsAction>}
    */
   export function createSelectionActions(items, selected, emit) {
-    return [
-      {
-        name: 'list.selectAll',
-        tooltip: 'list.selectAll',
-        callback() {
-          const currentSelection = [...selected.value];
-          selected.value = items.value.filter((item) => !item.disabled);
+    const selectAllAction = reactive({
+      name: 'list.selectAll',
+      tooltip: 'list.selectAll',
+      disabled: items.value.length - selected.value.length < 1,
+      callback() {
+        const currentSelection = [...selected.value];
+        selected.value = items.value.filter((item) => !item.disabled);
 
-          selected.value.forEach((item) => {
-            if (item.selectionChanged && !currentSelection.includes(item)) {
-              item.selectionChanged(true);
-            }
-          });
-          emit('update:modelValue', selected.value);
-        },
+        selected.value.forEach((item) => {
+          if (item.selectionChanged && !currentSelection.includes(item)) {
+            item.selectionChanged(true);
+          }
+        });
+        emit('update:modelValue', selected.value);
       },
-      {
-        name: 'list.clearSelection',
-        tooltip: 'list.clearSelection',
-        callback() {
-          [...selected.value].forEach((item) => {
-            if (item.selectionChanged) {
-              item.selectionChanged(false);
-            }
-          });
-          selected.value = [];
-          emit('update:modelValue', selected.value);
-        },
+    });
+    const clearSelectionAction = reactive({
+      name: 'list.clearSelection',
+      tooltip: 'list.clearSelection',
+      disabled: selected.value.length < 1,
+      callback() {
+        [...selected.value].forEach((item) => {
+          if (item.selectionChanged) {
+            item.selectionChanged(false);
+          }
+        });
+        selected.value = [];
+        emit('update:modelValue', selected.value);
       },
-    ];
+    });
+
+    watch(
+      [items, selected],
+      () => {
+        selectAllAction.disabled =
+          items.value.length - selected.value.length < 1;
+        clearSelectionAction.disabled = selected.value.length < 1;
+      },
+      { deep: false, immediate: true },
+    );
+
+    return [selectAllAction, clearSelectionAction];
   }
 
   /**
@@ -572,7 +585,7 @@
       }
       &:hover {
         .v-list-item__overlay {
-          background-color: rgb(var(--v-theme-base));
+          background-color: rgb(var(--v-theme-on-surface));
         }
       }
       .vcs-list-title__selected {
@@ -593,7 +606,7 @@
 
       &:hover {
         .v-list-item__overlay {
-          background-color: transparent;
+          background-color: rgb(var(--v-theme-on-surface));
         }
       }
     }

package/src/components/lists/VcsListItemComponent.vue

@@ -207,7 +207,7 @@
       width: 8px;
     }
     :deep(.v-list-item__overlay) {
-      background-color: transparent;
+      background-color: rgb(var(--v-theme-on-surface));
     }
     :deep(.vcs-list-item__rename) {
       color: rgb(var(--v-theme-on-surface));

package/src/components/lists/VcsListItemComponent.vue.d.ts

@@ -3,38 +3,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
         readonly [x: string]: any;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    prepend?(_: {
-        isActive: boolean;
-        isOpen: boolean;
-        isSelected: boolean;
-        isIndeterminate: boolean;
-        select: (value: boolean) => void;
-    }): any;
-    title?(_: {
-        tooltip: string;
-        title?: string | number | undefined;
-    }): any;
-    subtitle?(_: {
-        subtitle?: string | number | undefined;
-    }): any;
-    default?(_: {
-        tooltip: string;
-        isActive: boolean;
-        isOpen: boolean;
-        isSelected: boolean;
-        isIndeterminate: boolean;
-        select: (value: boolean) => void;
-    }): any;
-    append?(_: {
-        item: any;
-        actions: any[];
-        actionButtonListOverflowCount: any;
-        isActive: boolean;
-        isOpen: boolean;
-        isSelected: boolean;
-        isIndeterminate: boolean;
-        select: (value: boolean) => void;
-    }): any;
+    prepend?(_: any): any;
+    title?(_: any): any;
+    subtitle?(_: any): any;
+    default?(_: any): any;
+    append?(_: any): any;
 }>;
 export default _default;
 export type VcsListItem = {

package/src/components/lists/VcsTreeview.vue

@@ -92,6 +92,8 @@
       width: var(--v-vcs-font-size);
       height: var(--v-vcs-font-size);
       margin: auto;
+      // for alignment of chevron
+      display: flex;
     }
   }
 

package/src/components/notification/VcsHelp.vue

@@ -13,7 +13,6 @@
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;
-    padding-left: 16px;
     ol,
     ul {
       padding-left: 16px; /* Indentation for list items */

package/src/components/notification/VcsHelpTooltip.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-tooltip class="vcs-help-tooltip">
+    <template #activator="{ props }">
+      <v-icon :size="fontSize" v-bind="props" :icon="icon" />
+    </template>
+    <v-container class="py-1 px-2 vcs-help-tooltip-container">
+      <slot>
+        <span class="vcs-help-tooltip-text">{{ $st(text) }}</span>
+      </slot>
+    </v-container>
+  </v-tooltip>
+</template>
+<style lang="scss" scoped></style>
+<script>
+  import { VTooltip, VIcon, VContainer } from 'vuetify/components';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
+
+  /**
+   * @description A component for displaying help as tooltip via an icon.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+   */
+  export default {
+    name: 'VcsHelpTooltip',
+    components: {
+      VTooltip,
+      VIcon,
+      VContainer,
+    },
+    props: {
+      icon: {
+        type: String,
+        default: '$vcsHelp',
+      },
+      text: {
+        type: String,
+        default: undefined,
+      },
+    },
+    setup() {
+      const fontSize = useFontSize();
+
+      return {
+        fontSize,
+      };
+    },
+  };
+</script>

package/src/components/notification/VcsHelpTooltip.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    fontSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    text: string;
+    icon: string;
+}, {}>;
+export default _default;