@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -7,10 +7,6 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-    itemKey: {
-        type: StringConstructor;
-        required: true;
-    };
     serverItemsLength: {
         type: NumberConstructor;
         default: number;
@@ -35,18 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    singleSelect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectableKey: {
+    itemSelectable: {
         type: StringConstructor;
         default: string;
     };
-    value: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
 }, {
     hovering: import("vue").Ref<null>;
     search: Ref<UnwrapRef<string>>;
@@ -56,17 +44,17 @@ declare const _default: import("vue").DefineComponent<{
     itemsPerPageRef: Ref<UnwrapRef<number>>;
     itemsFrom: import("vue").ComputedRef<number>;
     itemsTo: import("vue").ComputedRef<any>;
-    numberOfPages: import("vue").ComputedRef<any>;
+    numberOfPages: import("vue").ComputedRef<number>;
     numberOfItems: import("vue").ComputedRef<any>;
-    totalNumber: import("vue").ComputedRef<any>;
+    totalNumber: import("vue").ComputedRef<number>;
     nextPage(): void;
     formerPage(): void;
-    updateItemsPerPage(number: any): void;
+    updateItemsPerPage: (number: any) => void;
     handleFilter: (value: any, filter: string | undefined, item: TableItem) => boolean;
     handleSearch: () => void;
     translatedHeaders: ComputedRef<Object[]>;
     showFooter: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     headers: {
         type: ArrayConstructor;
         default: () => never[];
@@ -75,10 +63,6 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
-    itemKey: {
-        type: StringConstructor;
-        required: true;
-    };
     serverItemsLength: {
         type: NumberConstructor;
         default: number;
@@ -103,31 +87,21 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    singleSelect: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selectableKey: {
+    itemSelectable: {
         type: StringConstructor;
         default: string;
     };
-    value: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
 }>>, {
-    value: unknown[];
+    items: unknown[];
     headers: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
-    items: unknown[];
-    singleSelect: boolean;
+    itemSelectable: string;
+    itemsPerPage: number;
     serverItemsLength: number;
     serverPagesLength: number;
-    itemsPerPage: number;
     itemsPerPageArray: unknown[];
-    selectableKey: string;
-}>;
+}, {}>;
 export default _default;
 export type UpdateItemsEvent = {
     page: number;

package/src/components/tables/VcsTable.vue

@@ -1,20 +1,13 @@
 <template>
-  <VcsDataTable
-    :items="items"
-    :headers="headers"
-    item-key="key"
-    v-bind="$attrs"
-  >
-    <!-- eslint-disable-next-line -->
+  <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 }"
       >
-        {{ $t(item.key) }}
+        {{ $st(item.key) }}
       </td>
     </template>
-    <!-- eslint-disable-next-line -->
     <template #item.value="{ item }">
       <td
         class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
@@ -28,7 +21,7 @@
             'multi-line': /\s/.test(item.value),
           }"
         >
-          {{ $t(item.value) }}
+          {{ $st(item.value) }}
         </component>
       </td>
     </template>
@@ -135,7 +128,7 @@
    * @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<{text: string, value: string}>} [headers] - optional array defining column names
+   * @vue-prop {Array<{title: string, value: string}>} [headers] - optional array defining column names
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
    */
   export default {
@@ -159,8 +152,12 @@
       headers: {
         type: Array,
         default: () => [
-          { text: 'components.vcsTable.key', value: 'key', width: '160px' },
-          { text: 'components.vcsTable.value', value: 'value', width: '160px' },
+          { title: 'components.vcsTable.key', value: 'key', width: '160px' },
+          {
+            title: 'components.vcsTable.value',
+            value: 'value',
+            width: '160px',
+          },
         ],
       },
     },
@@ -204,11 +201,9 @@
     border-bottom: none !important;
   }
 
-  ::v-deep {
-    .v-data-table__mobile-row__cell {
-      td.vcs-table.overflow-max-width {
-        max-width: 100% !important;
-      }
+  :deep(.v-data-table__mobile-row__cell) {
+    td.vcs-table.overflow-max-width {
+      max-width: 100% !important;
     }
   }
 </style>

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

@@ -47,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
     headers: {
         type: ArrayConstructor;
         default: () => {
-            text: string;
+            title: string;
             value: string;
             width: string;
         }[];
@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     items: ComputedRef<TableItem[]>;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     featureId: {
         type: StringConstructor;
         required: true;
@@ -72,7 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     headers: {
         type: ArrayConstructor;
         default: () => {
-            text: string;
+            title: string;
             value: string;
             width: string;
         }[];
@@ -80,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     headers: unknown[];
     tags: Record<string, any>;
-}>;
+}, {}>;
 export default _default;
 export type TableItem = {
     key: string;

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

@@ -22,7 +22,7 @@
       <VcsFeatureStyleComponent :feature-properties="featureProperties" />
     </VcsFormSection>
     <VcsVectorPropertiesComponent
-      :value="featureProperties"
+      :model-value="featureProperties"
       :show3-d-properties="is3D"
       @propertyChange="updateFeatureProperties"
       :value-default="defaultVectorProperties"
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import { inject, ref, watch, onUnmounted, provide, computed } from 'vue';
   import {
     CesiumMap,

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

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     featureProperties: import("vue").Ref<any>;
-    session: import("vue").ShallowRef<import("@vcmap/core").SelectFeaturesSession | import("@vcmap/core").CreateFeatureSession<GeometryType> | undefined>;
+    session: import("vue").ShallowRef<import("@vcmap/core", { with: { "resolution-mode": "import" } }).SelectFeaturesSession | import("@vcmap/core", { with: { "resolution-mode": "import" } }).CreateFeatureSession<GeometryType> | undefined>;
     SessionType: typeof SessionType;
     currentTransformationMode: import("vue").Ref<any>;
     TransformationMode: typeof TransformationMode;
@@ -42,8 +42,8 @@ declare const _default: import("vue").DefineComponent<{
     availableVectorProperties: import("vue").Ref<never[]>;
     is3D: import("vue").Ref<boolean>;
     updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => Promise<void>;
-    defaultVectorProperties: import("@vcmap/core").VectorPropertiesOptions;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    defaultVectorProperties: import("@vcmap/core", { with: { "resolution-mode": "import" } }).VectorPropertiesOptions;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     allowedVectorProperties: {
         type: ArrayConstructor;
         default: () => string[];
@@ -70,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
     startOpenVectorProperties: boolean;
     showResetVectorProperties: boolean;
     showStyle: boolean;
-}>;
+}, {}>;
 export default _default;
 export type EditorManager = {
     currentLayer: import("vue").ShallowRef<import("@vcmap/core").Layer | undefined>;

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

@@ -7,6 +7,7 @@
       >
         <v-col>
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             placeholder="0"
             prefix="X"
@@ -17,6 +18,7 @@
         </v-col>
         <v-col>
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             placeholder="0"
             prefix="Y"
@@ -27,6 +29,7 @@
         </v-col>
         <v-col>
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             placeholder="0"
             prefix="Z"
@@ -58,6 +61,7 @@
       <v-row no-gutters v-if="transformationMode === TransformationMode.ROTATE">
         <v-col cols="3">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             v-model.number="xValue"
             placeholder="0"
@@ -111,7 +115,7 @@
 <script>
   import { Math as CesiumMath } from '@vcmap-cesium/engine';
   import { TransformationMode } from '@vcmap/core';
-  import { VSheet, VContainer, VRow, VCol, VIcon } from 'vuetify/lib';
+  import { VSheet, VContainer, VRow, VCol, VIcon } from 'vuetify/components';
   import { inject, ref, watch } from 'vue';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';

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

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
     ccw(): Promise<void>;
     scale(): Promise<void>;
     placeOnTerrain(): void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     transformationMode: {
         type: StringConstructor;
         required: true;
@@ -40,6 +40,6 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     allowZInput: boolean;
-}>;
+}, {}>;
 export default _default;
 import { TransformationMode } from '@vcmap/core';

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

@@ -40,8 +40,8 @@
         <v-col>
           <VcsTextField
             id="vp-height-above-ground"
-            dense
             v-model.number="heightAboveGround"
+            :hide-spin-buttons="true"
             type="number"
             unit="m"
             :placeholder="'heightAboveGround' in value ? '0' : ''"
@@ -60,8 +60,8 @@
         <v-col>
           <VcsTextField
             id="vp-ground-level"
-            dense
             v-model.number="groundLevel"
+            :hide-spin-buttons="true"
             type="number"
             unit="m"
             :placeholder="'groundLevel' in value ? '0' : ''"
@@ -83,8 +83,8 @@
           <v-row no-gutters>
             <v-col v-for="(nearFar, index) in scaleByDistance" :key="index">
               <VcsTextField
-                dense
                 v-model.number="nearFar.value"
+                :hide-spin-buttons="true"
                 type="number"
                 :unit="index % 2 === 0 ? 'm' : ''"
                 :disabled="!hasScaleByDistance"
@@ -116,9 +116,9 @@
         </v-col>
         <v-col v-for="(distance, index) in eyeOffset" :key="index" cols="2">
           <VcsTextField
-            dense
             v-model.number="distance.value"
             unit="m"
+            :hide-spin-buttons="true"
             type="number"
             :disabled="!hasEyeOffset"
             :prefix="dimensionsUpperCase[index]"
@@ -210,8 +210,8 @@
         <v-col>
           <VcsTextField
             id="vp-extruded-height"
-            dense
             v-model.number="extrudedHeight"
+            :hide-spin-buttons="true"
             type="number"
             unit="m"
             :placeholder="'extrudedHeight' in value ? '0' : ''"
@@ -231,8 +231,8 @@
         <v-col>
           <VcsTextField
             id="vp-storeys-above"
-            dense
             v-model.number="storeysAboveGround"
+            :hide-spin-buttons="true"
             type="number"
             :placeholder="'storeysAboveGround' in value ? '0' : ''"
             clearable
@@ -291,8 +291,8 @@
         <v-col>
           <VcsTextField
             id="vp-skirt"
-            dense
             v-model.number="skirt"
+            :hide-spin-buttons="true"
             type="number"
             unit="m"
             :placeholder="'skirt' in value ? '0' : ''"
@@ -312,8 +312,8 @@
         <v-col>
           <VcsTextField
             id="vp-storeys-below"
-            dense
             v-model.number="storeysBelowGround"
+            :hide-spin-buttons="true"
             type="number"
             :placeholder="'storeysBelowGround' in value ? '0' : ''"
             clearable
@@ -385,8 +385,8 @@
         </v-col>
         <v-col v-for="(dimension, key) in modelScale" :key="key">
           <VcsTextField
-            dense
             v-model.number="dimension.value"
+            :hide-spin-buttons="true"
             type="number"
             :placeholder="`modelScale${key}` in value ? '1' : ''"
             :prefix="key"
@@ -402,8 +402,8 @@
         </v-col>
         <v-col>
           <VcsTextField
-            dense
             v-model.number="modelHeading"
+            :hide-spin-buttons="true"
             type="number"
             :placeholder="'modelHeading' in value ? '0' : ''"
             unit="°"
@@ -419,8 +419,8 @@
         </v-col>
         <v-col>
           <VcsTextField
-            dense
             v-model.number="modelPitch"
+            :hide-spin-buttons="true"
             type="number"
             :placeholder="'modelPitch' in value ? '0' : ''"
             unit="°"
@@ -434,8 +434,8 @@
         </v-col>
         <v-col>
           <VcsTextField
-            dense
             v-model.number="modelRoll"
+            :hide-spin-buttons="true"
             type="number"
             :placeholder="'modelRoll' in value ? '0' : ''"
             unit="°"
@@ -464,7 +464,7 @@
 </template>
 <script>
   import { computed } from 'vue';
-  import { VContainer, VRow, VCol, VDivider } from 'vuetify/lib';
+  import { VContainer, VRow, VCol, VDivider } from 'vuetify/components';
   import VcsFormSection from '../form-inputs-controls/VcsFormSection.vue';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
@@ -546,7 +546,7 @@
       VDivider,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: () => {},
       },
@@ -585,7 +585,7 @@
       });
 
       const altitudeMode = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'altitudeMode',
         emit,
       );
@@ -613,86 +613,86 @@
       });
 
       const heightAboveGround = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'heightAboveGround',
         emit,
       );
       const allowPicking = computed({
         get() {
-          return props.value.allowPicking;
+          return props.modelValue.allowPicking;
         },
         set(value) {
-          if (props.value.allowPicking !== value) {
-            const newParams = structuredClone(props.value);
+          if (props.modelValue.allowPicking !== value) {
+            const newParams = structuredClone(props.modelValue);
             const changedParams = { allowPicking: value || false };
-            emit('input', Object.assign(newParams, changedParams));
+            emit('update:modelValue', Object.assign(newParams, changedParams));
             emit('propertyChange', changedParams);
           }
         },
       });
       const classificationType = computed({
         get() {
-          if ('classificationType' in props.value) {
-            return props.value.classificationType || 'none';
+          if ('classificationType' in props.modelValue) {
+            return props.modelValue.classificationType || 'none';
           } else {
             return undefined;
           }
         },
         set(value) {
-          if (props.value.classificationType !== value) {
-            const newParams = structuredClone(props.value);
+          if (props.modelValue.classificationType !== value) {
+            const newParams = structuredClone(props.modelValue);
             const changedParams = {
               classificationType: value === 'none' ? undefined : value,
             };
-            emit('input', Object.assign(newParams, changedParams));
+            emit('update:modelValue', Object.assign(newParams, changedParams));
             emit('propertyChange', changedParams);
           }
         },
       });
       const scaleByDistance = useArrayProperty(
-        () => props.value,
+        () => props.modelValue,
         'scaleByDistance',
         emit,
         4,
       );
       const hasScaleByDistance = useHasProperty(
-        () => props.value,
+        () => props.modelValue,
         'scaleByDistance',
         emit,
         scaleByDistanceDefault,
       );
 
       const eyeOffset = useArrayProperty(
-        () => props.value,
+        () => props.modelValue,
         'eyeOffset',
         emit,
         3,
       );
       const hasEyeOffset = useHasProperty(
-        () => props.value,
+        () => props.modelValue,
         'eyeOffset',
         emit,
         eyeOffsetDefault,
       );
 
       const groundLevel = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'groundLevel',
         emit,
       );
       const extrudedHeight = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'extrudedHeight',
         emit,
       );
-      const skirt = usePrimitiveProperty(() => props.value, 'skirt', emit);
+      const skirt = usePrimitiveProperty(() => props.modelValue, 'skirt', emit);
       const storeysAboveGround = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'storeysAboveGround',
         emit,
       );
       const storeysBelowGround = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'storeysBelowGround',
         emit,
       );
