@vcmap/ui 5.0.0-rc.29 → 5.0.0-rc.31

package/plugins/@vcmap-show-case/vector-properties-example/index.js

@@ -0,0 +1,40 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from './package.json';
+import component from './vectorPropertiesExample.vue';
+
+export default function createVectorPropertiesExamplePlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Vector Properties Example',
+        },
+        {
+          id: 'vector-properties-example',
+          state: {
+            headerTitle: 'Vector Properties Example',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'vectorProperties', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/vector-properties-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/vector-properties-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/vector-properties-example/vectorPropertiesExample.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-sheet>
+    <v-container>
+      <v-row>
+        <v-col>
+          <VcsList
+            :items="propertiesToSelectFrom"
+            :selectable="true"
+            v-model="propertiesToDisplay"
+            title="Select all"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <VcsCheckbox v-model="hideDividers" label="Hide dividers" />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <VcsCheckbox v-model="expandable" label="Expandable" />
+        </v-col>
+      </v-row>
+    </v-container>
+    <VcsVectorPropertiesComponent
+      v-model="featureProperties"
+      :value-default="defaultOptions"
+      :show3-d-properties="is3D"
+      :properties="propertiesToDisplay.map((item) => item.name)"
+      :hide-dividers="hideDividers"
+      :expandable="expandable"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
+  import {
+    VcsVectorPropertiesComponent,
+    VcsList,
+    VcsCheckbox,
+  } from '@vcmap/ui';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { Feature } from 'ol';
+  import { Polygon } from 'ol/geom.js';
+
+  export const polygonCoords = [
+    [
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+      [13.374380945328324, 52.51418689937603, 33.692166432214975],
+      [13.376569529360477, 52.516925129014055, 34.36842554294618],
+      [13.37302869387225, 52.515969833848686, 34.5146781549614],
+    ],
+  ];
+
+  export default {
+    name: 'VectorPropertiesExample',
+    components: {
+      VcsVectorPropertiesComponent,
+      VcsList,
+      VcsCheckbox,
+      VSheet,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      /** @type {import('@vcmap/core').VcsApp} */
+      const vcsApp = inject('vcsApp');
+      const is3D = ref(false);
+
+      function updateIs3D() {
+        is3D.value = vcsApp.maps.activeMap instanceof CesiumMap;
+      }
+      const mapActivatedListener =
+        vcsApp.maps.mapActivated.addEventListener(updateIs3D);
+      updateIs3D();
+
+      const feature = new Feature({
+        geometry: new Polygon(polygonCoords),
+      });
+      const layer = new VectorLayer({
+        name: 'vectorPropertiesExampleLayer',
+        projection: {
+          epsg: 'EPSG:4326',
+        },
+      });
+
+      const featureProperties = ref(
+        layer.vectorProperties.getValuesForFeatures([feature]),
+      );
+      watch(featureProperties, () => {
+        layer.vectorProperties.setValuesForFeatures(featureProperties.value, [
+          feature,
+        ]);
+      });
+
+      const defaultOptions = VectorProperties.getDefaultOptions();
+      const propertiesToSelectFrom = Object.keys(defaultOptions).map((key) => ({
+        name: key,
+        title: key,
+      }));
+
+      onMounted(() => {
+        vcsApp.layers.add(layer);
+        layer.addFeatures([feature]);
+        layer.activate();
+      });
+
+      onUnmounted(() => {
+        layer.deactivate();
+        vcsApp.layers.remove(layer);
+        layer.destroy();
+        mapActivatedListener();
+      });
+      return {
+        featureProperties,
+        defaultOptions,
+        is3D,
+        propertiesToSelectFrom,
+        propertiesToDisplay: ref([...propertiesToSelectFrom]),
+        hideDividers: ref(false),
+        expandable: ref(false),
+      };
+    },
+  };
+</script>

package/plugins/package.json

@@ -1,10 +1,14 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.7",
     "@vcmap/print": "^1.0.2",
     "@vcmap/swipe-tool": "^1.0.3",
     "@vcmap/export": "^1.0.1",
     "@vcmap/shadow": "^1.0.1",
-    "@vcmap/draw": "^1.0.0"
+    "@vcmap/draw": "^1.0.0",
+    "@vcmap/create-link": "^1.0.1",
+    "@vcmap/search-nominatim": "^1.0.1"
+  },
+  "optionalDependencies": {
+    "@vcmap/hello-world": "^1.0.7"
   }
 }

package/src/application/VcsAttributions.vue

@@ -1,24 +1,29 @@
 <template>
