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

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="actions.length > 0" :class="classes" class="gc-2">
+  <div
+    v-if="actions.length > 0"
+    :class="classes"
+    class="gc-2 vcs-action-button-list"
+  >
     <template v-if="buttons.length > 0">
       <component
         :is="button"
@@ -7,6 +11,7 @@
         v-for="(btn, index) in buttons"
         :key="`${btn.name}-${index}`"
         :tooltip="btn.title"
+        :tooltip-position="tooltipPosition"
         :icon="btn.icon"
         :active="btn.active"
         :disabled="btn.disabled || disabled"
@@ -28,12 +33,15 @@
           :disabled="disabled"
           v-bind="props"
           class="d-flex"
-        >
-          <v-icon>{{ overflowIcon }}</v-icon>
-        </component>
+          :icon="overflowIcon"
+        />
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
+    <v-spacer
+      v-else-if="blockOverflow"
+      class="flex-grow-0 d-inline-block px-2"
+    />
   </div>
 </template>
 <script>
@@ -43,17 +51,36 @@
   import VcsFormButton from './VcsFormButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
+  /**
+   * compares two strings token based
+   * @param {string} str1
+   * @param {string} str2
+   * @returns {number} the convergence of both strings in percent
+   */
+  function jaccardSimilarity(str1, str2) {
+    const set1 = new Set(str1.split(' '));
+    const set2 = new Set(str2.split(' '));
+    const intersection = new Set([...set1].filter((x) => set2.has(x)));
+    const union = new Set([...set1, ...set2]);
+
+    return intersection.size / union.size;
+  }
+
   /**
    * @description
    * A component rendering a list of actions with overflow mechanic using
+   * For overflow buttons the title is only rendered, if it differs significantly from the action's name.
    * {@link VcsButton} and {@link VcsActionList}.
    * @vue-prop {Array<VcsAction>} actions - Array of actions
    * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
+   * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
+   * @vue-prop {boolean} [forceOverflow=true] - if there is only one overflow button, this button can be rendered instead of the overflow button by setting this option to false
+   * @vue-prop {boolean} [disabled=false] - disable all actions
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
    * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
-   * @vue-prop {boolean} [disabled=false] - disable all actions
    */
   export default {
     name: 'VcsActionButtonList',
@@ -86,19 +113,40 @@
         type: String,
         default: '$vcsKebab',
       },
+      blockOverflow: {
+        type: Boolean,
+        default: false,
+      },
+      forceOverflow: {
+        type: Boolean,
+        default: true,
+      },
       disabled: {
         type: Boolean,
         default: false,
       },
