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

package/src/components/plugins/AbstractConfigEditor.vue

@@ -32,11 +32,7 @@
    * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
    * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
    * @vue-prop {string} [submitButtonTitle='components.apply'] - Option to change the submit button title, e.g. to 'components.add'.
-   * @vue-prop {boolean} [setConfigOnCancel=true] - Whether setConfig shall be called on cancel. Ensures compatability with v5.0.x
    * @vue-prop {boolean} [autoClose=true] - Whether window component shall be close on submit or cancel.
-   * @vue-prop {function():void} [onSubmit] - Callback function called on submit.
-   * @vue-prop {function():void} [onReset] - Callback function called on reset.
-   * @vue-prop {function():void} [onCancel] - Callback function called on cancel.
    * @vue-event {Event} submit - Event fired on clicking the submit button.
    * @vue-event {Event} cancel - Event fired on clicking the cancel button.
    * @vue-event {Event} reset - Event fired on clicking the reset button.
@@ -70,19 +66,8 @@
         type: Boolean,
         default: true,
       },
-      onSubmit: {
-        type: Function,
-        default: () => {},
-      },
-      onReset: {
-        type: Function,
-        default: () => {},
-      },
-      onCancel: {
-        type: Function,
-        default: () => {},
-      },
     },
+    emits: ['submit', 'cancel', 'reset'],
     setup(props, { attrs, emit }) {
       const app = inject('vcsApp');
 
@@ -95,24 +80,18 @@
       return {
         isValid: ref(true),
         submit(e) {
-          props.onSubmit();
           emit('submit', e);
           if (props.autoClose) {
             close();
           }
         },
         cancel(e) {
-          props.onCancel();
-          if (props.setConfigOnCancel) {
-            attrs.setConfig?.();
-          }
           emit('cancel', e);
           if (props.autoClose) {
             close();
           }
         },
         reset(e) {
-          props.onReset();
           emit('reset', e);
         },
       };

package/src/components/plugins/AbstractConfigEditor.vue.d.ts

@@ -19,24 +19,12 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onSubmit: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onReset: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onCancel: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
 }, {
     isValid: import("vue").Ref<boolean>;
     submit(e: any): void;
     cancel(e: any): void;
     reset(e: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "reset" | "submit")[], "cancel" | "reset" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showReset: {
         type: BooleanConstructor;
         default: boolean;
@@ -57,26 +45,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    onSubmit: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onReset: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-    onCancel: {
-        type: FunctionConstructor;
-        default: () => void;
-    };
-}>>, {
-    onReset: Function;
-    onSubmit: Function;
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+}, {
     actions: unknown[];
     showReset: boolean;
     submitButtonTitle: string;
     setConfigOnCancel: boolean;
     autoClose: boolean;
-    onCancel: Function;
 }, {}>;
 export default _default;

package/src/components/section/VcsExpansionPanel.vue

@@ -10,6 +10,7 @@
   import { computed, ref, useSlots } from 'vue';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import { createEllipseTooltip } from '../composables.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   const props = defineProps({
     heading: {
@@ -39,14 +40,19 @@
     computed(() => undefined),
     computed(() => props.heading),
   );
+  const iconSize = useIconSize();
 </script>
 <template>
   <v-expansion-panel :disabled="disabled" v-bind="$attrs">
     <v-expansion-panel-title static class="px-2">
       <template #default="{ expanded }">
         <v-list-item-title ref="panelHeader">
-          <v-icon v-if="!expanded" class="pr-1"> mdi-chevron-right </v-icon>
-          <v-icon v-if="expanded" class="pr-1"> mdi-chevron-down </v-icon>
+          <v-icon :size="iconSize" v-if="!expanded" class="pr-1">
+            mdi-chevron-right
+          </v-icon>
+          <v-icon :size="iconSize" v-if="expanded" class="pr-1">
+            mdi-chevron-down
+          </v-icon>
           <span
             :class="{
               'vcs-panel-title__append':
@@ -82,7 +88,7 @@
   :deep(.v-expansion-panel-title) {
     font-size: var(--v-vcs-font-size);
     min-height: unset;
-    height: var(--v-vcs-item-height);
+    height: calc(var(--v-vcs-font-size) * 2 + 6px);
     line-height: 1.2;
     padding: 0 8px;
   }

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

@@ -1,11 +1,11 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    headerActions: unknown[];
     disabled: boolean;
+    headerActions: unknown[];
     heading?: string | undefined;
     actionButtonListOverflowCount?: number | undefined;
     $props: {
-        readonly headerActions?: unknown[] | undefined;
         readonly disabled?: boolean | undefined;
+        readonly headerActions?: unknown[] | undefined;
         readonly heading?: string | undefined;
         readonly actionButtonListOverflowCount?: number | undefined;
     };

package/src/components/section/VcsFormSection.vue

@@ -12,7 +12,7 @@
               dense
               variant="text"
               icon
-              :size="itemHeight - 4"
+              :size="fontSize * 2"
               :disabled="disabled"
               elevation="0"
               @click="open = !open"
@@ -36,7 +36,7 @@
         </div>
       </div>
     </slot>
-    <VcsHelp :text="helpText" :show="showHelp">
+    <VcsHelp :text="helpText" v-if="showHelp && ($slots.help || helpText)">
       <slot name="help" />
     </VcsHelp>
     <article class="section-content" v-if="showContent">
@@ -48,7 +48,7 @@
 <script>
   import { computed, reactive, ref } from 'vue';
   import { VBtn, VIcon } from 'vuetify/components';
-  import { useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -134,14 +134,14 @@
         return props.headerActions;
       });
 
