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

package/src/components/lists/VcsTreeview.vue

@@ -18,14 +18,40 @@
       v-bind="{ ...$props, ...$attrs }"
       :search="localSearchValue"
     >
-      <template #item="{ props: item }">
-        <VcsTreeviewLeaf
-          @click.stop="item.clicked && !item.disabled && item.clicked($event)"
-          :item="item"
-        />
+      <template #title="scope">
+        <slot name="title" v-bind="scope ?? {}">
+          <VcsTreeviewTitle :item="scope.item"></VcsTreeviewTitle>
+        </slot>
       </template>
-      <template #title="{ item }">
-        {{ $st(item.title || item.name) }}
+      <template v-for="slot of forwardSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope ?? {}" />
+      </template>
+      <template #prepend="scope">
+        <slot name="prepend" v-bind="scope ?? {}">
+          <template v-if="scope.item?.icon">
+            <v-icon
+              v-if="typeof scope.item?.icon === 'string'"
+              :size="iconSize"
+            >
+              {{ scope.item.icon }}
+            </v-icon>
+            <ImageElementInjector :element="scope.item.icon" v-else />
+          </template>
+        </slot>
+      </template>
+      <template #append="scope">
+        <slot name="append" v-bind="scope ?? {}">
+          <VcsActionButtonList
+            v-if="scope.item.actions?.length > 0"
+            :actions="scope.item.actions"
+            :overflow-count="3"
+            :disabled="scope.item.disabled"
+            right
+            tooltip-position="right"
+            block-overflow
+            class="col-4 pa-0 d-flex align-center"
+          />
+        </slot>
       </template>
     </v-treeview>
   </div>
@@ -35,7 +61,7 @@
     // Root Level Entries should be 40px high
     > .v-list-item,
     > .v-list-group > .v-list-item {
-      min-height: calc(var(--v-vcs-item-height) + 8px) !important;
+      min-height: calc(var(--v-vcs-font-size) * 2 + 14px) !important;
       padding-left: 6px;
     }
     // Border around root nodes with children included
@@ -88,10 +114,15 @@
 
 <script>
   import { getCurrentInstance } from 'vue';
+  import { VIcon } from 'vuetify/components';
   import { VTreeview } from 'vuetify/labs/VTreeview';
   import { useProxiedAtomicModel } from '../modelHelper.js';
+  import { useForwardSlots } from '../composables.js';
   import VcsTreeviewSearchbar from './VcsTreeviewSearchbar.vue';
-  import VcsTreeviewLeaf from './VcsTreeviewLeaf.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsTreeviewTitle from './VcsTreeviewTitle.vue';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description extends API of https://vuetifyjs.com/en/api/v-treeview/
@@ -104,7 +135,10 @@
   export default {
     name: 'VcsTreeview',
     components: {
-      VcsTreeviewLeaf,
+      VcsTreeviewTitle,
+      VIcon,
+      ImageElementInjector,
+      VcsActionButtonList,
       VcsTreeviewSearchbar,
       VTreeview,
     },
@@ -123,7 +157,7 @@
       },
     },
     emits: ['update:search'],
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
       const localSearchValue = useProxiedAtomicModel(props, 'search', emit);
 
       // TODO properly type the tree view item interface & export in index.d.ts
@@ -145,9 +179,17 @@
           .indexOf(q.toLocaleLowerCase());
       };
 
+      const forwardSlots = useForwardSlots(slots, [
+        'append',
+        'title',
+        'prepend',
+      ]);
+      const iconSize = useIconSize();
       return {
+        iconSize,
         localSearchValue,
         handleFilter,
+        forwardSlots,
       };
     },
   };

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -12,8 +12,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
+    iconSize: import("vue").ComputedRef<number>;
     localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
+    forwardSlots: import("vue").ComputedRef<string[]>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     search: {
         type: StringConstructor;

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -3,7 +3,9 @@
     class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
   >
     <slot name="prepend">
-      <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
+      <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">
+        $vcsSearch
+      </v-icon>
     </slot>
 
     <slot v-bind="{ ...$props, attrs: $attrs }">
@@ -16,7 +18,7 @@
     </slot>
 
     <slot name="append" :has-filter="hasFilter">
-      <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
+      <v-icon v-if="hasFilter" class="ml-2" :size="iconSize">$vcsFilter</v-icon>
     </slot>
   </div>
 </template>
@@ -48,7 +50,9 @@
         > .v-field__field
         > .v-field__input
     ) {
-    --v-input-control-height: calc(var(--v-vcs-item-height) - 20px) !important;
+    --v-input-control-height: calc(
+      var(--v-vcs-font-size) * 2 - 14px
+    ) !important;
     min-height: var(--v-input-control-height);
   }
 
@@ -74,6 +78,7 @@
 <script>
   import { VIcon } from 'vuetify/components';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
@@ -100,5 +105,11 @@
         default: false,
       },
     },
