@vcmap/ui 5.0.0-rc.28 → 5.0.0-rc.30

package/plugins/@vcmap-show-case/window-tester/windowExampleToggleChild.vue

@@ -19,6 +19,16 @@
       const app = inject('vcsApp');
       const parentId = attrs['window-state'].id;
       const childId = `dynamicChild-${parentId}`;
+      const childComponent = {
+        id: childId,
+        parentId,
+        state: {
+          headerTitle: 'Example dynamicChild',
+          headerIcon: 'mdi-human-child',
+        },
+        component: WindowExampleContent,
+        slot: WindowSlot.DYNAMIC_CHILD,
+      };
 
       return {
         toggle(e) {
@@ -26,16 +36,7 @@
             app.windowManager.remove(childId);
           } else {
             e.stopPropagation();
-            app.windowManager.add(
-              {
-                id: childId,
-                parentId,
-                headerTitle: 'Example dynamicChild',
-                component: WindowExampleContent,
-                slot: WindowSlot.DYNAMIC_CHILD,
-              },
-              owner,
-            );
+            app.windowManager.add(childComponent, owner);
           }
         },
       };

package/src/actions/actionHelper.js

@@ -284,7 +284,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
 /**
  * Creates an action which opens a given link in a new tab
  * @param {ActionOptions} actionOptions
- * @param {string} url
+ * @param {string|function():string} url
  * @returns {VcsAction}
  */
 export function createLinkAction(actionOptions, url) {
@@ -293,13 +293,17 @@ export function createLinkAction(actionOptions, url) {
     icon: [undefined, String],
     title: [undefined, String],
   });
-  check(url, String);
+  check(url, [String, Function]);
 
   return {
     ...actionOptions,
     callback() {
       const link = document.createElement('a');
-      link.href = url;
+      if (typeof url === 'string') {
+        link.href = url;
+      } else {
+        link.href = url();
+      }
       link.target = '_blank';
       link.click();
     },

package/src/application/VcsApp.vue

@@ -94,6 +94,7 @@
   import VcsMap from './VcsMap.vue';
   import VcsNavbar from './VcsNavbar.vue';
   import {
+    createLinkAction,
     createMapButtonAction,
     createToggleAction,
   } from '../actions/actionHelper.js';
@@ -226,6 +227,9 @@
         state: {
           headerTitle: 'legend.title',
           headerIcon: '$vcsLegend',
+          infoUrl: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_legend',
+          ),
         },
         slot: WindowSlot.DYNAMIC_RIGHT,
         props: { entries },
@@ -324,6 +328,29 @@
     };
   }
 