-  <v-list class="px-2">
-    <v-list-item
-      v-for="{ key, title, attributions } in entries"
-      :key="key"
-      class="px-0"
-    >
-      <v-list-item-content>
-        <v-list-item-title>{{ $t(title) }}</v-list-item-title>
-        <v-list-item-subtitle
-          v-for="attribution in attributions"
-          :key="attribution.provider"
-          :title="`${$t(attribution.provider)} ${attribution.year}`"
-        >
-          <a :href="attribution.url" target="_blank">
-            {{ $t(attribution.provider) }} {{ attribution.year }}
-          </a>
-        </v-list-item-subtitle>
-      </v-list-item-content>
-    </v-list-item>
-  </v-list>
+  <v-sheet>
+    <v-list v-if="entries.length" class="px-2">
+      <v-list-item
+        v-for="{ key, title, attributions } in entries"
+        :key="key"
+        class="px-0"
+      >
+        <v-list-item-content>
+          <v-list-item-title>{{ $t(title) }}</v-list-item-title>
+          <v-list-item-subtitle
+            v-for="attribution in attributions"
+            :key="attribution.provider"
+            :title="`${$t(attribution.provider)} ${attribution.year}`"
+          >
+            <a :href="attribution.url" target="_blank">
+              {{ $t(attribution.provider) }} {{ attribution.year }}
+            </a>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+    <v-sheet v-else class="ma-2">
+      {{ $t('footer.attributions.empty') }}
+    </v-sheet>
+  </v-sheet>
 </template>
 
 <style lang="scss" scoped>
@@ -51,6 +56,7 @@
     VListItemContent,
     VListItemTitle,
     VListItemSubtitle,
