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

package/src/application/VcsMainMap.vue.d.ts

@@ -1,9 +1,9 @@
 export function setupMapNavigation(app: any): {
-    showMapNavigation: import("vue").Ref<boolean>;
+    showMapNavigation: import("vue").ComputedRef<boolean>;
     destroy: () => void;
 };
 declare const _default: import("vue").DefineComponent<{}, {
     mapId: string;
-    showMapNavigation: import("vue").Ref<boolean>;
+    showMapNavigation: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsNavbar.vue

@@ -14,6 +14,7 @@
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -28,6 +29,7 @@
               <VcsActionButtonList
                 :actions="contentActions"
                 :overflow-count="xs ? 3 : 4"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -38,6 +40,7 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                :force-overflow="false"
                 v-if="mdAndUp"
                 button="VcsToolButton"
               />
@@ -62,6 +65,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -186,7 +190,7 @@
         );
 
       const logo = computed(() => {
-        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+        return app.uiConfig.config.logo ?? VcsDefaultLogo;
       });
 
       const { searchAction, destroy: destroySearchAction } =

package/src/application/VcsSplashScreen.vue

@@ -9,33 +9,31 @@
     persistent
   >
     <v-card>
-      <div class="px-2 pt-2 pb-1">
-        <v-card-text>
-          <VcsMarkdown :content="$st(options.content)" />
-          <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
-            <template #label>
-              <VcsMarkdown
-                :content="$st(options.checkBoxText)"
-                class="marked-checkbox-content"
-              />
-            </template>
-          </VcsCheckbox>
-        </v-card-text>
+      <v-card-text>
+        <VcsMarkdown :content="$st(options.content)" />
+        <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
+          <template #label>
+            <VcsMarkdown
+              :content="$st(options.checkBoxText)"
+              class="marked-checkbox-content"
+            />
+          </template>
+        </VcsCheckbox>
+      </v-card-text>
 
-        <v-card-actions>
-          <v-row no-gutters>
-            <v-col class="text-right">
-              <VcsFormButton
-                color="primary"
-                variant="filled"
-                @click="exitScreen"
-                :disabled="options.acceptInput && !checkBox"
-                >{{ $t(options.buttonTitle) }}</VcsFormButton
-              >
-            </v-col>
-          </v-row>
-        </v-card-actions>
-      </div>
+      <v-card-actions>
+        <v-row no-gutters>
+          <v-col class="text-right">
+            <VcsFormButton
+              color="primary"
+              variant="filled"
+              @click="exitScreen"
+              :disabled="options.acceptInput && !checkBox"
+              >{{ $t(options.buttonTitle) }}</VcsFormButton
+            >
+          </v-col>
+        </v-row>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>

package/src/application/VcsTextPageFooter.vue

@@ -1,7 +1,7 @@
 <template v-if="textPage.title">
   <span class="d-inline-block text-truncate mr-1">
     <span v-if="textPage.url" class="imprint">
-      <a :href="textPage.url" target="_blank"
+      <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>
       </a>
     </span>
@@ -38,6 +38,7 @@
 
   /**
    * A Footer element opening either an URL in a new tab or a WindowComponent with provided content
+   * textPage title, tooltip and the url can also be i18n keys, and will be translated.
    * @vue-prop {import("../uiConfig.js").TextPageType} [textPage]
    * @vue-prop {string} windowId
    */

package/src/components/buttons/VcsActionButtonList.vue

@@ -7,6 +7,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"
@@ -34,6 +35,10 @@
       </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 +48,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 +110,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 +151,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/form-inputs-controls/VcsChipArrayInput.vue

@@ -23,24 +23,22 @@
       <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"
+          :height="itemHeight - 8"
           @keydown.esc="selected = -1"
           @blur="selected = -1"
           @keydown.enter="submitChange($event)"
@@ -48,27 +46,27 @@
           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"
+          :height="itemHeight - 8"
           @keydown.enter="add($event, newValue)"
           @click:append-inner="add($event, newValue)"
           @keydown.esc="cancel"
@@ -76,6 +74,8 @@
           append-inner-icon="mdi-check"
           :style="{ width: `${inputWidth}px` }"
           class="py-0"
+          v-bind="{ ...noListenerAttrs }"
+          v-model="newValue"
         />
       </div>
     </div>
@@ -166,8 +166,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 +247,7 @@
       }
 
       function cancel() {
-        newValue.value = undefined;
+        newValue.value = null;
         adding.value = false;
       }
 
@@ -271,7 +271,7 @@
           vcsChipArrayInput.value.scrollLeft =
             vcsChipArrayInput.value.scrollWidth;
         }
-        newValue.value = undefined;
+        newValue.value = null;
         adding.value = true;
       }
 
