@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

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

@@ -0,0 +1,123 @@
+<template>
+  <VcsTooltip
+    :tooltip-position="tooltipPosition"
+    :tooltip="errorMessage"
+    color="error"
+  >
+    <template #activator="{ on, attrs }">
+      <span v-on="on">
+        <v-radio-group
+          hide-details
+          class="w-full vcs-radio-group"
+          :dense="$attrs.dense!==false"
+          :ripple="false"
+          v-bind="{...$attrs, ...attrs}"
+          v-on="{...$listeners, ...on}"
+          @update:error="setError"
+        >
+          <v-radio
+            v-for="(item, idx) in items"
+            :id="`radio-${idx}`"
+            :key="`radio-${idx}`"
+            :ripple="false"
+            :color="item.color ?? 'secondary'"
+            :value="item.value ?? item"
+            :disabled="item.disabled ?? false"
+            :class="$attrs.dense!==false ? 'vcs-radio-dense' : 'vcs-radio'"
+          >
+            <template #label>
+              <VcsLabel :html-for="`radio-${idx}`" :dense="!!$attrs.dense">
+                {{ $t(item.label ?? item) }}
+              </VcsLabel>
+            </template>
+          </v-radio>
+        </v-radio-group>
+      </span>
+    </template>
+  </VcsTooltip>
+</template>
+<style lang="scss" scoped>
+@import "../../styles/vcsFont";
+.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
+  margin-bottom: 0;
+}
+.v-input{
+  &.vcs-radio-group{
+    ::v-deep {
+      margin-top: 0;
+      padding-top: 0;
+      label.v-label,
+      .v-icon.v-icon{
+        font-size: $base-font-size;
+        color: inherit;
+      }
+      .v-radio:not(:last-child):not(:only-child){
+        margin-bottom: 0;
+      }
+      .v-input--selection-controls__input{
+        margin: 0;
+      }
+    }
+  }
+}
+.vcs-radio {
+  height: 40px;
+  align-items: center;
+}
+.vcs-radio-dense {
+  height: 32px;
+  align-items: center;
+}
+</style>
+<script>
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+  import VcsLabel from './VcsLabel.vue';
+  import validate from '../notification/validation.js';
+
+  /**
+   * @typedef {Object} VcsRadioItem
+   * @property {string} label
+   * @property {string} [color='secondary']
+   * @property {any} value
+   * @property {boolean} [disabled=false]
+   */
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify v-radio-group} using
+   * {@link https://vuetifyjs.com/en/api/v-radio/ |vuetify v-radio}.
+   * Provides two height options depending on "dense" property:
+   * - if dense is set true (default), height is 24 px
+   * - if dense is set false, height is 32 px
+   * Provides VcsTooltip to show error messages
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {Array<string|VcsRadioItem>} items - A list of options. If strings are provided, the string is used as label and value.
+   */
+  export default {
+    name: 'VcsRadio',
+    components: { VcsTooltip, VcsLabel },
+    props: {
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      items: {
+        type: Array,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        errorMessage: '',
+      };
+    },
+    methods: {
+      setError() {
+        const rules = [...this.$attrs.rules].concat(this.$attrs.errorMessages);
+        this.errorMessage = validate(rules, this.$attrs.value).join('\n');
+      },
+    },
+    model: {
+      event: 'change',
+    },
+  };
+</script>

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

@@ -27,7 +27,7 @@
 }
 </style>
 <script>
-  import { computed } from '@vue/composition-api';
+  import { computed } from 'vue';
 
   /**
    * Converts a number (e.g. 12345678,9) to a locale-aware and

package/src/components/lists/VcsActionList.vue

@@ -51,20 +51,35 @@
    * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
    */
 