-      const itemHeight = useItemHeight();
+      const fontSize = useFontSize();
 
       return {
         open,
         showContent,
         showHelp,
         actions,
-        itemHeight,
+        fontSize,
       };
     },
   };
@@ -149,7 +149,7 @@
 
 <style lang="scss" scoped>
   .vcs-form-section-header {
-    height: calc(var(--v-vcs-item-height) + 8px);
+    height: calc(var(--v-vcs-font-size) * 2 + 14px);
   }
   .v-alert--text:before {
     background-color: transparent;

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>;
-    itemHeight: import("vue").ComputedRef<number>;
+    fontSize: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heading: {
         type: StringConstructor;
@@ -65,8 +65,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    headerActions: unknown[];
     disabled: boolean;
+    headerActions: unknown[];
     heading: string;
     actionButtonListOverflowCount: number;
     expandable: boolean;

package/src/components/style/VcsImageSelector.vue

@@ -45,13 +45,13 @@
       <div v-if="selectedType === ImageType.ICON">
         <v-row no-gutters>
           <v-col>
-            <VcsLabel html-for="style-icon-opacity">
+            <VcsLabel :html-for="`${cid}-style-icon-opacity`">
               {{ $t('components.style.opacity') }}
             </VcsLabel>
           </v-col>
           <v-col>
             <VcsSlider
-              id="style-icon-opacity"
+              :id="`${cid}-style-icon-opacity`"
               v-model="localValue.opacity"
               step="0.1"
               type="number"
@@ -69,11 +69,13 @@
           :key="input.key"
         >
           <v-col>
-            <VcsLabel>{{ $st(`components.style.${input.key}`) }}</VcsLabel>
+            <VcsLabel :html-for="`${cid}-${input.key}`">{{
+              $st(`components.style.${input.key}`)
+            }}</VcsLabel>
           </v-col>
           <v-col cols="3">
             <VcsTextField
-              :id="`style-shape-${input.key}`"
+              :id="`${cid}-${input.key}`"
               :hide-spin-buttons="true"
               type="number"
               :unit="input.unit || ''"
@@ -102,11 +104,13 @@
         v-if="extendedShapeSettings || selectedType === ImageType.ICON"
       >
         <v-col>
-          <VcsLabel>{{ $t('components.style.scale') }}</VcsLabel>
+          <VcsLabel :html-for="`${cid}-style-shape-scale`">{{
+            $t('components.style.scale')
+          }}</VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            id="style-shape-scale"
+            :id="`${cid}-style-shape-scale`"
             :hide-spin-buttons="true"
             type="number"
             v-model.number="selectedScale"
@@ -148,6 +152,7 @@
   import { toContext } from 'ol/render.js';
   import { Point } from 'ol/geom.js';
   import { getImageStyleFromOptions } from '@vcmap/core';
+  import { useComponentId } from '../composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
@@ -907,6 +912,8 @@
         );
       });
 
+      const cid = useComponentId();
+
       return {
         ImageType,
         localValue,
@@ -919,6 +926,7 @@
         between,
         currentItems,
         selectedImageTypeTab,
+        cid,
       };
     },
   };