@@ -705,20 +705,23 @@
               ...acc,
               [key]: computed({
                 get() {
-                  if (Array.isArray(props.value?.[key])) {
-                    return props.value?.[key];
-                  } else if (props.value?.[key] > 0) {
-                    return [props.value?.[key]];
+                  if (Array.isArray(props.modelValue?.[key])) {
+                    return props.modelValue?.[key];
+                  } else if (props.modelValue?.[key] > 0) {
+                    return [props.modelValue?.[key]];
                   } else {
                     return [];
                   }
                 },
                 set(value) {
-                  const newParams = structuredClone(props.value);
+                  const newParams = structuredClone(props.modelValue);
                   const changedParams = {
                     [key]: value,
                   };
-                  emit('input', Object.assign(newParams, changedParams));
+                  emit(
+                    'update:modelValue',
+                    Object.assign(newParams, changedParams),
+                  );
                   emit('propertyChange', changedParams);
                 },
               }),
@@ -727,7 +730,7 @@
       });
 
       const modelUrl = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'modelUrl',
         emit,
       );
@@ -741,7 +744,7 @@
             return {
               ...acc,
               [dimension]: usePrimitiveProperty(
-                () => props.value,
+                () => props.modelValue,
                 `modelScale${dimension}`,
                 emit,
               ),
@@ -750,26 +753,30 @@
       });
 
       const modelHeading = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'modelHeading',
         emit,
       );
       const modelPitch = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'modelPitch',
         emit,
       );
       const modelRoll = usePrimitiveProperty(
-        () => props.value,
+        () => props.modelValue,
         'modelRoll',
         emit,
       );
-      const baseUrl = usePrimitiveProperty(() => props.value, 'baseUrl', emit);
+      const baseUrl = usePrimitiveProperty(
+        () => props.modelValue,
+        'baseUrl',
+        emit,
+      );
 
       function reset() {
         const newParams = structuredClone(props.valueDefault);
 
-        emit('input', newParams);
+        emit('update:modelValue', newParams);
         emit('propertyChange', newParams);
       }