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

package/src/components/composables.js

@@ -1,4 +1,4 @@
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
 /**
  * returns a computed which is true, if the provided attributes contain one or more
@@ -30,6 +30,35 @@ export function useForwardSlots(slots, exclude = []) {
   });
 }
 
+let intersectionObserver = null;
+/** @type {WeakMap<WeakKey<HTMLElement>, import("vue").ComputedRef<boolean>>} */
+const observedTargets = new WeakMap();
+
+/**
+ * if the visibility of the element changes, the computed ref will be set.
+ * @param {HTMLElement} elem
+ * @param {import("vue").ComputedRef<boolean>} visible
+ * @returns {() => void}}
+ */
+function registerTargetWithIntersectionObserver(elem, visible) {
+  if (!intersectionObserver) {
+    intersectionObserver = new IntersectionObserver((targets) => {
+      targets.forEach((target) => {
+        const visibilityRef = observedTargets.get(target.target);
+        if (visibilityRef) {
+          visibilityRef.value = target.isIntersecting;
+        }
+      });
+    });
+  }
+  intersectionObserver.observe(elem);
+  observedTargets.set(elem, visible);
+  return () => {
+    intersectionObserver.unobserve(elem);
+    observedTargets.delete(elem);
+  };
+}
+
 /**
  * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
  * @param {import("vue").ComputedRef<string|undefined>} tooltip
@@ -39,19 +68,49 @@ export function useForwardSlots(slots, exclude = []) {
 export function createEllipseTooltip(parent, tooltip, title) {
   const offsetWidth = ref(0);
   const scrollWidth = ref(0);
-
-  watch([parent, title], async () => {
-    const elem = parent.value;
-    if (elem) {
-      await nextTick(() => {
-        offsetWidth.value = elem.offsetWidth;
-        scrollWidth.value = elem.scrollWidth;
-      });
+  const visible = ref(false);
+  let observerListener = () => {};
+  watch(visible, () => {
+    if (visible.value && parent.value) {
+      offsetWidth.value = parent.value.offsetWidth;
+      scrollWidth.value = parent.value.scrollWidth;
     } else {
       offsetWidth.value = 0;
       scrollWidth.value = 0;
     }
   });
+  watch(
+    parent,
+    () => {
+      observerListener();
+      visible.value = false;
+      const elem = parent.value;
+      if (elem) {
+        if (elem.checkVisibility()) {
+          visible.value = true;
+        } else {
+          observerListener = registerTargetWithIntersectionObserver(
+            elem,
+            visible,
+          );
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(title, async () => {
+    if (visible.value) {
+      await nextTick(() => {
+        offsetWidth.value = parent.value.offsetWidth;
+        scrollWidth.value = parent.value.scrollWidth;
+      });
+    }
+  });
+
+  onUnmounted(() => {
+    observerListener();
+  });
 
   return computed(() => {
     if (tooltip.value) {
@@ -63,3 +122,14 @@ export function createEllipseTooltip(parent, tooltip, title) {
     return '';
   });
 }
+
+let componentIdCounter = 0;
+
+/**
+ * Returns a globally unique vcs component id string
+ * @returns {string}
+ */
+export function useComponentId() {
+  componentIdCounter += 1;
+  return `vcs-${componentIdCounter}`;
+}

package/src/components/extent/VcsExtent.vue

@@ -2,13 +2,13 @@
   <v-container class="py-0 px-1">
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
-        <VcsLabel html-for="projection">
+        <VcsLabel :html-for="`${cid}-projection`">
           {{ $t('components.extent.projection') }}
         </VcsLabel>
       </v-col>
       <v-col>
         <VcsTextField
-          id="projection"
+          :id="`${cid}-projection`"
           disabled
           :model-value="modelValue.projection.epsg"
         />
@@ -23,9 +23,9 @@
         [(v) => checkInput(v, max[1])],
       ]"
     >
-      <template #prepend="{ prefixes }">
+      <template #prepend>
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`">
+          <VcsLabel>
             {{ $t('components.extent.min') }}
           </VcsLabel>
         </v-col>
@@ -40,9 +40,9 @@
         [(v) => checkInput(min[1], v)],
       ]"
     >
-      <template #prepend="{ prefixes }">
+      <template #prepend>
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`">
+          <VcsLabel>
             {{ $t('components.extent.max') }}
           </VcsLabel>
         </v-col>
@@ -59,6 +59,7 @@
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useComponentId } from '../composables.js';
 
   function checkInput(min, max) {
     return min < max || 'components.extent.invalid';
@@ -114,10 +115,13 @@
           },
         });
 