+    VSheet,
   } from 'vuetify/lib';
 
   /**
@@ -65,6 +71,7 @@
       VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
+      VSheet,
     },
     props: {
       entries: {

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

@@ -0,0 +1,290 @@
+<template>
+  <div
+    class="d-flex d-inline-block align-center mb-1"
+    :class="{ 'mt-1': !column }"
+  >
+    <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
+      ref="vcsChipArrayInput"
+      class="d-flex d-inline-block mx-1 my-0"
+      :class="{
+        'overflow-x-auto': !column,
+        'hide-scrollbar': !column,
+        row: column,
+      }"
+    >
+      <div
+        v-for="(item, index) in value"
+        :key="index"
+        class="pr-1"
+        :class="{ 'pt-1': column }"
+      >
+        <v-chip
+          v-if="selected !== index"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          :close="deletableChips"
+          @click="select(index)"
+          @click:close="remove(index)"
+        >
+          <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($event)"
+          @click:append="submitChange($event)"
+          @update:error="(err) => (isEditValid = !err)"
+          append-icon="mdi-check"
+          :style="{ width: `${inputWidth}px` }"
+        />
+      </div>
+      <div :class="{ 'pt-1': column }">
+        <v-chip
+          v-if="adding === false"
+          v-bind="{ ...$attrs }"
+          :small="isDense"
+          :disabled="disabled"
+          @click="adding = true"
+        >
+          <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($event, newValue)"
+          @keydown.esc="cancel"
+          @blur="cancel"
+          @click:append="add($event, 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(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        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(e, value) {
+        e.stopPropagation();
+        e.preventDefault();
+        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/VcsSlider.vue

@@ -15,6 +15,7 @@
   .vcs-slider {
     ::v-deep {
       .v-slider {
+        cursor: pointer;
         .v-slider__thumb {
           border: 2px solid;
           &:before {

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

package/src/components/icons/2DAreaIcon.vue

@@ -2,7 +2,6 @@
 
 <template>
   <svg
-    id="icon_24_2D_area"
     xmlns="http://www.w3.org/2000/svg"
     width="24"
     height="24"
@@ -11,24 +10,14 @@
     <rect id="size" width="24" height="24" fill="none" />
     <path
       id="Path_681"
-      data-name="Path 681"
       d="M-10.08-3.448h1.088A2.381,2.381,0,0,1-8.948-3.9,1.4,1.4,0,0,1-8.8-4.316a.866.866,0,0,1,.276-.3.734.734,0,0,1,.42-.116.833.833,0,0,1,.6.228.843.843,0,0,1,.236.636.892.892,0,0,1-.116.456,1.555,1.555,0,0,1-.288.36,2.607,2.607,0,0,1-.38.292q-.208.132-.392.26-.36.248-.684.488a3.324,3.324,0,0,0-.564.524,2.256,2.256,0,0,0-.38.644,2.335,2.335,0,0,0-.14.848H-6.1V-.976H-8.744a2.535,2.535,0,0,1,.48-.5q.272-.216.56-.4t.572-.38a3.06,3.06,0,0,0,.508-.428,1.912,1.912,0,0,0,.36-.54,1.774,1.774,0,0,0,.136-.728A1.692,1.692,0,0,0-6.284-4.7a1.634,1.634,0,0,0-.42-.552,1.886,1.886,0,0,0-.612-.344,2.23,2.23,0,0,0-.732-.12,2.182,2.182,0,0,0-.892.172,1.74,1.74,0,0,0-.644.48,2.076,2.076,0,0,0-.384.72A2.687,2.687,0,0,0-10.08-3.448Zm5.96,2.392v-3.6h.9a2.028,2.028,0,0,1,.78.132,1.224,1.224,0,0,1,.508.38,1.556,1.556,0,0,1,.276.6,3.33,3.33,0,0,1,.084.78,2.34,2.34,0,0,1-.12.8,1.467,1.467,0,0,1-.32.532,1.162,1.162,0,0,1-.456.292A1.613,1.613,0,0,1-3-1.056ZM-5.376-5.712V0h2.464a2.734,2.734,0,0,0,1.14-.22,2.268,2.268,0,0,0,.808-.6A2.535,2.535,0,0,0-.48-1.736,3.957,3.957,0,0,0-.32-2.888a3.56,3.56,0,0,0-.2-1.24,2.438,2.438,0,0,0-.544-.88,2.231,2.231,0,0,0-.824-.528,2.941,2.941,0,0,0-1.028-.176Z"
       transform="translate(24 24)"
       fill="currentColor"
     />
-    <g
-      id="Group_1752"
-      data-name="Group 1752"
-      transform="translate(-1319.907 -496.728)"
-    >
-      <g
-        id="Path_673"
-        data-name="Path 673"
-        transform="translate(1321.907 497.728)"
-      >
+    <g id="Group_1752" transform="translate(-1319.907 -496.728)">
+      <g id="Path_673" transform="translate(1321.907 497.728)">
         <path
           id="Path_675"
-          data-name="Path 675"
           d="M1323.231,513.759a1.333,1.333,0,0,1-1.323-1.271v-6.134a1.31,1.31,0,0,1,1.382-1.3h5.273v-6.032a1.351,1.351,0,0,1,1.4-1.3h10.5a1.334,1.334,0,0,1,1.368,1.27V512.46a1.344,1.344,0,0,1-1.4,1.3h-17.2Zm.026-1.5h0Zm.183-5.7v5.7H1340.3v-13.03h-10.2v6.032a1.339,1.339,0,0,1-1.4,1.3Zm17.017,5.7h0Zm-11.741-7.2h0Zm1.225-5.83h0Zm10.534,0h0Z"
           transform="translate(-1321.907 -497.728)"
           fill="currentColor"
@@ -41,13 +30,11 @@
       >
         <g
           id="Group_1752-2"
-          data-name="Group 1752"
           transform="translate(0 0.215)"
           style="isolation: isolate"
         >
           <path
             id="Path_676"
-            data-name="Path 676"
             d="M1333.238,505.094l1,2.946h.012l.948-2.946h1.326v4.284h-.881v-3.036h-.013l-1.05,3.036h-.726l-1.049-3.006h-.013v3.006h-.882v-4.284Z"
             transform="translate(-1331.912 -505.094)"
             fill="currentColor"
@@ -55,13 +42,11 @@
         </g>
         <g
           id="Group_1753"
-          data-name="Group 1753"
           transform="translate(5.102)"
           style="isolation: isolate"
         >
           <path
             id="Path_677"
-            data-name="Path 677"
             d="M1337.119,505.479a.9.9,0,0,1,.168-.315.75.75,0,0,1,.281-.21.963.963,0,0,1,.391-.075.951.951,0,0,1,.32.053.827.827,0,0,1,.268.15.706.706,0,0,1,.183.241.736.736,0,0,1,.069.323.767.767,0,0,1-.06.318.834.834,0,0,1-.157.236,1.371,1.371,0,0,1-.223.188l-.25.166a2.967,2.967,0,0,0-.245.176,1.129,1.129,0,0,0-.21.221h1.159v.427h-1.8a1.018,1.018,0,0,1,.061-.371.977.977,0,0,1,.166-.281,1.514,1.514,0,0,1,.247-.23c.094-.07.195-.142.3-.214.054-.037.111-.075.172-.113a1.124,1.124,0,0,0,.166-.128.721.721,0,0,0,.126-.157.391.391,0,0,0,.051-.2.368.368,0,0,0-.1-.279.364.364,0,0,0-.263-.1.332.332,0,0,0-.185.05.393.393,0,0,0-.12.133.675.675,0,0,0-.066.183,1.105,1.105,0,0,0-.018.2h-.477A1.177,1.177,0,0,1,1337.119,505.479Z"
             transform="translate(-1337.014 -504.879)"
             fill="currentColor"