@vcmap/ui 6.0.0-rc.5 → 6.0.0-rc.7

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

@@ -38,7 +38,6 @@
           filled
           autofocus
           hide-spin-buttons
-          :height="itemHeight - 8"
           @keydown.esc="selected = -1"
           @blur="selected = -1"
           @keydown.enter="submitChange($event)"
@@ -66,7 +65,6 @@
           filled
           autofocus
           hide-spin-buttons
-          :height="itemHeight - 8"
           @keydown.enter="add($event, newValue)"
           @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
@@ -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';
@@ -279,8 +277,6 @@
 
       const paddingProvided = usePadding(attrs);
 
-      const itemHeight = useItemHeight();
-
       return {
         paddingProvided,
         localValue,
@@ -296,7 +292,6 @@
         submitChange,
         add,
         cancel,
-        itemHeight,
       };
     },
   };

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

@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
     submitChange: (e: any) => void;
     add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-    itemHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;

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

@@ -11,7 +11,6 @@
     <template v-for="(_, idx) in localValue">
       <v-col :key="`coordinate-${idx}`" v-if="!hideZ || idx < 2">
         <VcsTextField
-          :id="`coordinate-${idx}`"
           :hide-spin-buttons="true"
           type="number"
           class="py-0"
@@ -23,7 +22,7 @@
           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

@@ -8,22 +8,34 @@
       'pa-1': !paddingProvided,
     }"
   >
-    <slot />
-    <v-tooltip
-      v-if="tooltip"
-      activator="parent"
-      :location="tooltipPosition"
-      :text="$st(tooltip)"
-    ></v-tooltip>
+    <span class="ellipsis-text" ref="labelTextRef">
+      <slot />
+      <v-tooltip
+        v-if="labelTooltip"
+        activator="parent"
+        :location="tooltipPosition"
+        :text="$st(labelTooltip)"
+      ></v-tooltip>
+    </span>
   </label>
 </template>
 
 <style lang="scss" scoped>
+  .ellipsis-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .vcs-label {
     box-sizing: content-box;
     display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     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 {
@@ -36,7 +48,8 @@
 </style>
 <script>
   import { VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { computed, ref } from 'vue';
+  import { createEllipseTooltip, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
@@ -76,8 +89,18 @@
     },
     setup(props, { attrs }) {
       const paddingProvided = usePadding(attrs);
+      const labelTextRef = ref();
+      const labelTooltip = createEllipseTooltip(
+        computed(() => {
+          return labelTextRef.value;
+        }),
+        computed(() => props.tooltip),
+        computed(() => labelTextRef.value?.textContent),
+      );
       return {
         paddingProvided,
+        labelTooltip,
+        labelTextRef,
       };
     },
   };

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

@@ -21,6 +21,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     paddingProvided: import("vue").ComputedRef<boolean>;
+    labelTooltip: import("vue").ComputedRef<string>;
+    labelTextRef: import("vue").Ref<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     htmlFor: {
         type: StringConstructor;

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;
@@ -173,7 +173,7 @@
           if (rawProps.multiple) {
             return [];
           }
-          return '';
+          return null;
         },
       },
       tooltip: {

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

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;

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}.
@@ -101,12 +101,12 @@
       },
     },
     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/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;

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

@@ -10,6 +10,7 @@
     class="vcs-text-field primary--placeholder"
     :class="{
       'py-1': !paddingProvided,
+      'no-prepended-content': !prependedContent,
     }"
     v-bind="$attrs"
     :prefix="forcePrefix ? undefined : $attrs.prefix"
@@ -151,8 +152,12 @@
           return localValue.value ?? '';
         },
         set(value) {
-          localValue.value = value;
           // emit is not needed since the vuetify component already emits an @input event. (forwarded listeners)
+          if (props.type === 'number') {
+            localValue.value = parseFloat(value);
+          } else {
+            localValue.value = value;
+          }
         },
       });
 
@@ -169,7 +174,11 @@
       const paddingProvided = usePadding(attrs);
       const forwardSlots = useForwardSlots(slots, ['default', 'message']);
 
+      const prependedContent = computed(() => {
+        return (props.forcePrefix && attrs.prefix) || !!slots['prepend-inner'];
+      });
       return {
+        prependedContent,
         forwardSlots,
         paddingProvided,
         visibleValue,