+  /**
+   * pattern to check actions
+   * @type {Object}
+   */
+  export const ActionPattern = {
+    name: String,
+    title: [undefined, String],
+    icon: [undefined, String],
+    callback: Function,
+    active: [undefined, Boolean],
+  };
+
+  /**
+   * @param {VcsAction} action
+   * @returns {boolean}
+   */
+  export function validateAction(action) {
+    return is(action, ActionPattern);
+  }
+
   /**
    * @param {Array<VcsAction>} actions
    * @returns {boolean}
    */
   export function validateActions(actions) {
-    return actions.every(item => is(item, {
-      name: String,
-      title: [undefined, String],
-      icon: [undefined, String],
-      callback: Function,
-      active: [undefined, Boolean],
-    }));
+    return actions.every(validateAction);
   }
 
+
   /**
    * @description
    * A component rendering a list of actions with overflow mechanic using

package/src/components/lists/VcsTreeview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-contents">
     <VcsTreeviewSearchbar
-      v-if="hasSearchbar"
+      v-if="showSearchbar"
       :placeholder="searchbarPlaceholder"
       v-model="search"
     />
@@ -55,7 +55,7 @@
 </style>
 
 <script>
-  import { getCurrentInstance, ref } from '@vue/composition-api';
+  import { getCurrentInstance, ref } from 'vue';
   import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
 
@@ -63,14 +63,14 @@
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
    * Can render dynamic components as leaf items.
    * In order to display an item needs to be registered and added to `availableComponents`.
-   * @vue-prop {boolean} [hasSearchbar=false] - Whether there is a searchbar for this treeview
+   * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated
    */
   export default {
     name: 'VcsTreeview',
     components: { VcsTreeviewSearchbar, VcsTreeviewLeaf },
     props: {
-      hasSearchbar: {
+      showSearchbar: {
         type: Boolean,
         default: false,
       },

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -13,7 +13,7 @@
       <span ref="imgContainer" />
     </span>
 
-    <div class="position-relative col-8 pa-0 d-flex align-center">
+    <div class="position-relative col-8 pa-0 d-flex align-center treeview-label" :title="$t(item.title)">
       <span>{{ $t(item.title) }}</span>
     </div>
     <VcsActionButtonList
@@ -27,6 +27,13 @@
     />
   </div>
 </template>
+<style lang="css" scoped>
+.treeview-label span{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
 
 <script>
   import
@@ -34,7 +41,7 @@
     computed,
     onMounted,
     ref,
-  } from '@vue/composition-api';
+  } from 'vue';
 
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
 
@@ -61,7 +68,7 @@
       const iconType = ref();
       const imgContainer = ref();
 
-      const leaf = computed(() => props.item.children.length === 0);
+      const leaf = computed(() => props.item?.children?.length === 0);
 
       onMounted(() => { // TODO make icon reactive
         const { icon } = props.item;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -104,7 +104,7 @@
 
 
 <script>
-  import { onMounted, onUnmounted } from '@vue/composition-api';
+  import { onMounted, onUnmounted } from 'vue';
 
   import { Subject } from 'rxjs';
   import { debounceTime } from 'rxjs/operators';
@@ -147,7 +147,6 @@
       onUnmounted(() => sub.unsubscribe());
 
       return {
-        sub,
         handleInput: (val) => {
           sub.next(val);
         },

package/src/components/tables/VcsTable.vue

@@ -0,0 +1,245 @@
+<template>
+  <v-card>
+    <VcsTreeviewSearchbar
+      v-if="showSearchbar"
+      :placeholder="$t(searchbarPlaceholder)"
+      v-model="search"
+    />
+    <v-data-table
+      dense
+      item-key="key"
+      :headers="translatedHeaders"
+      :items="items"
+      :items-per-page.sync="itemsPerPageRef"
+      :page.sync="page"
+      :search="search"
+      :custom-filter="handleFilter"
+      hide-default-footer
+      class="vcs-table"
+    >
+      <!-- eslint-disable-next-line -->
+      <template #item.key="{ item }">
+        <td class="vcs-table">
+          {{ $t(item.key) }}
+        </td>
+      </template>
+      <!-- eslint-disable-next-line -->
+      <template #item.value="{ item }">
+        <td class="vcs-table">
+          {{ $t(item.value) }}
+        </td>
+      </template>
+      <template #footer>
+        <v-divider />
+        <v-container class="pa-2" v-if="items.length > itemsPerPageRef">
+          <v-row
+            dense
+            no-gutters
+            align="center"
+            justify="center"
+          >
+            <v-menu offset-y dense>
+              <template #activator="{ on, attrs }">
+                <VcsButton
+                  small
+                  color="primary"
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  {{ itemsPerPageRef }}
+                  <v-icon>mdi-chevron-down</v-icon>
+                </VcsButton>
+              </template>
+              <v-list>
+                <v-list-item
+                  v-for="(number, index) in itemsPerPageArray"
+                  :key="index"
+                  @click="updateItemsPerPage(number)"
+                >
+                  <v-list-item-title>{{ number }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+            <span class="grey--text mx-2">{{ $t('components.vcsTable.itemsPerPage') }}</span>
+            <span class="grey--text mx-2">{{ itemsFrom }} - {{ itemsTo }} of {{ items.length }}</span>
+            <VcsButton
+              small
+              icon="mdi-chevron-left"
+              @click="formerPage"
+              tooltip="components.vcsTable.formerPage"
+              :disabled="page < 2"
+              class="mx-2"
+            />
+            <VcsButton
+              small
+              icon="mdi-chevron-right"
+              @click="nextPage"
+              tooltip="components.vcsTable.nextPage"
+              :disabled="page > numberOfPages - 1"
+              class="mx-1"
+            />
+          </v-row>
+        </v-container>
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+<script>
+  import { getCurrentInstance, ref, computed } from 'vue';
+  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
+  import VcsButton from '../buttons/VcsButton.vue';
+
+  /**
+   * @typedef {Object} TableItem
+   * @property {string} key
+   * @property {string} value
+   */
+
+  /**
+   * @param {Object} attributes
+   * @param {Array<TableItem>} [items]
+   * @param {string} [parent]
+   * @returns {Array<TableItem>}
+   */
+  export function attributesToItems(attributes, items = [], parent = undefined) {
+    const nestedKey = (key, nested) => (nested ? `${nested}.${key}` : key);
+    Object.entries(attributes).forEach(([key, value]) => {
+      if (value instanceof Object) {
+        attributesToItems(value, items, nestedKey(key, parent));
+      } else {
+        const item = { key: nestedKey(key, parent), value };
+        if (parent) { item.group = parent; }
+        items.push(item);
+      }
+    });
+    return items;
+  }
+
+  /**
+   * @description A table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-data-table/#props|vuetify v-data-table }
+   * @vue-prop {string} featureId - feature's id
+   * @vue-prop {Object} attributes - feature's attributes
+   * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names
+   * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
+   * @vue-prop {string} [searchbarPlaceholder='Search'] - placeholder for searchbar
+   * @vue-computed {Array<{key:string,value:string}>} items - from attributes derived table items
+   */
+  export default {
+    name: 'VcsTable',
+    components: { VcsButton, VcsTreeviewSearchbar },
+    props: {
+      featureId: {
+        type: String,
+        required: true,
+      },
+      attributes: {
+        type: Object,
+        required: true,
+      },
+      headers: {
+        type: Array,
+        default: () => [
+          { text: 'components.vcsTable.key', value: 'key', width: '160px' },
+          { text: 'components.vcsTable.value', value: 'value', width: '160px' },
+        ],
+      },
+      itemsPerPage: {
+        type: Number,
+        default: 10,
+      },
+      itemsPerPageArray: {
+        type: Array,
+        default: () => [5, 10, 15],
+      },
+      showSearchbar: {
+        type: Boolean,
+        default: true,
+      },
+      searchbarPlaceholder: {
+        type: String,
+        default: 'components.vcsTable.searchbarPlaceholder',
+      },
+    },
+    setup(props) {
+      const vm = getCurrentInstance().proxy;
+
+      const items = computed(() => {
+        return attributesToItems({
+          featureId: props.featureId,
+          ...props.attributes,
+        });
+      });
+
+      const translatedHeaders = computed(() => {
+        return props.headers.map((hd) => {
+          hd.text = vm.$t(hd.text);
+          return hd;
+        });
+      });
+
+      const itemsPerPageRef = ref(props.itemsPerPage);
+      const numberOfPages = computed(() => {
+        return Math.ceil(items.value.length / itemsPerPageRef.value);
+      });
+
+      const page = ref(1);
+      const itemsFrom = computed(() => ((page.value - 1) * itemsPerPageRef.value) + 1);
+      const itemsTo = computed(() => {
+        const last = page.value * itemsPerPageRef.value;
+        return last < items.value.length ? last : items.value.length;
+      });
+
+      /**
+       * @param {any} value
+       * @param {string} search
+       * @param {TableItem} item
+       * @returns {boolean}
+       */
+      // eslint-disable-next-line default-param-last
+      const handleFilter = (value, search = '', item) => {
+        const q = search.toLocaleLowerCase();
+        return [item.key, item.value].some((i) => {
+          const content = i.toString();
+          const translated = vm.$t(content);
+          return translated.toLowerCase().includes(q) || content.toLowerCase().includes(q);
+        });
+      };
+
+      return {
+        search: ref(''),
+        page,
+        items,
+        itemsPerPageRef,
+        itemsFrom,
+        itemsTo,
+        numberOfPages,
+        nextPage() {
+          if (page.value + 1 <= numberOfPages.value) {
+            page.value += 1;
+          }
+        },
+        formerPage() {
+          if (page.value - 1 >= 1) {
+            page.value -= 1;
+          }
+        },
+        updateItemsPerPage(number) {
+          itemsPerPageRef.value = number;
+        },
+        handleFilter,
+        translatedHeaders,
+      };
+    },
+  };
+</script>
+
+<style lang="scss"  scoped>
+.vcs-table {
+  td {
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

package/src/contentTree/LayerTree.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import { inject } from '@vue/composition-api';
+  import { inject } from 'vue';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   /**

package/src/contentTree/contentTreeCollection.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line max-classes-per-file
 import { IndexedCollection, makeOverrideCollection, getObjectFromClassRegistry } from '@vcmap/core';
 import { v4 as uuid } from 'uuid';
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import ContentTreeItem from './contentTreeItem.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import SubContentTreeItem, { subTreeSymbol } from './subContentTreeItem.js';
@@ -73,7 +73,7 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._defaultSubtreeItem = new SubContentTreeItem({ name: 'Content', icon: '$vcsLayers', title: 'content.title' }, app);
     /**
-     * @type {import("@vue/composition-api").Ref<Map<string, TreeViewItem>>}
+     * @type {import("vue").Ref<Map<string, TreeViewItem>>}
      * @private
      */
     this._subTreeViewItems = ref(new Map());
@@ -211,7 +211,7 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @param {string} id
-   * @returns {import("@vue/composition-api").ComputedRef<Array<TreeViewItem>>}
+   * @returns {import("vue").ComputedRef<Array<TreeViewItem>>}
    */
   getComputedVisibleTree(id) {
     return computed(() => {
@@ -253,7 +253,7 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @param {string} id
-   * @returns {import("@vue/composition-api").Ref<Array<string>>}
+   * @returns {import("vue").Ref<Array<string>>}
    */
   getTreeOpenStateRef(id) {
     const subTree = this._getSubTree(id);

package/src/contentTree/contentTreeItem.js

@@ -1,4 +1,4 @@
-import { ref, reactive, computed } from '@vue/composition-api';
+import { ref, reactive, computed } from 'vue';
 import { check, checkMaybe } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
@@ -63,7 +63,7 @@ class ContentTreeItem {
     this._app = app;
 
     /**
-     * @type {import("@vue/composition-api").Ref<Array<VcsAction>>}
+     * @type {import("vue").Ref<Array<VcsAction>>}
      * @private
      */
     this._actions = ref([]);
@@ -76,28 +76,28 @@ class ContentTreeItem {
 
     /**
      * Whether to display this item or not.
-     * @type {import("@vue/composition-api").Ref<boolean>}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     this._visible = ref(true);
 
     /**
      * Whether this item reacts to click events, e.g. with visual feedback
-     * @type {import("@vue/composition-api").Ref<boolean>}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     this._clickable = ref(true);
 
     /**
      * Whether this item should be displayed as disabled.
-     * @type {import("@vue/composition-api").Ref<boolean>}
+     * @type {import("vue").Ref<boolean>}
      * @private
      */
     this._disabled = ref(false);
 
     /**
      * The state of this item. NONE if this item cannot have a state.
-     * @type {import("@vue/composition-api").Ref<StateActionState>}
+     * @type {import("vue").Ref<StateActionState>}
      * @private
      */
     this._state = ref(StateActionState.NONE);
@@ -116,20 +116,20 @@ class ContentTreeItem {
     this.infoUrl = options.infoUrl;
 
     /**
-     * @type {import("@vue/composition-api").Ref<Object<string, string>|string|undefined>}
+     * @type {import("vue").Ref<Object<string, string>|string|undefined>}
      * @private
      */
     this._title = ref(options.title);
 
     /**
      * An optional icon to display with this item. Can be an URL or HTMLElement.
-     * @type {import("@vue/composition-api").Ref<string|HTMLCanvasElement|HTMLImageElement|undefined>}
+     * @type {import("vue").Ref<string|HTMLCanvasElement|HTMLImageElement|undefined>}
      * @private
      */
     this._icon = ref(options.icon);
 
     /**
-     * @type {import("@vue/composition-api").Ref<Array<TreeViewItem>>}
+     * @type {import("vue").Ref<Array<TreeViewItem>>}
      * @protected
      */
     this._children = ref([]);

package/src/contentTree/groupContentTreeItem.js

@@ -1,4 +1,4 @@
-import { watch } from '@vue/composition-api';
+import { watch } from 'vue';
 import ContentTreeItem, { contentTreeClassRegistry } from './contentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 

package/src/contentTree/layerContentTreeItem.js

@@ -1,5 +1,5 @@
 import { ViewPoint } from '@vcmap/core';
-import { reactive } from '@vue/composition-api';
+import { reactive } from 'vue';
 import { StateActionState } from '../actions/stateRefAction.js';
 import { createGoToViewpointAction, createModalAction } from '../actions/actionHelper.js';
 import component from '../actions/styleSelector.vue';
@@ -10,6 +10,7 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 /**
  * @typedef {ContentTreeItemOptions} LayerContentTreeItemOptions
  * @property {string} layerName
+ * @property {Array<string>} layerNamesToDeactivate list of LayerNames which should be deactivated if the click activates the layer
  */
 
 /**
@@ -80,6 +81,14 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
+    /**
+     * @type {Array<string>}
+     * @private
+     */
+    this._layerNamesToDeactivate = Array.isArray(options.layerNamesToDeactivate) ?
+      options.layerNamesToDeactivate.slice() :
+      [];
+
     /**
      * @type {Array<Function>}
      * @private
@@ -210,6 +219,10 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
     if (this._layer) {
       if (this.state === StateActionState.INACTIVE) {
         await this._layer.activate();
+        this._layerNamesToDeactivate
+          .map(n => this._app.layers.getByKey(n))
+          .filter(l => l)
+          .forEach(l => l.deactivate());
       } else {
         this._layer.deactivate();
       }
@@ -222,6 +235,7 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
+    config.layerNamesToDeactivate = this._layerNamesToDeactivate.slice();
     return config;
   }