+      tooltipPosition: {
+        type: String,
+        default: 'bottom',
+      },
     },
     computed: {
       right() {
         return this.$attrs.right !== undefined && this.$attrs.right !== false;
       },
+      computedCount() {
+        if (
+          !this.forceOverflow &&
+          this.actions.length === this.overflowCount + 1
+        ) {
+          return this.actions.length;
+        }
+        return this.overflowCount;
+      },
       buttons() {
         const buttons = this.actions
           .filter((i) => i.icon)
-          .slice(0, this.overflowCount);
+          .slice(0, this.computedCount);
         if (this.right) {
           return buttons.reverse();
         }
@@ -106,7 +154,18 @@
       },
       overflowButtons() {
         const buttonsNames = this.buttons.map((i) => i.name);
-        return this.actions.filter((i) => !buttonsNames.includes(i.name));
+        return this.actions
+          .filter((i) => !buttonsNames.includes(i.name))
+          .map((i) => {
+            const { title, ...button } = i;
+            if (
+              title &&
+              jaccardSimilarity(this.$t(i.name), this.$t(title)) > 0.5
+            ) {
+              return button;
+            }
+            return i;
+          });
       },
       classes() {
         const classes = ['d-flex', 'align-center', 'action-btn-wrap'];

package/src/components/buttons/VcsActionButtonList.vue.d.ts

@@ -17,12 +17,25 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    blockOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forceOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }, any, any, {
     right(): boolean;
+    computedCount(): any;
     buttons(): any;
     overflowButtons(): any;
     classes(): string[];
@@ -45,15 +58,30 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    blockOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forceOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     button: string;
     disabled: boolean;
+    tooltipPosition: string;
     overflowCount: number;
     overflowIcon: string;
+    blockOverflow: boolean;
+    forceOverflow: boolean;
 }, {}>;
 export default _default;
 import { validateActions } from '../lists/VcsActionList.vue';

package/src/components/buttons/VcsButton.vue

@@ -5,7 +5,7 @@
     variant="text"
     :color="appliedColor"
     :disabled="disabled"
-    class="vcsButton"
+    class="vcs-button"
     elevation="0"
     density="compact"
     size="small"
@@ -15,7 +15,7 @@
       <v-tooltip
         activator="parent"
         v-if="tooltip"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
       <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
@@ -24,7 +24,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -41,7 +41,7 @@
   }
   .v-btn {
     padding: 0px;
-    &.vcsButton {
+    &.vcs-button {
       &:hover {
         color: rgb(var(--v-theme-primary-lighten-1)) !important;
       }
@@ -64,8 +64,8 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useFontSize } from '../../vuePlugins/vuetify.js';
-  import { useForwardSlots } from '../composables.js';
+  import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
@@ -124,7 +124,7 @@
           return null;
         }
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
@@ -132,9 +132,7 @@
       const minHeight = computed(() => {
         return fontSize.value * 1.5;
       });
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       return {
         forwardSlots,
         hasDefaultSlot,

package/src/components/buttons/VcsButton.vue.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
     appliedColor: import("vue").ComputedRef<string | null>;
     iconSize: import("vue").ComputedRef<number>;
@@ -63,12 +63,12 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    disabled: boolean;
-    tooltip: string;
-    tooltipPosition: string;
     icon: string;
+    disabled: boolean;
     active: boolean;
     hasUpdate: boolean;
     color: string;
+    tooltip: string;
+    tooltipPosition: string;
 }, {}>;
 export default _default;

package/src/components/buttons/VcsFormButton.vue

@@ -5,7 +5,7 @@
     color="primary"
     :min-width="itemHeight * 1.5"
     :height="itemHeight"
-    class="vcsFormButton"
+    class="vcs-form-button"
     :slim="false"
     v-bind="{ ...$attrs }"
   >
@@ -13,7 +13,7 @@
       <v-tooltip
         activator="parent"
         v-if="tooltip"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
       <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
@@ -22,7 +22,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -67,8 +67,8 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useFontSize, useItemHeight } from '../../vuePlugins/vuetify.js';
-  import { useForwardSlots } from '../composables.js';
+  import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn}.
@@ -112,7 +112,6 @@
       },
     },
     setup(props, { slots }) {
-      const itemHeight = useItemHeight();
       const buttonVariant = computed(() => {
         if (props.variant === 'filled') {
           return 'flat';
@@ -122,10 +121,11 @@
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const fontSize = useFontSize();
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
+      const iconSize = useIconSize();
+      const itemHeight = computed(() => {
+        return fontSize.value * 2 + 6;
       });
       return {
         forwardSlots,

package/src/components/buttons/VcsFormButton.vue.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<string>;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
     itemHeight: import("vue").ComputedRef<number>;
@@ -49,10 +49,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    tooltip: string;
-    tooltipPosition: string;
     icon: string;
     hasUpdate: boolean;
     variant: string;
+    tooltip: string;
+    tooltipPosition: string;
 }, {}>;
 export default _default;

package/src/components/buttons/VcsToolButton.vue

@@ -4,7 +4,7 @@
     :variant="buttonVariant"
     :height="itemHeight + 2"
     :min-width="itemHeight + itemHeight / 3"
-    class="vcsToolButton"
+    class="vcs-tool-button"
     :disabled="disabled"
     :class="{
       'vcs-background': background,
@@ -17,7 +17,7 @@
       <v-tooltip
         activator="parent"
         v-if="tooltip"
-        :text="tooltip"
+        :text="$st(tooltip)"
         :location="tooltipPosition"
       />
       <v-icon :size="iconSize" v-if="icon" :class="{ 'mr-2': hasDefaultSlot }">
@@ -26,7 +26,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -69,8 +69,8 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useForwardSlots } from '../composables.js';
-  import { useItemHeight, useFontSize } from '../../vuePlugins/vuetify.js';
+  import { getForwardSlots } from '../composables.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Used for tool buttons in the Navbar.
@@ -140,7 +140,7 @@
       const hasDefaultSlot = computed(() => {
         return !!slots?.default;
       });
-      const forwardSlots = useForwardSlots(slots, ['default']);
+      const forwardSlots = getForwardSlots(slots, ['default']);
       const buttonVariant = computed(() => {
         if (props.active && !props.disabled) {
           return 'flat';
@@ -149,7 +149,9 @@
       });
 
       const fontSize = useFontSize();
-      const itemHeight = useItemHeight();
+      const itemHeight = computed(() => {
+        return fontSize.value * 2 + 6;
+      });
       const iconSize = computed(() => {
         return fontSize.value * 1.5;
       });

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     itemHeight: import("vue").ComputedRef<number>;
     iconSize: import("vue").ComputedRef<number>;
     appliedColor: import("vue").ComputedRef<string | null>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
     buttonVariant: import("vue").ComputedRef<"flat" | "text">;
     hasDefaultSlot: import("vue").ComputedRef<boolean>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -72,13 +72,13 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    disabled: boolean;
-    tooltip: string;
-    tooltipPosition: string;
     icon: string;
+    background: boolean;
+    disabled: boolean;
     active: boolean;
     hasUpdate: boolean;
-    background: boolean;
     color: string;
+    tooltip: string;
+    tooltipPosition: string;
 }, {}>;
 export default _default;

package/src/components/composables.d.ts

@@ -9,6 +9,18 @@ export function usePadding(attrs: Object): import("vue").ComputedRef<boolean>;
  * returns only the slotNames which are not excluded as a computed.
  * @param {import("vue").Slots} slots
  * @param {Array<string>} exclude
- * @returns {import("vue").ComputedRef<Array<string>>}
+ * @returns {Array<string>}
  */
-export function useForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): import("vue").ComputedRef<Array<string>>;
+export function getForwardSlots(slots: import("vue").Slots, exclude?: Array<string>): Array<string>;
+/**
+ * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
+ * @param {import("vue").ComputedRef<string|undefined>} tooltip
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent: import("vue").ComputedRef<HTMLElement | undefined>, tooltip: import("vue").ComputedRef<string | undefined>, title: import("vue").ComputedRef<string | undefined>): import("vue").ComputedRef<string>;
+/**
+ * Returns a globally unique vcs component id string
+ * @returns {string}
+ */
+export function useComponentId(): string;

package/src/components/composables.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
 /**
  * returns a computed which is true, if the provided attributes contain one or more
@@ -22,10 +22,112 @@ export function usePadding(attrs) {
  * returns only the slotNames which are not excluded as a computed.
  * @param {import("vue").Slots} slots
  * @param {Array<string>} exclude
- * @returns {import("vue").ComputedRef<Array<string>>}
+ * @returns {Array<string>}
  */
-export function useForwardSlots(slots, exclude = []) {
+export function getForwardSlots(slots, exclude = []) {
+  return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
+}
+
+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
+ * @param {import("vue").ComputedRef<string|undefined>} title
+ * @returns {import("vue").ComputedRef<string>}
+ */
+export function createEllipseTooltip(parent, tooltip, title) {
+  const offsetWidth = ref(0);
+  const scrollWidth = ref(0);
+  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(() => {
-    return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
+    if (tooltip.value) {
+      return tooltip.value;
+    }
+    if (title.value && offsetWidth.value < scrollWidth.value) {
+      return title.value;
+    }
+    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

@@ -1,14 +1,14 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-extent">
     <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/extent/VcsExtentEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-extent-editor"
     :heading="heading"
     :header-actions="actions"
     :action-button-list-overflow-count="2"
@@ -18,7 +19,7 @@
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { setupExtentComponentActions } from '../../actions/extentActions.js';
   import VcsExtent from './VcsExtent.vue';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
 
   /**
    * A VcsFormSection with actions to draw and edit an extent