package/src/components/style/VcsImageSelector.vue.d.ts

@@ -98,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{
         idx: number;
     }[]>;
     selectedImageTypeTab: import("vue").Ref<number>;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/style/VcsStrokeSelector.vue

@@ -3,13 +3,13 @@
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>
-          <VcsLabel html-for="draw-stroke-width">
+          <VcsLabel :html-for="`${cid}-draw-stroke-width`">
             {{ $t('components.style.lineWidth') }}
           </VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            id="draw-stroke-width"
+            :id="`${cid}-draw-stroke-width`"
             v-model.number="width"
             :hide-spin-buttons="true"
             type="number"
@@ -38,6 +38,7 @@
     VRow,
     VCol,
   } from 'vuetify/components';
+  import { useComponentId } from '../composables.js';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import { useColorObject } from './composables.js';
@@ -66,6 +67,7 @@
     },
     setup(props, { emit }) {
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const cid = useComponentId();
       return {
         rgbaObject: useColorObject(() => localValue.value?.color),
         width: computed({
@@ -81,6 +83,7 @@
         updateColor(rgba) {
           localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a];
         },
+        cid,
       };
     },
   };

package/src/components/style/VcsStrokeSelector.vue.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     width: import("vue").WritableComputedRef<any>;
     updateColor(rgba: any): void;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/style/VcsTextMenu.vue

@@ -6,7 +6,7 @@
   >
     <template #preview>
       <div v-if="modelValue" class="d-flex justify-center align-center">
-        <span id="text-preview">T</span>
+        <span class="vcs-text-menu-preview">T</span>
       </div>
     </template>
     <template #content>
@@ -68,7 +68,7 @@
 </script>
 
 <style>