+  /**
+   * This helper function will add a help action button referencing VC Map help page to the apps NavbarManager MENU location.
+   * @param {VcsUiApp} app
+   */
+  export function setupHelpButton(app) {
+    const helpAction = createLinkAction(
+      {
+        name: 'help.title',
+        title: 'help.tooltip',
+        icon: '$vcsHelp',
+      },
+      app.getHelpUrlCallback(),
+    );
+    app.navbarManager.add(
+      {
+        id: 'helpButton',
+        action: helpAction,
+      },
+      vcsAppSymbol,
+      ButtonLocation.MENU,
+    );
+  }
+
   /**
    * This helper function will add a category manager button to the navbar. The category Manager
    * will only be shown if there is at least one category under management in the categoryManager.
@@ -343,6 +370,9 @@
         state: {
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
+          infoUrl: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_myWorkspace',
+          ),
         },
         component: CollectionManager,
         provides: {
@@ -517,6 +547,7 @@
       const mapNavbarListener = setupMapNavbar(app);
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
+      setupHelpButton(app);
       const destroyComponentsWindow = setupCategoryManagerWindow(app);
       const destroyThemingListener = setupUiConfigTheming(
         app,

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

@@ -0,0 +1,282 @@
+<template>
+  <div id="vcs-chip-array-input" class="d-flex d-inline-block align-center">
+    <v-btn
+      v-if="hasScrollbar"
+      :dense="isDense"
+      x-small
+      icon
+      :ripple="false"
+      elevation="0"
+      @click="vcsChipArrayInput.scrollLeft -= scrollDx"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+    <div
+      id="vcs-chip-array-input"
+      ref="vcsChipArrayInput"
+      class="d-flex d-inline-block"
+      :class="{
+        'overflow-x-auto': !column,
+        'hide-scrollbar': !column,
+        row: column,
+        'ma-1': !hasScrollbar,
+      }"
+    >
+      <div v-for="(item, index) in value" :key="index" class="py-1 pr-1">
+        <v-chip
+          v-if="selected !== index"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          :close="deletableChips"
+          @click="select(index)"
+          @click:close="remove(index)"
+          class="pa-2"
+        >
+          <span class="text-truncate d-inline-block">{{ item }}</span>
+        </v-chip>
+        <VcsTextField
+          v-else
+          hide-details
+          :dense="isDense"
+          rounded
+          filled
+          autofocus
+          no-padding
+          :height="24"
+          v-bind="{ ...$attrs }"
+          v-model="editValue"
+          @keydown.esc="selected = -1"
+          @blur="selected = -1"
+          @keydown.enter="submitChange"
+          @click:append="submitChange"
+          @update:error="(err) => (isEditValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+      <div class="py-1">
+        <v-chip
+          v-if="adding === false"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          @click="adding = true"
+          class="pa-2"
+        >
+          <v-icon>$vcsPlus</v-icon>
+        </v-chip>
+        <VcsTextField
+          v-else
+          hide-details
+          :dense="isDense"
+          rounded
+          filled
+          autofocus
+          no-padding
+          :height="24"
+          class="vcs-inside-chip"
+          v-model="newValue"
+          v-bind="{ ...$attrs }"
+          @keydown.enter="add(newValue)"
+          @keydown.esc="cancel"
+          @blur="cancel"
+          @click:append="add(newValue)"
+          @update:error="(err) => (isNewValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+    </div>
+    <v-btn
+      v-if="hasScrollbar"
+      :dense="isDense"
+      x-small
+      icon
+      :ripple="false"
+      elevation="0"
+      @click="vcsChipArrayInput.scrollLeft += scrollDx"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .v-chip {
+    display: flex;
+    max-width: 260px;
+    padding: 0 8px;
+    .v-chip__content {
+      display: flex;
+    }
+  }
+  .vcs-inside-chip {
+    ::v-deep {
+      .v-input__slot {
+        .v-input__append-inner {
+          margin-top: 5px;
+        }
+      }
+      .v-text-field--filled > .v-input__control > .v-input__slot,
+      .v-text-field--outlined > .v-input__control > .v-input__slot {
+        min-height: unset;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { computed, nextTick, onMounted, ref } from 'vue';
+  import { VBtn, VChip, VIcon } from 'vuetify/lib';
+  import VcsTextField from './VcsTextField.vue';
+
+  /**
+   * @description Renders elements of an array as chips with an input field to edit or add new elements.
+   * Provides two height options depending on "dense" property
+   * Provides VcsTooltip to show error messages on focus
+   * When clicking esc key, previous input is restored.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string}                                 [type] - The input type (string or number)
+   * @vue-prop {boolean}                                [disabled] - Disables adding or removing new elements
+   * @vue-prop {boolean}                                [column] - Remove horizontal pagination and wrap items as needed
+   * @vue-prop {boolean}                                [scrollDx=20] - scroll amount in px
+   * @vue-prop {boolean}                                [deletableChips=true] - Adds a delete button to elements to remove them from array
+   * @vue-prop {number}                                 [inputWidth=50] - Width of the text fields in px.
+   */
+  export default {
+    name: 'VcsChipArrayInput',
+    components: {
+      VBtn,
+      VcsTextField,
+      VChip,
+      VIcon,
+    },
+    props: {
+      value: {
+        type: Array,
+        required: true,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      deletableChips: {
+        type: Boolean,
+        default: true,
+      },
+      inputWidth: {
+        type: Number,
+        default: 50,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      column: {
+        type: Boolean,
+        default: false,
+      },
+      scrollDx: {
+        type: Number,
+        default: 20,
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const selected = ref(-1);
+      const adding = ref(false);
+      const isEditValid = ref(true);
+      const editValue = ref(undefined);
+      const isNewValid = ref(true);
+      const newValue = ref(undefined);
+      const vcsChipArrayInput = ref();
+      const hasScrollbar = ref();
+      const isDense = computed(() => attrs.dense !== false);
+
+      function emitValue(value) {
+        if (attrs.type === 'number') {
+          emit(
+            'input',
+            value.map((v) => parseFloat(v)),
+          );
+        } else {
+          emit('input', value);
+        }
+      }
+
+      function updateHasScrollbar() {
+        if (!props.column) {
+          hasScrollbar.value =
+            vcsChipArrayInput.value.scrollWidth -
+              vcsChipArrayInput.value.clientWidth >
+            36; // size of the scroll buttons
+        }
+      }
+
+      onMounted(() => updateHasScrollbar());
+
+      function remove(index) {
+        emitValue(props.value.toSpliced(index, 1));
+        updateHasScrollbar();
+      }
+
+      function select(index) {
+        if (!props.disabled) {
+          selected.value = index;
+          editValue.value = props.value[index];
+        }
+      }
+
+      function submitChange() {
+        if (isEditValid.value) {
+          emitValue(props.value.toSpliced(selected.value, 1, editValue.value));
+          selected.value = -1;
+        }
+      }
+
+      function cancel() {
+        newValue.value = undefined;
+        adding.value = false;
+      }
+
+      async function add(value) {
+        if (isNewValid.value) {
+          if (value) {
+            emitValue([...props.value, value]);
+            await nextTick();
+            updateHasScrollbar();
+            await nextTick();
+            vcsChipArrayInput.value.scrollLeft =
+              vcsChipArrayInput.value.scrollWidth;
+          }
+          newValue.value = undefined;
+          adding.value = true;
+        }
+      }
+
+      return {
+        selected,
+        adding,
+        editValue,
+        isEditValid,
+        newValue,
+        isNewValid,
+        isDense,
+        vcsChipArrayInput,
+        hasScrollbar,
+        remove,
+        select,
+        submitChange,
+        add,
+        cancel,
+      };
+    },
+  };
+</script>

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

@@ -25,8 +25,9 @@
           v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
           :rules="rules"
-          class="py-1 primary--placeholder align-center"
+          class="primary--placeholder align-center"
           :class="{
+            'py-1': !noPadding,
             'remove-outline': !isOutlined,
             'outline--current': focus,
             'outline--error': !!errorMessage,
@@ -134,7 +135,7 @@
       .v-icon {
         font-size: 16px;
       }
-      fieldset {
+      .v-text-field--rounded fieldset {
         border-radius: 2px;
         border-color: var(--v-base-base);
       }
@@ -160,6 +161,7 @@
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
    * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
    * @vue-prop {boolean}                                showSpinButtons - If true, spin buttons are displayed in number input fields. Overrides Vuetify hide-spin-buttons.
+   * @vue-prop {boolean}                                noPadding - Padding is required for usage within rows. For standalone usage this prop removes class py-1.
    * @vue-computed {boolean}                            isClearable - Whether textfield is isClearable. Makes sure icon is only shown on focus, hover or error.
    * @vue-computed {boolean}                            isDense - Whether size of textfield is dense.
    * @vue-computed {boolean}                            isOutlined - Textfield is outlined on either hover, focus or error, if not disabled.
@@ -186,6 +188,10 @@
         type: Boolean,
         default: false,
       },
+      noPadding: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props, { attrs, emit }) {
       const hover = ref(false);
@@ -223,7 +229,7 @@
         get() {
           if (
             attrs.type === 'number' &&
-            attrs.value &&
+            Number.isFinite(attrs.value) &&
             props.unit &&
             !focus.value &&
             !hover.value
@@ -233,8 +239,9 @@
             return attrs.value ?? '';
           }
         },
-        set(event) {
-          emit('input', event);
+        set() {
+          // emit is not needed, the vuetify component already emits an @input event. (forwarded listeners)
+          // emit('input', event);
         },
       });
       const type = computed(() => {

package/src/components/icons/+all.js

@@ -63,7 +63,7 @@ import PlayCircleIcon from './PlayCircleIcon.vue';
 import PlusIcon from './PlusIcon.vue';
 import PoiIcon from './PoiIcon.vue';
 import PointSelectIcon from './PointSelectIcon.vue';
-import PolygonIcon from './PolygonIcon.vue';
+import PointIcon from './PointIcon.vue';
 import QueryIcon from './QueryIcon.vue';
 import PresentationModeIcon from './PresentationModeIcon.vue';
 import RectangleIcon from './RectangleIcon.vue';
@@ -328,8 +328,8 @@ const IconMap = {
   pointSelect: {
     component: PointSelectIcon,
   },
-  polygon: {
-    component: PolygonIcon,
+  point: {
+    component: PointIcon,
   },
   query: {
     component: QueryIcon,

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -14,7 +14,7 @@
             v-on="on"
             class="d-inline-block text-truncate"
             ref="titleElem"
-            >{{ $t(item.title) }}</span
+            >{{ $t(item.title || item.name) }}</span
           >
         </template>
       </VcsTooltip>

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -6,7 +6,7 @@
       <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
     </slot>
 
-    <slot>
+    <slot v-bind="{ ...$props, on: $listeners }">
       <v-text-field
         solo
         dense
@@ -19,7 +19,7 @@
       />
     </slot>
 
-    <slot name="append">
+    <slot name="append" :has-filter="hasFilter">
       <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
     </slot>
   </div>
@@ -111,9 +111,14 @@
   import { VIcon, VTextField } from 'vuetify/lib';
 
   /**
-   * @description Stylized wrapper around vuetify divider
-   * @vue-prop {number} height - Height of the component.
+   * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
    * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
+   * @vue-prop {string[]} [customClasses] - CSS classes to customize style
+   * @vue-prop {string} [value] - The search value
+   * @vue-prop {boolean} [hasFilter=false] - Appends a filter icon
+   * @vue-data {slot} [prepend] - prepend slot overwriting search icon
+   * @vue-data {slot} [default] - default slot overwriting search input text field. binds all props
+   * @vue-data {slot} [append] - append slot overwriting filter icon. binds hasFilter prop
    */
   export default {
     name: 'VcsTreeviewSearchbar',

package/src/components/plugins/AbstractConfigEditor.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-container class="pa-0">
+    <v-form v-model="isValid" @submit.prevent="submit">
+      <slot />
+      <div class="d-flex gap-2 px-2 pt-2 pb-1">
+        <div class="d-flex gap-2 w-full justify-start">
+          <VcsFormButton v-if="showReset" icon="$vcsReturn" @click="reset" />
+        </div>
+        <div class="d-flex gap-2 w-full justify-end">
+          <VcsFormButton type="submit" variant="filled" :disabled="!isValid">
+            {{ $t('appConfigurator.apply') }}
+          </VcsFormButton>
+          <VcsFormButton @click.stop="cancel">
+            {{ $t('appConfigurator.cancel') }}
+          </VcsFormButton>
+          <VcsActionButtonList :actions="actions" button="VcsFormButton" />
+        </div>
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script>
+  import { VContainer, VForm } from 'vuetify/lib';
+  import { ref, inject } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description Basic wrapper for all config editor components using {@link https://vuetifyjs.com/en/api/v-form/ |vuetify form}.
+   * Providing a footer with submit, cancel and optionally reset button.
+   * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
+   * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
+   * @vue-event {Event} submit - Event fired on clicking the submit button.
+   * @vue-event {Event} cancel - Event fired on clicking the cancel button.
+   * @vue-event {Event} reset - Event fired on clicking the reset button.
+   */
+  export default {
+    name: 'AbstractConfigEditor',
+    components: {
+      VContainer,
+      VForm,
+      VcsFormButton,
+      VcsActionButtonList,
+    },
+    props: {
+      showReset: {
+        type: Boolean,
+        default: false,
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const app = inject('vcsApp');
+
+      const close = () => {
+        if (app.windowManager.has(attrs['window-state'].id)) {
+          app.windowManager.remove(attrs['window-state'].id);
+        }
+      };
+
+      return {
+        isValid: ref(true),
+        submit(e) {
+          close();
+          emit('submit', e);
+        },
+        cancel(e) {
+          close();
+          attrs.setConfig();
+          emit('cancel', e);
+        },
+        reset(e) {
+          emit('reset', e);
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/style/VcsImageSelector.vue

@@ -74,14 +74,15 @@
               :min="input.range?.[0] || 0"
               :max="input.range?.[1] || undefined"
               :rules="[
-                (v) => !input.isRequired || !!v || 'components.style.required',
+                (v) =>
+                  !input.isRequired || !!v || 'components.validation.required',
                 (v) =>
                   !input.range ||
                   (!input.isRequired && !v) ||
                   between(v, input.range) ||
-                  `${$t('components.style.allowedRange')}: ${input.range.join(
-                    ' - ',
-                  )}`,
+                  `${$t(
+                    'components.validation.allowedRange',
+                  )}: ${input.range.join(' - ')}`,
               ]"
               :show-spin-buttons="true"
             />
@@ -458,7 +459,7 @@
                 if (Array.isArray(props.value?.scale)) {
                   return props.value.scale[index];
                 } else {
-                  return props.value.scale;
+                  return props.value?.scale;
                 }
               },
               set(value) {

package/src/components/style/VcsTextSelector.vue

@@ -32,7 +32,7 @@
             type="number"
             unit="px"
             v-model="fontSize"
-            :rules="[(v) => (!!v && v > 0) || 'components.style.notValid']"
+            :rules="[(v) => (!!v && v > 0) || 'components.validation.notValid']"
           />
         </v-col>
       </v-row>