@@ -279,6 +279,8 @@
 
       const paddingProvided = usePadding(attrs);
 
+      const itemHeight = useItemHeight();
+
       return {
         paddingProvided,
         localValue,
@@ -294,7 +296,7 @@
         submitChange,
         add,
         cancel,
-        useItemHeight,
+        itemHeight,
       };
     },
   };

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,7 @@ declare const _default: import("vue").DefineComponent<{
     submitChange: (e: any) => void;
     add: (e: any, v: any) => Promise<void>;
     cancel: () => void;
-    useItemHeight: typeof useItemHeight;
+    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;
@@ -75,4 +75,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,17 +9,18 @@
   >
     <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`"
+          :id="`coordinate-${idx}`"
           :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]"

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

@@ -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

@@ -100,7 +100,6 @@
         default: 'right',
       },
     },
-    emits: ['update:modelValue'],
     setup(props, { attrs, slots }) {
       const itemHeight = useItemHeight();
       const thumbSize = computed(() => {

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

@@ -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

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

@@ -12,6 +12,7 @@
       'py-1': !paddingProvided,
     }"
     v-bind="$attrs"
+    :prefix="forcePrefix ? undefined : $attrs.prefix"
     v-model="visibleValue"
     v-model:focused="focused"
   >
@@ -41,6 +42,14 @@
       ></v-tooltip>
       <slot name="default" v-bind="scope ?? {}"></slot>
     </template>
+    <!-- use slot to show prefix always, independent of modelValue (unlike prefix prop) -->
+    <template #prepend-inner="prependInnerScope">
+      <slot name="prepend-inner" v-bind="prependInnerScope">
+        <template v-if="forcePrefix && $attrs.prefix">
+          {{ $attrs.prefix }}
+        </template>
+      </slot>
+    </template>
   </v-text-field>
 </template>
 
@@ -74,6 +83,7 @@
    * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
    * @vue-prop {number|undefined}                       [decimals] - An optional number of decimal places the visible value will be rounded to. Does not affect the input value!
+   * @vue-prop {boolean}                                [forcePrefix=false] - If set, forces the prefix to be always rendered independent of modelValue by using prepend-inner slot
    */
   export default {
     name: 'VcsTextField',
@@ -112,6 +122,10 @@
         type: Number,
         default: undefined,
       },
+      forcePrefix: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { attrs, slots }) {
       const textFieldRef = ref();

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

@@ -23,6 +23,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     forwardSlots: import("vue").ComputedRef<string[]>;
     paddingProvided: import("vue").ComputedRef<boolean>;
@@ -56,6 +60,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: undefined;
     };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     type: string;
     modelValue: string | number;
@@ -63,5 +71,6 @@ declare const _default: import("vue").DefineComponent<{
     tooltipPosition: string;
     unit: string;
     decimals: number;
+    forcePrefix: boolean;
 }, {}>;
 export default _default;

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

@@ -23,9 +23,6 @@
             v-if="isActiveStep"
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
-            @mousedown.stop
-            @touchstart.stop
-            @keydown.stop
             class="justify-end"
           />
         </div>
@@ -33,7 +30,7 @@
     </template>
     <template #default>
       <div>
-        <VcsHelp :text="helpText" :show="showHelp">
+        <VcsHelp :text="helpText" :show="showHelp" class="mb-1">
           <slot name="help" />
         </VcsHelp>
         <slot />
@@ -136,7 +133,7 @@
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
-        active: false,
+        active: true,
         icon: 'mdi-help-circle',
         callback() {
           this.active = !this.active;

package/src/components/form-inputs-controls/vcsTextField.scss

@@ -58,13 +58,10 @@
 .primary--placeholder {
   :deep(input::placeholder) {
     color: rgb(var(--v-theme-primary));
-    font-style: italic;
+    font-style: italic !important;
     opacity: 1;
     padding: 0 3px 0 0;
   }
-  :deep(input::-moz-placeholder) {
-    font-style: initial;
-  }
 }
 
 // remove details

package/src/components/form-output/VcsFormattedNumber.vue

@@ -11,10 +11,12 @@
     </slot>
     {{ formatted }}
     <slot name="append">
-      <span v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
-      <span v-else-if="unit === SpecialUnits.CBM"> m<sup>3</sup> </span>
-      <span v-else-if="unit === SpecialUnits.DEG"> ° </span>
-      <span v-else>
+      <span class="pl-1" v-if="unit === SpecialUnits.SQM"> m<sup>2</sup> </span>
+      <span class="pl-1" v-else-if="unit === SpecialUnits.CBM">
+        m<sup>3</sup>
+      </span>
+      <span class="pl-1" v-else-if="unit === SpecialUnits.DEG"> ° </span>
+      <span class="pl-1" v-else>
         {{ unit }}
       </span>
     </slot>