-  #text-preview {
+  .vcs-text-menu-preview {
     font: v-bind(fontStyle) !important;
     font-size: 20px !important;
     -webkit-text-stroke-color: v-bind(strokeColor);

package/src/components/tables/VcsDataTable.vue

@@ -38,12 +38,8 @@
       v-model:items-per-page="itemsPerPageRef"
       @update:options="(o) => $emit('update:items', { ...o, search })"
     >
-      <template v-for="slot of Object.keys($slots)" #[slot]="scope">
-        <slot
-          v-if="!['prepend', 'default', 'append'].includes(slot)"
-          :name="slot"
-          v-bind="scope"
-        />
+      <template v-for="slot of forwardSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope ?? {}" />
       </template>
       <template
         #header.data-table-select="{ allSelected, selectAll, someSelected }"
@@ -137,6 +133,7 @@
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import { useForwardSlots } from '../composables.js';
 
   /**
    * @typedef {Object} UpdateItemsEvent
@@ -220,7 +217,7 @@
         default: 'isSelectable',
       },
     },
-    setup(props, { attrs, emit }) {
+    setup(props, { attrs, emit, slots }) {
       const vm = getCurrentInstance().proxy;
       const hovering = ref(null);
       /**
@@ -366,6 +363,12 @@
           props.serverItemsLength > itemsPerPageRef.value,
       );
 
+      const forwardSlots = useForwardSlots(slots, [
+        'prepend',
+        'default',
+        'append',
+      ]);
+
       return {
         hovering,
         search,
@@ -393,6 +396,7 @@
         handleSearch,
         translatedHeaders,
         showFooter,
+        forwardSlots,
       };
     },
   };
@@ -446,10 +450,10 @@
   }
 
   .v-table--density-compact {
-    --v-table-header-height: var(--v-vcs-item-height);
-    --v-table-row-height: var(--v-vcs-item-height);
+    --v-table-header-height: calc(var(--v-vcs-font-size) * 2 + 6px);
+    --v-table-row-height: calc(var(--v-vcs-font-size) * 2 + 6px);
     & :deep(.v-selection-control--density-default) {
-      --v-selection-control-size: var(--v-vcs-item-height);
+      --v-selection-control-size: calc(var(--v-vcs-font-size) * 2 + 6px);
     }
   }
 

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

@@ -54,6 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     handleSearch: () => void;
     translatedHeaders: ComputedRef<Object[]>;
     showFooter: import("vue").ComputedRef<boolean>;
+    forwardSlots: import("vue").ComputedRef<string[]>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     headers: {
         type: ArrayConstructor;

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

@@ -99,18 +99,28 @@
   /**
    * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
    * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
-   * @param {number} nFeatures The number of the features.
+   * @param {import("ol").Feature[]} features The features currently being edited.
+   * @param {import("@vcmap/core").VectorLayer} layer The number of the features.
+   * @param {boolean} is3D if the current map is 3D
    * @returns {Array<TransformationMode>} The allowed transformation modes.
    */
   export function getAllowedEditorTransformationModes(
     geometryTypes,
-    nFeatures,
+    features,
+    layer,
+    is3D = false,
   ) {
+    const nFeatures = features.length;
     const isSinglePoint =
-      nFeatures === 1 && geometryTypes.has(GeometryType.Point);
+      nFeatures === 1 &&
+      geometryTypes.has(GeometryType.Point) &&
+      (!is3D || layer.vectorProperties.renderAs(features[0]) === 'geometry');
+
     const isSingleCircle =
       nFeatures === 1 && geometryTypes.has(GeometryType.Circle);
+
     const isBboxSelected = geometryTypes.has(GeometryType.BBox);
+
     return [
       TransformationMode.TRANSLATE,
       ...(isSinglePoint || isSingleCircle || isBboxSelected
@@ -194,36 +204,7 @@
        * Sets the changed vector property options on the features. Also handles side effects.
        * @param {import("@vcmap/core").VectorPropertiesOptions} update New property values from user input.
        */
-      async function updateFeatureProperties(update) {
-        const extrusionLikePropertyKeys = [
-          'extrudedHeight',
-          'skirt',
-          'storeysAboveGround',
-          'storeysBelowGround',
-          'storeyHeightsAboveGround',
-          'storeyHeightsBelowGround',
-        ];
-        const setsExtrusionLikePropertyKeys =
-          !!extrusionLikePropertyKeys.filter(
-            (key) => Object.keys(update).includes(key) && !!update[key],
-          ).length;
-        if (
-          setsExtrusionLikePropertyKeys &&
-          featureProperties.value.altitudeMode !== 'absolute'
-        ) {
-          update.altitudeMode = 'absolute';
-        } else if (update.altitudeMode === 'clampToGround') {
-          extrusionLikePropertyKeys
-            .filter((key) => !!featureProperties.value[key])
-            .forEach((key) => {
-              update[key] = 0;
-            });
-        }
-        // when in create mode and changing altitude mode, this is triggered, but currentFeatures is empty array.
-        if (update.altitudeMode === 'absolute' && features?.length) {
-          await editorManager.placeCurrentFeaturesOnTerrain();
-        }
-
+      function updateFeatureProperties(update) {
         layer.value.vectorProperties.setValuesForFeatures(
           update,
           features.value,
@@ -297,7 +278,9 @@
       function getAllowedModifyActions() {
         const allowedModes = getAllowedEditorTransformationModes(
           currentGeometryTypes.value.types,
-          currentGeometryTypes.value.nFeatures,
+          features.value,
+          layer.value,
+          is3D.value,
         );
 
         const allowedActions = allowedModes.map((mode) => {

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

@@ -1,10 +1,12 @@
 /**
  * Returns the allowed transformation modes for the provided geometry types and number of features. Rotate is e.g. not allowed for a single point but for multiple points.
  * @param {Set<GeometryType>} geometryTypes A set with all geometry types of the features.
- * @param {number} nFeatures The number of the features.
+ * @param {import("ol").Feature[]} features The features currently being edited.
+ * @param {import("@vcmap/core").VectorLayer} layer The number of the features.
+ * @param {boolean} is3D if the current map is 3D
  * @returns {Array<TransformationMode>} The allowed transformation modes.
  */
-export function getAllowedEditorTransformationModes(geometryTypes: Set<GeometryType>, nFeatures: number): Array<TransformationMode>;
+export function getAllowedEditorTransformationModes(geometryTypes: Set<GeometryType>, features: import("ol").Feature[], layer: import("@vcmap/core").VectorLayer, is3D?: boolean): Array<TransformationMode>;
 export namespace EditorTransformationIcons {
     let translate: string;
     let rotate: string;
@@ -41,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     availableModifyActions: import("vue").ShallowRef<never[]>;
     availableVectorProperties: import("vue").ShallowRef<never[]>;
     is3D: import("vue").Ref<boolean>;
-    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => Promise<void>;
+    updateFeatureProperties: (update: import("@vcmap/core").VectorPropertiesOptions) => void;
     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: {