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

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/vector-properties/VcsVectorPropertiesComponent.vue

@@ -9,13 +9,13 @@
       <template v-if="show3DProperties">
         <v-row v-if="visibleProperties.has('altitudeMode')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-altitude-mode">{{
+            <VcsLabel :html-for="`${cid}-vp-altitude-mode`">{{
               $t('components.vectorProperties.altitudeMode')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsSelect
-              id="vp-altitude-mode"
+              :id="`${cid}-vp-altitude-mode`"
               :items="availableAltitudeModes"
               v-model="localValue.altitudeMode"
             />
@@ -29,13 +29,13 @@
           no-gutters
         >
           <v-col>
-            <VcsLabel html-for="vp-height-above-ground">{{
+            <VcsLabel :html-for="`${cid}-vp-height-above-ground`">{{
               $t('components.vectorProperties.heightAboveGround')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-height-above-ground"
+              :id="`${cid}-vp-height-above-ground`"
               v-model.number="localValue.heightAboveGround"
               :hide-spin-buttons="true"
               type="number"
@@ -46,13 +46,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('groundLevel')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-ground-level">{{
+            <VcsLabel :html-for="`${cid}-vp-ground-level`">{{
               $t('components.vectorProperties.groundLevel')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-ground-level"
+              :id="`${cid}-vp-ground-level`"
               v-model.number="localValue.groundLevel"
               :hide-spin-buttons="true"
               type="number"
@@ -142,13 +142,13 @@
         no-gutters
       >
         <v-col>
-          <VcsLabel html-for="vp-classification-type">
+          <VcsLabel :html-for="`${cid}-vp-classification-type`">
             {{ $t('components.vectorProperties.classificationType') }}
           </VcsLabel>
         </v-col>
         <v-col>
           <VcsSelect
-            id="vp-classification-type"
+            :id="`${cid}-vp-classification-type`"
             :items="availableClassificationTypes"
             v-model="classificationType"
           />
@@ -186,7 +186,7 @@
         <v-row v-if="visibleProperties.has('extrudedHeight')" no-gutters>
           <v-col>
             <VcsLabel
-              html-for="vp-extruded-height"
+              :html-for="`${cid}-vp-extruded-height`"
               :class="{
                 'px-4':
                   visibleProperties.has('storeysAboveGround') ||
@@ -197,7 +197,7 @@
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-extruded-height"
+              :id="`${cid}-vp-extruded-height`"
               v-model.number="localValue.extrudedHeight"
               :hide-spin-buttons="true"
               type="number"
@@ -212,13 +212,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('storeysAboveGround')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-storeys-above" class="px-4">{{
+            <VcsLabel :html-for="`${cid}-vp-storeys-above`" class="px-4">{{
               $t('components.vectorProperties.storeys')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-storeys-above"
+              :id="`${cid}-vp-storeys-above`"
               v-model.number="localValue.storeysAboveGround"
               :hide-spin-buttons="true"
               type="number"
@@ -235,13 +235,15 @@
           no-gutters
         >
           <v-col>
-            <VcsLabel :html-for="'vp-storey-heights-above'" class="px-4">{{
-              $t('components.vectorProperties.storeyHeights')
-            }}</VcsLabel>
+            <VcsLabel
+              :html-for="`${cid}-vp-storey-heights-above`"
+              class="px-4"
+              >{{ $t('components.vectorProperties.storeyHeights') }}</VcsLabel
+            >
           </v-col>
           <v-col>
             <VcsChipArrayInput
-              id="vp-storey-heights-above"
+              :id="`${cid}-vp-storey-heights-above`"
               column
               type="number"
               v-model="storeyHeights.storeyHeightsAboveGround.value"
@@ -266,7 +268,7 @@
         <v-row v-if="visibleProperties.has('skirt')" no-gutters>
           <v-col>
             <VcsLabel
-              html-for="vp-skirt"
+              :html-for="`${cid}-vp-skirt`"
               :class="{
                 'px-4':
                   visibleProperties.has('storeysBelowGround') ||
@@ -277,7 +279,7 @@
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-skirt"
+              :id="`${cid}-vp-skirt`"
               v-model.number="localValue.skirt"
               :hide-spin-buttons="true"
               type="number"
@@ -292,13 +294,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('storeysBelowGround')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-storeys-below" class="px-4">{{
+            <VcsLabel :html-for="`${cid}-vp-storeys-below`" class="px-4">{{
               $t('components.vectorProperties.storeys')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-storeys-below"
+              :id="`${cid}-vp-storeys-below`"
               v-model.number="localValue.storeysBelowGround"
               :hide-spin-buttons="true"
               type="number"
@@ -315,13 +317,15 @@
           no-gutters
         >
           <v-col>
-            <VcsLabel :html-for="'vp-storey-heights-below'" class="px-4">{{
-              $t('components.vectorProperties.storeyHeights')
-            }}</VcsLabel>
+            <VcsLabel
+              :html-for="`${cid}-vp-storey-heights-below`"
+              class="px-4"
+              >{{ $t('components.vectorProperties.storeyHeights') }}</VcsLabel
+            >
           </v-col>
           <v-col>
             <VcsChipArrayInput
-              :id="'vp-storey-heights-below'"
+              :id="`${cid}-vp-storey-heights-below`"
               column
               type="number"
               v-model="storeyHeights.storeyHeightsBelowGround.value"
@@ -348,13 +352,13 @@
       <v-container class="px-1 py-0">
         <v-row v-if="visibleProperties.has('modelUrl')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-model-url">
+            <VcsLabel :html-for="`${cid}-vp-model-url`">
               {{ $t('components.vectorProperties.modelUrl') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-model-url"
+              :id="`${cid}-vp-model-url`"
               v-model="localValue.modelUrl"
               clearable
               :placeholder="'modelUrl' in localValue ? 'example.glb' : ''"
@@ -384,12 +388,13 @@
         </template>
         <v-row v-if="visibleProperties.has('modelHeading')" no-gutters>
           <v-col cols="6">
-            <VcsLabel>{{
+            <VcsLabel :html-for="`${cid}-vp-model-heading`">{{
               $t('components.vectorProperties.modelHeading')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
+              :id="`${cid}-vp-model-heading`"
               v-model.number="localValue.modelHeading"
               :hide-spin-buttons="true"
               type="number"
@@ -401,12 +406,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('modelPitch')" no-gutters>
           <v-col cols="6">
-            <VcsLabel>{{
+            <VcsLabel :html-for="`${cid}-vp-model-pitch`">{{
               $t('components.vectorProperties.modelPitch')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
+              :id="`${cid}-vp-model-pitch`"
               v-model.number="localValue.modelPitch"
               :hide-spin-buttons="true"
               type="number"
@@ -418,12 +424,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('modelRoll')" no-gutters>
           <v-col cols="6">
-            <VcsLabel>{{
+            <VcsLabel :html-for="`${cid}-vp-model-roll`">{{
               $t('components.vectorProperties.modelRoll')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
+              :id="`${cid}-vp-model-roll`"
               v-model.number="localValue.modelRoll"
               :hide-spin-buttons="true"
               type="number"
@@ -435,13 +442,13 @@
         </v-row>
         <v-row v-if="visibleProperties.has('baseUrl')" no-gutters>
           <v-col>
-            <VcsLabel html-for="vp-base-url">{{
+            <VcsLabel :html-for="`${cid}-vp-base-url`">{{
               $t('components.vectorProperties.baseUrl')
             }}</VcsLabel>
           </v-col>
           <v-col>
             <VcsTextField
-              id="vp-base-url"
+              :id="`${cid}-vp-base-url`"
               clearable
               v-model="localValue.baseUrl"
               :placeholder="'baseUrl' in localValue ? 'path/to/files/' : ''"
@@ -466,6 +473,7 @@
   import VcsSelect from '../form-inputs-controls/VcsSelect.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
   import VcsChipArrayInput from '../form-inputs-controls/VcsChipArrayInput.vue';
+  import { useComponentId } from '../composables.js';
 
   export const genericVectorProperties = [
     'altitudeMode',
@@ -698,6 +706,8 @@
           : [],
       );
 
+      const cid = useComponentId();
+
       return {
         localValue,
         headerActions,
@@ -712,6 +722,7 @@
         storeyHeights,
         modelScale,
         dimensionsUpperCase,
+        cid,
       };
     },
   };