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

package/src/components/tables/VcsTable.vue

@@ -1,34 +1,33 @@
 <template>
-  <VcsDataTable :items="items" :headers="headers" v-bind="$attrs">
-    <template #item.key="{ item }">
-      <td
-        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{ 'max-width': headers[0].width }"
+  <VcsDataTable
+    v-bind="$attrs"
+    :items="items"
+    :headers="[keyHeader, valueHeader]"
+  >
+    <template #body="{ page, itemsPerPage }">
+      <tr
+        class="v-data-table__tr"
+        v-for="(item, idx) in items.slice(
+          (page - 1) * itemsPerPage,
+          page * itemsPerPage,
+        )"
+        :key="`row-${idx}`"
       >
-        {{ $st(item.key) }}
-      </td>
-    </template>
-    <template #item.value="{ item }">
-      <td
-        class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
-        :style="{ 'max-width': headers[1].width }"
-      >
-        <component
-          :is="getTag(tags, item.key)"
-          v-bind="getTagOptions(tags, item.key)"
-          :class="{
-            'single-line': !/\s/.test(item.value),
-            'multi-line': /\s/.test(item.value),
-          }"
+        <vcs-table-cell :title="item.key" :width="keyHeader.width" />
+        <vcs-table-cell
+          :title="item.value"
+          :width="valueHeader.width"
+          :tag="getTag(tags, item.key)"
+          :tag-options="getTagOptions(tags, item.key)"
         >
-          {{ $st(item.value) }}
-        </component>
-      </td>
+        </vcs-table-cell>
+      </tr>
     </template>
   </VcsDataTable>
 </template>
 <script>
   import { computed } from 'vue';
