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

package/src/components/section/VcsFormSection.vue

@@ -10,16 +10,16 @@
             <v-btn
               :ripple="false"
               dense
-              variant="plain"
+              variant="text"
               icon
-              :size="useItemHeight().value - 4"
+              :size="itemHeight - 4"
               :disabled="disabled"
               elevation="0"
               @click="open = !open"
               v-if="expandable"
               :aria-expanded="open"
             >
-              <v-icon :size="useItemHeight().value - 8">{{
+              <v-icon>{{
                 open ? 'mdi-chevron-down' : 'mdi-chevron-right'
               }}</v-icon>
             </v-btn>
@@ -134,12 +134,14 @@
         return props.headerActions;
       });
 
+      const itemHeight = useItemHeight();
+
       return {
         open,
         showContent,
         showHelp,
         actions,
-        useItemHeight,
+        itemHeight,
       };
     },
   };
@@ -152,4 +154,8 @@
   .v-alert--text:before {
     background-color: transparent;
   }
+  // remove hover shadow over button
+  :deep(.v-btn__overlay) {
+    --v-hover-opacity: 0;
+  }
 </style>

package/src/components/section/VcsFormSection.vue.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     showContent: import("vue").ComputedRef<boolean>;
     showHelp: import("vue").ComputedRef<boolean>;
     actions: import("vue").ComputedRef<VcsAction>;
-    useItemHeight: typeof useItemHeight;
+    itemHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;
@@ -74,4 +74,3 @@ declare const _default: import("vue").DefineComponent<{
     helpText: string;
 }, {}>;
 export default _default;
-import { useItemHeight } from '../../vuePlugins/vuetify.js';

package/src/components/style/VcsTextMenu.vue

@@ -1,8 +1,8 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, ...$props }"
     :value-fallback="fallbackStyle"
     name="components.style.text"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <div v-if="modelValue" class="d-flex justify-center align-center">

package/src/components/style/VcsVectorStyleComponent.vue

@@ -5,9 +5,9 @@
       :key="key"
       :is="componentMap[key]"
       :value-default="valueDefault[key]"
+      v-bind="specificProps[key]"
       v-model="localValue[key]"
       @update:model-value="(v) => $emit(`update:${key}`, v)"
-      v-bind="specificProps[key]"
     />
   </v-sheet>
 </template>

package/src/components/tables/VcsDataTable.vue

@@ -72,28 +72,30 @@
         <tfoot>
           <tr class="v-data-table__tr">
             <td colspan="100" class="text-center pa-1">
-              <v-menu dense>
-                <template #activator="{ props }">
-                  <VcsButton
-                    color="primary"
-                    v-bind="props"
-                    class="v-btn--variant-plain mx-2 d-flex flex-wrap"
-                  >
-                    {{ 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)"
-                    style="min-height: auto; height: 24px; text-align: right"
-                  >
-                    <v-list-item-title>{{ number }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+              <div class="d-inline-block">
+                <v-menu>
+                  <template #activator="{ props }">
+                    <VcsButton
+                      color="primary"
+                      v-bind="props"
+                      class="v-btn--variant-plain mx-2 d-flex flex-wrap"
+                    >
+                      {{ 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)"
+                      style="min-height: auto; height: 24px; text-align: right"
+                    >
+                      <v-list-item-title>{{ number }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
               <span class="mx-2">{{
                 $t('components.vcsDataTable.itemsPerPage')
               }}</span>
@@ -419,6 +421,9 @@
   }
 
   :deep(.vcs-table > .v-table__wrapper) {
+    overflow-x: hidden;
+    overflow-y: auto;
+
     table tbody tr {
       &:hover {
         background-color: transparent !important;
@@ -430,6 +435,7 @@
 
       td {
         padding: 0 8px;
+        border-bottom: transparent !important;
       }
     }
     table thead tr {

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,
@@ -300,7 +301,7 @@
         );
 
         const allowedActions = allowedModes.map((mode) => {
-          return {
+          return reactive({
             name: mode,
             title: `components.editor.${mode}`,
             icon: EditorTransformationIcons[mode],
@@ -308,7 +309,7 @@
             callback: () => {
               toggleTransformationSession(mode);
             },
-          };
+          });
         });
 
         const transformationModeWatcher = watch(
@@ -324,7 +325,7 @@
 
         let geometryEditingWatcher;
         if (features.value.length === 1) {
-          const editGeometryAction = {
+          const editGeometryAction = reactive({
             name: 'editGeometry',
             title: `components.editor.edit`,
             icon: '$vcsEditVertices',
@@ -332,7 +333,7 @@
             callback: () => {
               toggleEditGeometrySession();
             },
-          };
+          });
           allowedActions.unshift(editGeometryAction);
 
           geometryEditingWatcher = watch(isGeometryEditing, () => {

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

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -7,10 +7,10 @@
     v-bind="{ ...$attrs, ...$props }"
   >
     <VcsViewpointComponent
-      v-bind="$attrs"
-      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,
       };
     },
   };