+    setup() {
+      const iconSize = useIconSize();
+      return {
+        iconSize,
+      };
+    },
   };
 </script>

package/src/components/lists/VcsTreeviewSearchbar.vue.d.ts

@@ -7,7 +7,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    iconSize: import("vue").ComputedRef<number>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeholder: {
         type: StringConstructor;
         default: string;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -0,0 +1,36 @@
+<script setup>
+  import { computed, ref } from 'vue';
+  import { VTooltip } from 'vuetify/components';
+  import { createEllipseTooltip } from '../composables.js';
+
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: undefined,
+    },
+  });
+
+  const titleParent = ref();
+
+  const tooltip = createEllipseTooltip(
+    computed(() => titleParent.value),
+    computed(() => props.item.tooltip),
+    computed(() => props.item.title || props.item.name),
+  );
+</script>
+<style lang="scss" scoped>
+  .title-parent {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
+<template>
+  <div class="title-parent pr-2" ref="titleParent">
+    <span>
+      {{ $st(item.title || item.name) }}
+    </span>
+    <v-tooltip v-if="tooltip" activator="parent">
+      {{ $st(tooltip) }}
+    </v-tooltip>
+  </div>
+</template>

package/src/components/modelHelper.d.ts

@@ -4,25 +4,27 @@
  * getter returns the internal value
  * setter updates internal value and emits the update event
  * simplified based on https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/proxiedModel.ts
- * @param {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
  * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
  * @template T
+ * @template  {string} [P=string]
  */
-export function useProxiedAtomicModel<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+export function useProxiedAtomicModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
 /**
  * Can only be used in setup of Vue components!
  * Provides a ref model for complex properties.
  * Watches changes on the provided prop and updates the internal ref
  * Watches changes on the internal ref and emits the change, if prop has not already been updated
- * @param {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
  * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
  * @template T
+ * @template {string} [P=string]
  */
-export function useProxiedComplexModel<T>(props: Object, prop: string, emit: (event: string, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
+export function useProxiedComplexModel<T, P extends string = string>(props: { [k in P]: string extends P ? unknown : T; }, prop: P, emit: (event: string extends P ? P : `update:${P}`, value: T) => void): import("vue").Ref<import("vue").UnwrapRef<T>>;
 /**
  * Helper function that returns a modelValue for VcsCheckbox depending on the availability of a specific property within a model object
  * Getter returns true, if property is available, otherwise false.

package/src/components/modelHelper.js

@@ -8,11 +8,12 @@ import { getLogger } from '@vcsuite/logger';
  * getter returns the internal value
  * setter updates internal value and emits the update event
  * simplified based on https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/proxiedModel.ts
- * @param {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
  * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
  * @template T
+ * @template  {string} [P=string]
  */
 export function useProxiedAtomicModel(props, prop, emit) {
   const internal = ref(props[prop]);
@@ -43,11 +44,12 @@ export function useProxiedAtomicModel(props, prop, emit) {
  * Provides a ref model for complex properties.
  * Watches changes on the provided prop and updates the internal ref
  * Watches changes on the internal ref and emits the change, if prop has not already been updated
- * @param {Object} props
- * @param {string} prop
- * @param {(event: string, value: T) => void} emit
+ * @param {{ [k in P]: string extends P ? unknown : T }} props
+ * @param {P} prop
+ * @param {(event: string extends P ? P : `update:${P}`, value: T) => void} emit
  * @returns {import("vue").Ref<import("vue").UnwrapRef<T>>}
  * @template T
+ * @template {string} [P=string]
  */
 export function useProxiedComplexModel(props, prop, emit) {
   const internal = ref(structuredClone(toRaw(props[prop])));

package/src/components/notification/VcsHelp.vue

@@ -1,6 +1,9 @@
 <template>
-  <div v-if="show" class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4">
-    <v-container class="pa-1 vcs-help">
+  <div
+    v-if="$slots.default || text"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4"
+  >
+    <v-container class="py-1 px-2 vcs-help">
       <slot>
         <span>{{ $st(text) }}</span>
       </slot>
@@ -10,6 +13,7 @@
 <style lang="scss">
   .vcs-help {
     box-sizing: border-box;
+    padding-left: 16px;
     ol,
     ul {
       padding-left: 16px; /* Indentation for list items */
@@ -22,7 +26,6 @@
   /**
    * @description A component for displaying help.
    * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
-   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
    * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
    */
   export default {
@@ -35,10 +38,6 @@
         type: String,
         default: undefined,
       },
-      show: {
-        type: Boolean,
-        default: true,
-      },
     },
   };
 </script>

package/src/components/notification/VcsHelp.vue.d.ts

@@ -3,21 +3,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         default: undefined;
     };
-    show: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
     text: string;
-    show: boolean;
 }, {}>;
 export default _default;

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,
       };
     },
   };