+  import VcsTableCell from './VcsTableCell.vue';
   import VcsDataTable from './VcsDataTable.vue';
 
   /**
@@ -125,22 +124,19 @@
 
   /**
    * @description A table view for feature attributes using VcsDataTable
-   * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
    * @vue-prop {Object} tags - Allows to render the value column for specific attribute keys with special html elements. See 'defaultTagOptions' for supported html tags.
-   * @vue-prop {Array<{title: string, value: string}>} [headers] - optional array defining column names
+   * @vue-prop {{title: string, key: 'key', width: string|undefined}} [keyHeader] - optional header defining the key column
+   * @vue-prop {{title: string, key: 'value', width: string|undefined}} [valueHeader] - optional header defining the value column
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
    */
   export default {
     name: 'VcsTable',
     components: {
+      VcsTableCell,
       VcsDataTable,
     },
     props: {
-      featureId: {
-        type: String,
-        required: true,
-      },
       attributes: {
         type: Object,
         required: true,
@@ -149,16 +145,23 @@
         type: Object,
         default: undefined,
       },
-      headers: {
-        type: Array,
-        default: () => [
-          { title: 'components.vcsTable.key', value: 'key', width: '160px' },
-          {
-            title: 'components.vcsTable.value',
-            value: 'value',
-            width: '160px',
-          },
-        ],
+      keyHeader: {
+        type: Object,
+        default: () => ({
+          title: 'components.vcsTable.key',
+          key: 'key',
+          width: '128px',
+        }),
+        validator: (value) => value.key === 'key',
+      },
+      valueHeader: {
+        type: Object,
+        default: () => ({
+          title: 'components.vcsTable.value',
+          key: 'value',
+          width: '192px',
+        }),
+        validator: (value) => value.key === 'value',
       },
     },
     setup(props) {
@@ -166,10 +169,7 @@
        * @type {ComputedRef<Array<TableItem>>}
        */
       const items = computed(() => {
-        return attributesToItems({
-          featureId: props.featureId,
-          ...props.attributes,
-        });
+        return attributesToItems(props.attributes);
       });
 
       return {
@@ -182,28 +182,11 @@
 </script>
 
 <style lang="scss" scoped>
-  .single-line {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .multi-line {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    height: auto;
-    max-height: 96px;
-  }
-
-  .noBorder {
-    border-bottom: none !important;
-  }
-
   :deep(.v-data-table__mobile-row__cell) {
     td.vcs-table.overflow-max-width {
       max-width: 100% !important;
     }
   }
+  :deep(.v-table__wrapper) {
+  }
 </style>

package/src/components/tables/VcsTable.vue.d.ts

@@ -32,10 +32,6 @@ export const defaultTagOptions: {
     };
 };
 declare const _default: import("vue").DefineComponent<{
-    featureId: {
-        type: StringConstructor;
-        required: true;
-    };
     attributes: {
         type: ObjectConstructor;
         required: true;
@@ -44,23 +40,29 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    headers: {
-        type: ArrayConstructor;
+    keyHeader: {
+        type: ObjectConstructor;
+        default: () => {
+            title: string;
+            key: string;
+            width: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    valueHeader: {
+        type: ObjectConstructor;
         default: () => {
             title: string;
-            value: string;
+            key: string;
             width: string;
-        }[];
+        };
+        validator: (value: unknown) => boolean;
     };
 }, {
     items: ComputedRef<TableItem[]>;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    featureId: {
-        type: StringConstructor;
-        required: true;
-    };
     attributes: {
         type: ObjectConstructor;
         required: true;
@@ -69,17 +71,28 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    headers: {
-        type: ArrayConstructor;
+    keyHeader: {
+        type: ObjectConstructor;
+        default: () => {
+            title: string;
+            key: string;
+            width: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    valueHeader: {
+        type: ObjectConstructor;
         default: () => {
             title: string;
-            value: string;
+            key: string;
             width: string;
-        }[];
+        };
+        validator: (value: unknown) => boolean;
     };
 }>>, {
-    headers: unknown[];
     tags: Record<string, any>;
+    keyHeader: Record<string, any>;
+    valueHeader: Record<string, any>;
 }, {}>;
 export default _default;
 export type TableItem = {

package/src/components/tables/VcsTableCell.vue

@@ -0,0 +1,72 @@
+<script setup>
+  import { ref, computed } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    title: {
+      type: [String, Number],
+      default: undefined,
+    },
+    width: {
+      type: [String, Number],
+      default: undefined,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    tagOptions: {
+      type: Object,
+      default: () => {},
+    },
+  });
+
+  const td = ref(null);
+
+  const tooltip = createEllipseTooltip(
+    computed(() => td.value),
+    computed(() => undefined),
+    computed(() => props.title),
+  );
+
+  const hasWhiteSpace = computed(() => /\s/.test(props.title));
+  // important: tooltip has evaluated before single-line and multi-line class are applied
+  const isSingleLine = computed(() => tooltip.value && !hasWhiteSpace.value);
+  const isMultiLine = computed(() => tooltip.value && hasWhiteSpace.value);
+</script>
+
+<template>
+  <td ref="td" :style="{ 'max-width': width }">
+    <component
+      :is="tag"
+      :class="{
+        'single-line': isSingleLine,
+        'multi-line': isMultiLine,
+      }"
+      v-bind="tagOptions"
+    >
+      {{ $st(title) }}
+    </component>
+    <v-tooltip v-if="tooltip" activator="parent">
+      {{ $st(tooltip) }}
+    </v-tooltip>
+  </td>
+</template>
+
+<style scoped>
+  .single-line {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    height: auto;
+    max-height: 96px;
+  }
+</style>

package/src/components/tables/VcsTableCell.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    tag: string;
+    tagOptions: Record<string, any>;
+    title?: string | number | undefined;
+    width?: string | number | undefined;
+    $props: {
+        readonly tag?: string | undefined;
+        readonly tagOptions?: Record<string, any> | undefined;
+        readonly title?: string | number | undefined;
+        readonly width?: string | number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/components/vector-properties/VcsFeatureEditingWindow.vue

@@ -1,7 +1,7 @@
 <template>
   <v-sheet>
     <VcsFormSection
-      v-if="session.type === SessionType.SELECT"
+      v-if="session?.type === SessionType.SELECT"
       heading="components.editor.modifyHeader"
       :action-button-list-overflow-count="5"
       :header-actions="availableModifyActions"
@@ -45,6 +45,7 @@
     provide,
     computed,
     shallowRef,
+    reactive,
   } from 'vue';
   import {
     CesiumMap,
@@ -60,7 +61,7 @@
     pointVectorProperties,
     nonPointVectorProperties,
   } from './VcsVectorPropertiesComponent.vue';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
 
   /**
    * @typedef {Object} EditorManager
@@ -290,6 +291,9 @@
         nFeatures: features.value.length,
       }));
 
+      /**
+       * @returns {{actions: VcsActions, destroy: function():void}}
+       */
       function getAllowedModifyActions() {
         const allowedModes = getAllowedEditorTransformationModes(
           currentGeometryTypes.value.types,
@@ -297,30 +301,53 @@
         );
 
         const allowedActions = allowedModes.map((mode) => {
-          return {
+          return reactive({
             name: mode,
             title: `components.editor.${mode}`,
             icon: EditorTransformationIcons[mode],
-            active: computed(() => currentTransformationMode.value === mode),
+            active: mode === currentTransformationMode.value,
             callback: () => {
               toggleTransformationSession(mode);
             },
-          };
+          });
         });
 
+        const transformationModeWatcher = watch(
+          currentTransformationMode,
+          (mode) => {
+            allowedActions.forEach((action) => {
+              if (Object.values(TransformationMode).includes(action.name)) {
+                action.active = mode === action.name;
+              }
+            });
+          },
+        );
+
+        let geometryEditingWatcher;
         if (features.value.length === 1) {
-          allowedActions.unshift({
+          const editGeometryAction = reactive({
             name: 'editGeometry',
             title: `components.editor.edit`,
             icon: '$vcsEditVertices',
-            active: isGeometryEditing,
+            active: isGeometryEditing.value,
             callback: () => {
               toggleEditGeometrySession();
             },
           });
+          allowedActions.unshift(editGeometryAction);
+
+          geometryEditingWatcher = watch(isGeometryEditing, () => {
+            editGeometryAction.active = isGeometryEditing.value;
+          });
         }
 
-        return allowedActions;
+        return {
+          actions: allowedActions,
+          destroy() {
+            transformationModeWatcher();
+            geometryEditingWatcher?.();
+          },
+        };
       }
 
       function getAllowedVectorProperties() {
@@ -350,6 +377,8 @@
         return properties;
       }
 
+      let destroyModifyActions = () => {};
+
       const geometryTypesWatcher = watch(
         currentGeometryTypes,
         (curr, prev) => {
@@ -359,7 +388,11 @@
             (curr.nFeatures > 1 && prev.nFeatures === 1) ||
             (prev.nFeatures > 1 && curr.nFeatures === 1)
           ) {
-            availableModifyActions.value = getAllowedModifyActions();
+            destroyModifyActions();
+            const modifyActions = getAllowedModifyActions();
+            destroyModifyActions = modifyActions.destroy;
+
+            availableModifyActions.value = modifyActions.actions;
             availableVectorProperties.value = getAllowedVectorProperties();
           }
         },
@@ -379,6 +412,7 @@
         geometryTypesWatcher();
         propsWatcher();
         editorManager.stopEditing();
+        destroyModifyActions();
       });
 
       return {

package/src/components/vector-properties/VcsFeatureTransforms.vue

@@ -11,6 +11,7 @@
             type="number"
             placeholder="0"
             prefix="X"
+            force-prefix
             v-model.number="xValue"
             unit="m"
             @keydown.enter.prevent="translate"
@@ -22,6 +23,7 @@
             type="number"
             placeholder="0"
             prefix="Y"
+            force-prefix
             v-model.number="yValue"
             unit="m"
             @keydown.enter.prevent="translate"
@@ -33,6 +35,7 @@
             type="number"
             placeholder="0"
             prefix="Z"
+            force-prefix
             v-model.number="zValue"
             unit="m"
             :disabled="
@@ -89,6 +92,7 @@
         <v-col cols="3">
           <VcsTextField
             prefix="X"
+            force-prefix
             v-model.number="xValue"
             placeholder="1"
             @keydown.enter.prevent="scale"
@@ -97,6 +101,7 @@
         <v-col cols="3">
           <VcsTextField
             prefix="Y"
+            force-prefix
             v-model.number="yValue"
             placeholder="1"
             @keydown.enter.prevent="scale"

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue

@@ -460,7 +460,7 @@
     useProxiedComplexModel,
     useModelHasProperty,
   } from '../modelHelper.js';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsSelect from '../form-inputs-controls/VcsSelect.vue';

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -154,9 +154,9 @@
                   height="32"
                   hide-details
                   :step="0.1"
-                  v-model="localValue[key]"
-                  v-bind="hprSliderOptions[key]"
                   :disabled="editAction.active"
+                  v-bind="hprSliderOptions[key]"
+                  v-model="localValue[key]"
                   @update:model-value="gotoViewpoint"
                 />
               </v-col>
@@ -176,11 +176,12 @@
     onUnmounted,
     reactive,
     ref,
+    toRaw,
     watch,
   } from 'vue';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { CesiumMap, ObliqueMap, OpenlayersMap, Viewpoint } from '@vcmap/core';
-  import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../section/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
@@ -188,6 +189,20 @@
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
+  /**
+   * Updates the localValue ref by keeping name and properties
+   * @param {import("vue").Ref<import("vue").UnwrapRef<import("@vcmap/core").ViewpointOptions>>} localValue
+   * @param {import("@vcmap/core").Viewpoint} viewpoint
+   */
+  function updateLocalValueFromViewpoint(localValue, viewpoint) {
+    const options = viewpoint.toJSON();
+    options.name = localValue.value.name;
+    if (localValue.value.properties) {
+      options.properties = toRaw(localValue.value.properties);
+    }
+    localValue.value = options;
+  }
+
   /**
    * Set up post render handler, if action is active.
    * If action is inactive, destroy post render handler to allow manual editing.
@@ -213,9 +228,7 @@
           ) {
             return;
           }
-          const options = viewpoint.toJSON();
-          options.name = localValue.value.name;
-          localValue.value = options;
+          updateLocalValueFromViewpoint(localValue, viewpoint);
           cachedViewpoint = viewpoint;
         },
       );
@@ -416,10 +429,10 @@
         title: 'components.viewpoint.updateFromView',
         async callback() {
           if (app.maps.activeMap) {
-            const viewpoint = await app.maps.activeMap.getViewpoint();
-            const options = viewpoint.toJSON();
-            options.name = localValue.value.name;
-            localValue.value = options;
+            updateLocalValueFromViewpoint(
+              localValue,
+              await app.maps.activeMap.getViewpoint(),
+            );
           }
         },
       };

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -7,9 +7,10 @@
     v-bind="{ ...$attrs, ...$props }"
   >
     <VcsViewpointComponent
-      v-model="localConfig"
       hide-name
       :name-rules="nameRules"
+      v-bind="$attrs"
+      v-model="localConfig"
     />
   </AbstractConfigEditor>
 </template>

package/src/contentTree/LayerTree.vue

@@ -3,8 +3,9 @@
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"
-      v-model:opened="opened"
       :show-searchbar="true"
+      v-model:opened="open"
+      open-on-click
       :searchbar-placeholder="'content.search.placeholder'"
       item-children="visibleChildren"
     />
@@ -15,7 +16,7 @@
 </template>
 
 <script>
-  import { computed, inject, onMounted, reactive, watch } from 'vue';
+  import { inject, ref, watch } from 'vue';
   import { VSheet } from 'vuetify/components';
   import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
@@ -35,7 +36,7 @@
     },
     setup(props) {
       const app = inject('vcsApp');
-      const open = app.contentTree.getTreeOpenState(props.windowState.id);
+      const open = ref(app.contentTree.getTreeOpenState(props.windowState.id));
       const tree = app.contentTree.getComputedVisibleTree(props.windowState.id);
 
       function getWithVisibleChildren(item) {
@@ -59,8 +60,7 @@
         tree,
         (value, oldValue) => {
           if (openStateMap.has(app.maps.activeMap?.name)) {
-            open.splice(0);
-            open.push(...openStateMap.get(app.maps.activeMap?.name));
+            open.value = openStateMap.get(app.maps.activeMap?.name);
           } else {
             const items = [...app.contentTree]
               .filter((i) => i.initOpen && i.getTreeViewItem().visible)
@@ -69,9 +69,9 @@
               ? oldValue.map(getWithVisibleChildren).flat()
               : [];
             const changed = items.filter(
-              (name) => !oldValues.includes(name) && !open.includes(name),
+              (name) => !oldValues.includes(name) && !open.value.includes(name),
             );
-            open.push(...changed);
+            open.value.push(...changed);
           }
         },
         { immediate: true },
@@ -79,31 +79,13 @@
 
       watch(open, () => {
         if (app.maps.activeMap) {
-          openStateMap.set(app.maps.activeMap.name, [...open]);
+          openStateMap.set(app.maps.activeMap.name, [...open.value]);
         }
       });
 
-      // the entire block, very ugly because of https://github.com/vuetifyjs/vuetify/issues/19414
-      const opened = reactive([]);
-      onMounted(() => {
-        opened.splice(0);
-        opened.push(...open);
-
-        watch(opened, () => {
-          open.splice(0);
-          open.push(...opened);
-        });
-      });
-
       return {
         tree,
-        opened: computed({
-          get: () => opened,
-          set: (value) => {
-            opened.splice(0);
-            opened.push(...value);
-          },
-        }),
+        open,
       };
     },
   };

package/src/contentTree/LayerTree.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     tree: any;
-    opened: import("vue").WritableComputedRef<any[]>;
+    open: import("vue").Ref<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;

package/src/contentTree/contentTreeCollection.d.ts

@@ -62,6 +62,7 @@ declare class ContentTreeCollection extends IndexedCollection<ContentTreeItem> {
     private _suspendListeners;
     /**
      * @private
+     * @param {Array<string>} exclude
      */
     private _clearSubTrees;
     /**