+      const cid = useComponentId();
+
       return {
         min: getCoordinate(0, 2),
         max: getCoordinate(2),
         checkInput,
+        cid,
       };
     },
   };

package/src/components/extent/VcsExtent.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     min: import("vue").WritableComputedRef<any>;
     max: import("vue").WritableComputedRef<any>;
     checkInput: typeof checkInput;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/flight/VcsFlightComponent.vue

@@ -18,23 +18,23 @@
       <v-container class="py-0 px-1">
         <v-row no-gutters v-if="!hideName">
           <v-col cols="6">
-            <VcsLabel html-for="name" required>
+            <VcsLabel :html-for="`${cid}-name`" required>
               {{ $t('components.flight.name') }}
             </VcsLabel>
           </v-col>
           <v-col>
-            <VcsTextField id="name" 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">
+            <VcsLabel :html-for="`${cid}-title`">
               {{ $t('components.flight.title') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="title"
+              :id="`${cid}-title`"
               clearable
               :placeholder="$t('components.flight.titlePlaceholder')"
               v-model="title"
@@ -43,13 +43,13 @@
         </v-row>
         <v-row no-gutters v-if="!hideInterpolation">
           <v-col cols="6">
-            <VcsLabel html-for="interpolation">
+            <VcsLabel :html-for="`${cid}-interpolation`">
               {{ $t('components.flight.interpolation') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSelect
-              id="title"
+              :id="`${cid}-interpolation`"
               :items="[
                 { value: 'spline', title: 'components.flight.spline' },
                 { value: 'linear', title: 'components.flight.linear' },
@@ -60,13 +60,13 @@
         </v-row>
         <v-row no-gutters v-if="!hideDuration">
           <v-col cols="6">
-            <VcsLabel html-for="duration">
+            <VcsLabel :html-for="`${cid}-duration`">
               {{ $t('components.flight.duration') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="duration"
+              :id="`${cid}-duration`"
               v-model="duration"
               :hide-spin-buttons="true"
               type="number"
@@ -79,11 +79,7 @@
         </v-row>
         <v-row no-gutters v-if="!hideLoop">
           <v-col cols="6">
-            <VcsCheckbox
-              id="animate"
-              label="components.flight.loop"
-              v-model="loop"
-            />
+            <VcsCheckbox label="components.flight.loop" v-model="loop" />
           </v-col>
         </v-row>
       </v-container>
@@ -116,6 +112,7 @@
     getProvidedFlightInstance,
     setupFlightAnchorEditingListener,
   } from './composables.js';
+  import { useComponentId } from '../composables.js';
 
   /**
    * @param {import("@vcmap/core").FlightInstance} instance
@@ -228,6 +225,8 @@
         editingListener();
       });
 
+      const cid = useComponentId();
+
       return {
         name: flightInstance.name,
         title: computed({
@@ -275,6 +274,7 @@
           },
         }),
         disablePlayer,
+        cid,
       };
     },
   };

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

@@ -47,6 +47,7 @@ declare const _default: import("vue").DefineComponent<{
     durationRule: typeof durationRule;
     loop: import("vue").WritableComputedRef<boolean>;
     disablePlayer: import("vue").Ref<boolean>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;

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

@@ -37,12 +37,17 @@
   </v-checkbox>
 </template>
 <style lang="scss" scoped>
+  :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: 20px;
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 16px);
+    --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);
   }
   :deep(.v-input__control) {
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
   // remove ripple effect
   :deep(.v-selection-control__input::before) {

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

@@ -23,24 +23,21 @@
       <div v-for="({ key, value }, index) in localValue" :key="key">
         <v-chip
           v-if="selected !== index"
-          v-bind="{ ...noListenerAttrs }"
           size="small"
           :disabled="disabled"
           :closable="deletableChips"
           @click="select(index)"
           @click:close="remove(index)"
+          v-bind="{ ...noListenerAttrs }"
         >
           <span class="text-truncate d-inline-block">{{ value }}</span>
         </v-chip>
         <VcsTextField
           v-else
-          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
           hide-spin-buttons
-          :height="useItemHeight().value - 8"
-          v-model="editValue"
           @keydown.esc="selected = -1"
           @blur="selected = -1"
           @keydown.enter="submitChange($event)"
@@ -48,27 +45,26 @@
           append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
           class="py-0"
+          v-bind="{ ...noListenerAttrs }"
+          v-model="editValue"
         />
       </div>
       <div>
         <v-chip
           v-if="adding === false"
-          v-bind="{ ...noListenerAttrs }"
           size="small"
           :disabled="disabled"
           @click="adding = true"
+          v-bind="{ ...noListenerAttrs }"
         >
           <v-icon>$vcsPlus</v-icon>
         </v-chip>
         <VcsTextField
           v-else
-          v-bind="{ ...noListenerAttrs }"
           rounded
           filled
           autofocus
           hide-spin-buttons
-          :height="useItemHeight().value - 8"
-          v-model="newValue"
           @keydown.enter="add($event, newValue)"
           @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
@@ -76,6 +72,8 @@
           append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
           class="py-0"
+          v-bind="{ ...noListenerAttrs }"
+          v-model="newValue"
         />
       </div>
     </div>
@@ -96,10 +94,11 @@
     display: none;
   }
   .v-chip.v-chip--size-small {
-    --v-chip-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-chip-height: calc(var(--v-vcs-font-size) * 2 - 2px);
+    padding: 0 calc(var(--v-vcs-font-size) - 3px);
   }
   :deep(.v-icon--size-x-small) {
-    font-size: 18px;
+    font-size: calc(var(--v-vcs-font-size) + 3px);
   }
   .row-gap {
     row-gap: 8px !important;
@@ -111,7 +110,6 @@
   import { VChip, VIcon } from 'vuetify/components';
   import { v4 as uuid } from 'uuid';
   import { usePadding } from '../composables.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsTextField from './VcsTextField.vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
@@ -166,8 +164,8 @@
     setup(props, { attrs, emit }) {
       const selected = ref(-1);
       const adding = ref(false);
-      const editValue = ref(undefined);
-      const newValue = ref(undefined);
+      const editValue = ref(null);
+      const newValue = ref(null);
       const vcsChipArrayInput = ref();
       const hasScrollbar = ref();
 
@@ -247,7 +245,7 @@
       }
 
       function cancel() {
-        newValue.value = undefined;
+        newValue.value = null;
         adding.value = false;
       }
 
@@ -271,7 +269,7 @@
           vcsChipArrayInput.value.scrollLeft =
             vcsChipArrayInput.value.scrollWidth;
         }
-        newValue.value = undefined;
+        newValue.value = null;
         adding.value = true;
       }
 
@@ -294,7 +292,6 @@
         submitChange,
         add,
         cancel,
-        useItemHeight,
       };
     },
   };

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

@@ -29,8 +29,8 @@ declare const _default: import("vue").DefineComponent<{
     noListenerAttrs: import("vue").ComputedRef<Record<string, unknown>>;
     selected: import("vue").Ref<number>;
     adding: import("vue").Ref<boolean>;
-    editValue: import("vue").Ref<undefined>;
-    newValue: import("vue").Ref<undefined>;
+    editValue: import("vue").Ref<null>;
+    newValue: import("vue").Ref<null>;
     vcsChipArrayInput: import("vue").Ref<any>;
     hasScrollbar: import("vue").Ref<any>;
     remove: (index: any) => void;
@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
     submitChange: (e: any) => void;
     add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-    useItemHeight: typeof useItemHeight;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
@@ -75,4 +74,3 @@ declare const _default: import("vue").DefineComponent<{
     scrollDx: number;
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';

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

@@ -9,20 +9,20 @@
   >
     <slot name="prepend" v-bind="{ ...$props }" />
     <template v-for="(_, idx) in localValue">
-      <v-col :key="`${prefixes[idx]}-coordinate`" v-if="!hideZ || idx < 2">
+      <v-col :key="`coordinate-${idx}`" v-if="!hideZ || idx < 2">
         <VcsTextField
-          :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]"
-          :prefix="prefixes[idx]"
           :unit="units[idx]"
+          :prefix="prefixes[idx]"
+          force-prefix
           :decimals="decimals[idx]"
           v-bind="noListenerAttrs"
-          v-model="localValue[idx]"
+          v-model.number="localValue[idx]"
           :rules="getRulesForAxis(idx)"
         />
       </v-col>

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

@@ -46,7 +46,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: calc(var(--v-vcs-item-height) - 9px);
+    line-height: calc(var(--v-vcs-font-size) * 2 - 3px);
   }
 </style>
 

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

@@ -23,7 +23,7 @@
     box-sizing: content-box;
     display: flex;
     align-items: center;
-    height: calc(var(--v-vcs-item-height) - 8px);
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
     font-size: var(--v-vcs-font-size);
   }
   .vcs-label-required:after {

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

@@ -9,8 +9,8 @@
   >
     <v-radio
       v-for="(item, idx) in items"
-      :id="`${$.uid}-${idx}`"
-      :key="`${$.uid}-${idx}`"
+      :id="`${cid}-${idx}`"
+      :key="`${cid}-${idx}`"
       :value="item[itemValue] ?? item"
       :disabled="$attrs.disabled ?? item.disabled ?? false"
       :color="item?.color ?? undefined"
@@ -23,7 +23,7 @@
     >
       <template #label>
         <slot name="label" :item="item" :error="!!errorTooltip">
-          <span :html-for="`${$.uid}-${idx}`">
+          <span :html-for="`${cid}-${idx}`">
             {{ $st(item.label ?? item) }}
           </span>
         </slot>
@@ -50,8 +50,8 @@
 </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-input-control-height: calc(var(--v-vcs-item-height) - 16px);
+    --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 - 2px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) + 3px);
   }
   // remove ripple effect
   :deep(.v-selection-control__input::before) {
@@ -73,7 +73,7 @@
 <script>
   import { ref } from 'vue';
   import { VRadio, VRadioGroup, VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { useComponentId, usePadding } from '../composables.js';
 
   /**
    * @typedef {Object} VcsRadioItem
@@ -128,11 +128,13 @@
       const radioGroup = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
+      const cid = useComponentId();
 
       return {
         paddingProvided,
         radioGroup,
         errorTooltip,
+        cid,
       };
     },
   };

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

@@ -23,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     paddingProvided: import("vue").ComputedRef<boolean>;
     radioGroup: import("vue").Ref<any>;
     errorTooltip: import("vue").Ref<any>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: ArrayConstructor;

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

@@ -73,7 +73,7 @@
     }
   }
   .v-input--density-compact :deep(.v-field) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
     --v-field-padding-bottom: 0px;
     --v-field-input-padding-top: 0px;
     --v-input-padding-top: 0px;
@@ -124,12 +124,9 @@
     :deep(input::placeholder) {
       color: rgb(var(--v-theme-primary));
       opacity: 1;
-      // line-height: unset !important;
+      font-style: italic !important;
       padding: 0 3px 0 0;
     }
-    :deep(input::-moz-placeholder) {
-      font-style: italic;
-    }
   }
   // remove details
   :deep(.v-input__details) {

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

@@ -32,7 +32,7 @@
 </template>
 <style lang="scss" scoped>
   .v-input--horizontal :deep(.v-input__control) {
-    min-height: calc(var(--v-vcs-item-height) - 8px);
+    min-height: calc(var(--v-vcs-font-size) * 2 - 2px);
   }
   .v-input--horizontal.v-slider--has-labels {
     margin-bottom: var(--v-vcs-font-size);
@@ -77,7 +77,7 @@
   import { computed, ref } from 'vue';
   import { VSlider, VTooltip } from 'vuetify/components';
   import { useForwardSlots, usePadding } from '../composables.js';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/sliders/#usage}.
@@ -100,14 +100,13 @@
         default: 'right',
       },
     },
-    emits: ['update:modelValue'],
     setup(props, { attrs, slots }) {
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
       const thumbSize = computed(() => {
-        return Math.floor(itemHeight.value / 4);
+        return Math.floor((fontSize.value + 3) / 2);
       });
       const trackSize = computed(() => {
-        return Math.floor(itemHeight.value / 12);
+        return Math.floor((fontSize.value + 3) / 6);
       });
       const tickSize = computed(() => {
         return trackSize.value * 2;

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

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     tickSize: import("vue").ComputedRef<number>;
     trackSize: import("vue").ComputedRef<number>;
     paddingProvided: import("vue").ComputedRef<boolean>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tooltip: {
         type: StringConstructor;
         default: undefined;
@@ -24,9 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}>>, {
     tooltip: string;
     tooltipPosition: string;
 }, {}>;

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

@@ -39,7 +39,7 @@
 
 <style lang="scss" scoped>
   .v-input--density-compact :deep(.v-field) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 8px);
+    --v-input-control-height: calc(var(--v-vcs-font-size) * 2 - 2px);
     --v-field-padding-bottom: 0px;
     --v-field-input-padding-top: 0px;
     --v-input-padding-top: 0px;
@@ -121,13 +121,10 @@
   .primary--placeholder {
     :deep(textarea::placeholder) {
       color: rgb(var(--v-theme-primary));
-      font-style: italic;
+      font-style: italic !important;
       opacity: 1;
       padding: 0 3px 0 0;
     }
-    :deep(textarea::-moz-placeholder) {
-      font-style: initial;
-    }
   }
 
   // remove details