@vcmap/module-selector 2.0.6 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/module-selector",
-  "version": "2.0.6",
+  "version": "4.0.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -38,35 +38,33 @@
     ".": "dist/index.js",
     "./dist": "./dist/index.js"
   },
-  "eslintIgnore": [
-    "node_modules",
-    "dist",
-    "plugin-assets"
-  ],
   "prettier": "@vcsuite/eslint-config/prettier.js",
   "peerDependencies": {
-    "@vcmap/core": "^6.0.6",
-    "@vcmap/ui": "^6.0.10",
+    "@vcmap/core": "^6.1.11",
+    "@vcmap/ui": "^6.1.14",
     "vue": "~3.4.38",
-    "vuetify": "^3.7.3"
+    "vuetify": "~3.7.14"
+  },
+  "overrides": {
+    "esbuild": "^0.25.0"
   },
   "devDependencies": {
-    "@vcmap/plugin-cli": "^4.0.1",
-    "@vcsuite/eslint-config": "^3.0.8",
-    "@vitest/coverage-v8": "^2.1.4",
+    "@vcmap/plugin-cli": "^4.1.2",
+    "@vcsuite/eslint-config": "^4.0.0",
+    "@vitest/coverage-v8": "^2.1.9",
     "jest-canvas-mock": "^2.5.2",
     "jsdom": "^24.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.4",
-    "vue-tsc": "^2.1.10"
+    "typescript": "^5.9.2",
+    "vitest": "^2.1.9",
+    "vue-tsc": "^2.2.12"
   },
-  "mapVersion": "^6.0",
   "dependencies": {
     "@vcsuite/logger": "^1.0.1",
     "@vcsuite/parsers": "^2.0.0",
     "@vcsuite/publisher-sdk": "^5.2.12",
     "fast-deep-equal": "^3.1.3",
     "node-fetch": "^2.7.0"
-  }
+  },
+  "mapVersion": "^6.1"
 }

package/src/ModuleSelector.vue

@@ -3,16 +3,16 @@
     <v-container>
       <v-row class="justify-center align-center" no-gutters>
         <v-col
+          v-if="basisModule && !nestedCards.length"
           cols="auto"
           class="pa-2"
-          v-if="basisModule && !nestedCards.length"
         >
           <v-card class="pa-3 fixed-card selected-card" variant="outlined">
             <v-tooltip :max-width="300">
               <template #activator="{ props }">
                 <v-icon
                   v-if="basisModule.description"
-                  class="top-right-icon"
+                  class="top-left-icon"
                   v-bind="props"
                   >{{ '$vcsInfo' }}
                 </v-icon>
@@ -30,10 +30,10 @@
         </v-col>
         <template v-if="!nestedCards.length">
           <v-col
+            v-for="(module, index) in modules"
+            :key="index"
             cols="auto"
             class="pa-2"
-            :key="index"
-            v-for="(module, index) in modules"
           >
             <v-card
               class="fixed-card hover-card"
@@ -48,7 +48,10 @@
                 <template #activator="{ props }">
                   <v-icon
                     v-if="module.description"
-                    class="top-right-icon"
+                    class="top-left-icon"
+                    :class="{
+                      selected: plugin.selectedMainModuleIndex.value === index,
+                    }"
                     v-bind="props"
                     >{{ '$vcsInfo' }}
                   </v-icon>
@@ -128,7 +131,7 @@
                 <template #activator="{ props }">
                   <v-icon
                     v-if="card.description"
-                    class="top-right-icon"
+                    class="top-left-icon"
                     v-bind="props"
                     >{{ '$vcsInfo' }}
                   </v-icon>
@@ -148,16 +151,13 @@
         <VcsFormButton
           variant="filled"
           class="ma-5"
+          :disabled="isButtonDisabled"
           @click="
-            startApplication(
+            plugin.startApplication(
               plugin.selectedMainModuleIndex.value,
               plugin.selectedNestedModuleIndex.value,
-              app,
-              modules,
-              basisModule,
             )
           "
-          :disabled="isButtonDisabled"
         >
           {{ $st('moduleSelector.startButton') }}
         </VcsFormButton>
@@ -177,16 +177,20 @@
     VCardTitle,
     VTooltip,
   } from 'vuetify/components';
-  import { VcsFormButton, VcsUiApp } from '@vcmap/ui';
-  import { computed, defineComponent, inject, PropType } from 'vue';
+  import type { VcsUiApp } from '@vcmap/ui';
+  import { VcsFormButton } from '@vcmap/ui';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, inject } from 'vue';
   import { name } from '../package.json';
-  import { BasisModule, ModuleSelectorPlugin, ModuleType } from './index.js';
-  import type { Module } from './index.ts';
-  import { startApplication } from './moduleHelper';
+  import type {
+    BasisModule,
+    ModuleSelectorPlugin,
+    ModuleType,
+    Module,
+  } from './index.js';
 
   export default defineComponent({
     name: 'ModuleSelector',
-    methods: { startApplication },
     components: {
       VSheet,
       VContainer,
@@ -299,7 +303,7 @@
     color: rgb(var(--v-theme-on-primary));
   }
 
-  .top-right-icon {
+  .top-left-icon {
     position: absolute;
     top: 8px;
     left: 8px;
@@ -307,6 +311,10 @@
     cursor: pointer;
     color: rgb(var(--v-theme-on-surface));
   }
+  .top-left-icon.selected {
+    color: rgb(var(--v-theme-on-primary));
+  }
+
   .groupCard {
     width: 146px;
     background-color: rgb(var(--v-theme-surface));

package/src/ModuleSelectorEdit.vue

@@ -12,9 +12,9 @@
             <v-col cols="6">
               <VcsSelect
                 id="layerName"
+                v-model="localModuleOptions.moduleName"
                 :items="moduleLocal"
                 placeholder="layer"
-                v-model="localModuleOptions.moduleName"
               />
             </v-col>
           </v-row>
@@ -28,13 +28,13 @@
         <VcsFormButton
           class="justify-end relativePosition"
           :disabled="!isFormValid"
+          variant="filled"
           @click="
             () => {
               $emit('update:modelValue', localModuleOptions);
               $emit('close');
             }
           "
-          variant="filled"
         >
           {{ $st('components.apply') }}
         </VcsFormButton>
@@ -58,7 +58,8 @@
     VCol,
     VRow,
   } from 'vuetify/components';
-  import { defineComponent, PropType, ref } from 'vue';
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
 
   interface ModuleOptions {
     moduleName: string | undefined;
@@ -80,22 +81,16 @@
       VcsFormSection,
     },
     props: {
-      modelValue: {
-        type: Object as PropType<ModuleOptions>,
-        required: true,
-      },
+      modelValue: { type: Object as PropType<ModuleOptions>, required: true },
     },
+    emits: ['update:modelValue', 'close'],
     setup(props) {
       const localModuleOptions = ref(structuredClone(props.modelValue));
       const isFormValid = ref(false);
 
       const moduleLocal = ref();
 
-      return {
-        localModuleOptions,
-        moduleLocal,
-        isFormValid,
-      };
+      return { localModuleOptions, moduleLocal, isFormValid };
     },
   });
 </script>

package/src/config/CloudModuleSelector.vue

@@ -6,6 +6,7 @@
         heading="moduleSelector.configEditor.moduleSettings"
       >
         <VcsDataTable
+          v-model="selected"
           base-component="VDataTableServer"
           :loading="loading"
           :items="items"
@@ -19,7 +20,6 @@
           return-object
           show-select
           item-value="_id"
-          v-model="selected"
           @update:items="getItems"
         >
           <!-- eslint-disable-next-line -->
@@ -45,7 +45,7 @@
         v-else
         heading="moduleSelector.configEditor.moduleSettings"
       >
-        <v-form v-model="isFValid" ref="form">
+        <v-form ref="form" v-model="isFValid">
           <v-container class="px-2 pt-0 pb-2">
             <v-row no-gutters class="px-2">
               <v-col cols="2">
@@ -56,8 +56,8 @@
               <v-col cols="4">
                 <VcsTextField
                   id="moduleName"
-                  placeholder="Module Name"
                   v-model="selectedItem.title"
+                  placeholder="Module Name"
                   :rules="[requiredRule]"
                 />
               </v-col>
@@ -71,8 +71,8 @@
               <v-col cols="4">
                 <VcsTextField
                   id="moduleIcon"
-                  placeholder="Icon Name"
                   v-model="selectedItem.icon"
+                  placeholder="Icon Name"
                   :rules="[requiredRule]"
                 />
               </v-col>
@@ -98,9 +98,9 @@
           <VcsFormButton
             variant="filled"
             :disabled="selected[0] === undefined"
-            @click="addSelected"
             tooltip="appConfigurator.dialogs.addTooltip"
             tooltip-position="bottom"
+            @click="addSelected"
           >
             {{ $t('moduleSelector.configEditor.moduleCloudPicker.continue') }}
           </VcsFormButton>
@@ -138,18 +138,17 @@
 </template>
 
 <script lang="ts">
+  import type { UpdateItemsEvent, VcsUiApp, VcsPlugin } from '@vcmap/ui';
   import {
-    UpdateItemsEvent,
     VcsDataTable,
     VcsFormButton,
-    VcsUiApp,
     VcsLabel,
     VcsTextField,
     VcsFormSection,
-    VcsPlugin,
     VcsTextArea,
   } from '@vcmap/ui';
-  import { computed, defineComponent, inject, PropType, ref } from 'vue';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, inject, ref } from 'vue';
   import {
     VIcon,
     VTooltip,
@@ -163,7 +162,8 @@
     getProjectModules,
     type GetProjectModulesResponse,
   } from '@vcsuite/publisher-sdk';
-  import { VcsModule, VcsModuleConfig } from '@vcmap/core';
+  import type { VcsModuleConfig } from '@vcmap/core';
+  import { VcsModule } from '@vcmap/core';
   import { getLogger } from '@vcsuite/logger';
   import { name as pluginName } from '../../package.json';
   import { type ModuleSelectorPlugin } from '../index.js';
@@ -276,6 +276,7 @@
         required: true,
       },
     },
+    emits: ['submit', 'close'],
     setup(props, { emit }) {
       const app = inject<VcsUiApp>('vcsApp')!;
       const plugin = app.plugins.getByKey(pluginName)! as ModuleSelectorPlugin;
@@ -331,7 +332,7 @@
           !!selectedItem.value?.title && !!selectedItem.value?.icon;
       };
 
-      const TypeIcons = {
+      const typeIcons = {
         standalone: '$vcsGlobeNature',
         extension: '$vcsShapes',
       };
@@ -350,6 +351,7 @@
           })
             .then((data) => {
               items.value = data.items.map((i) => {
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 const dataTableEntry = {
                   name: i.name,
                   description: i.description,
@@ -375,10 +377,10 @@
               totalItems.value = data.totalCount;
               totalPages.value = data.totalPages;
             })
-            .catch((err) => {
+            .catch((e: unknown) => {
               getLogger('CloudModuleSelector.vue').error(
                 'Failed to load project modules.',
-                err,
+                String(e),
               );
             })
             .finally(() => {
@@ -423,8 +425,8 @@
         totalPages,
         headers,
         selected,
-        typeIcon(type: keyof typeof TypeIcons): string {
-          return TypeIcons[type];
+        typeIcon(type: keyof typeof typeIcons): string {
+          return typeIcons[type];
         },
         formatDate,
         getItems,

package/src/config/ModuleEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <VcsFormSection heading="moduleSelector.configEditor.moduleSettings">
-      <v-form v-model="isFormValid" ref="form">
+      <v-form ref="form" v-model="isFormValid">
         <v-container class="px-2 pt-0 pb-2">
           <v-row no-gutters>
             <v-col cols="6">
@@ -12,8 +12,8 @@
             <v-col cols="6">
               <VcsTextField
                 id="moduleName"
-                placeholder="Module Name"
                 v-model="localModuleOptions.title"
+                placeholder="Module Name"
                 :rules="[requiredRule]"
               />
             </v-col>
@@ -27,8 +27,8 @@
             <v-col cols="6">
               <VcsTextField
                 id="moduleIcon"
-                placeholder="Icon Name"
                 v-model="localModuleOptions.icon"
+                placeholder="Icon Name"
                 :rules="[requiredRule]"
               />
             </v-col>
@@ -42,8 +42,8 @@
             <v-col cols="6">
               <VcsTextField
                 id="moduleUrl"
-                placeholder="URL"
                 v-model="localModuleOptions.moduleUrl"
+                placeholder="URL"
                 :rules="[requiredRule]"
               />
             </v-col>
@@ -67,12 +67,12 @@
       <div class="d-flex gc-2 w-100 justify-end pa-2">
         <VcsFormButton
           :disabled="!isFormValid"
+          variant="filled"
           @click="
             () => {
               $emit('submit', localModuleOptions);
             }
           "
-          variant="filled"
         >
           {{ $st('components.apply') }}
         </VcsFormButton>
@@ -99,7 +99,8 @@
     VCol,
     VRow,
   } from 'vuetify/components';
-  import { defineComponent, PropType, ref } from 'vue';
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
     name: 'ModuleEditor',
@@ -128,6 +129,7 @@
         required: true,
       },
     },
+    emits: ['submit', 'close'],
     setup(props) {
       const localModuleOptions = ref(props.modelValue); // structuredClone
       const isFormValid = ref(false);
@@ -139,12 +141,7 @@
       const requiredRule = (value: string): string | boolean =>
         !!value || 'moduleSelector.configEditor.editorError';
 
-      return {
-        localModuleOptions,
-        isFormValid,
-        validateForm,
-        requiredRule,
-      };
+      return { localModuleOptions, isFormValid, validateForm, requiredRule };
     },
   });
 </script>

package/src/config/ModuleSelectorConfigEditor.vue

@@ -1,8 +1,8 @@
 <template>
   <AbstractConfigEditor
-    @submit="apply"
     v-if="localConfig"
     v-bind="{ ...$attrs, ...$props }"
+    @submit="apply"
   >
     <v-container class="py-0 px-0">
       <VcsFormSection heading="moduleSelector.configEditor.general">
@@ -16,8 +16,8 @@
             <v-col>
               <VcsTextField
                 id="moduleselector-window-title"
-                :placeholder="$st('moduleSelector.title')"
                 v-model="localConfig.windowTitle"
+                :placeholder="$st('moduleSelector.title')"
               />
             </v-col>
           </v-row>
@@ -60,6 +60,7 @@
             <v-col>
               <VcsTextField
                 id="basisModuleName"
+                v-model="basisModule.title"
                 placeholder="Base Module"
                 :rules="[
                   basisModuleExists &&
@@ -67,7 +68,6 @@
                     ? () => 'moduleSelector.configEditor.error'
                     : () => true,
                 ]"
-                v-model="basisModule.title"
               />
             </v-col>
           </v-row>
@@ -80,6 +80,7 @@
             <v-col>
               <VcsTextField
                 id="basisModuleIcon"
+                v-model="basisModule.icon"
                 placeholder="mdi-home-city"
                 :rules="[
                   basisModuleExists &&
@@ -87,7 +88,6 @@
                     ? () => 'moduleSelector.configEditor.error'
                     : () => true,
                 ]"
-                v-model="basisModule.icon"
               />
             </v-col>
           </v-row>
@@ -124,8 +124,8 @@
                 <v-col>
                   <VcsTextField
                     id="groupModuleName"
-                    placeholder="Module Name"
                     v-model="currentGroup.title"
+                    placeholder="Module Name"
                     :rules="[isRequired]"
                   />
                 </v-col>
@@ -139,8 +139,8 @@
                 <v-col>
                   <VcsTextField
                     id="groupModuleIcon"
-                    placeholder="Module Icon"
                     v-model="currentGroup.icon"
+                    placeholder="Module Icon"
                     :rules="[isRequired]"
                   />
                 </v-col>
@@ -154,8 +154,8 @@
                 <v-col>
                   <VcsTextArea
                     id="groupModuleDescription"
-                    placeholder=""
                     v-model="currentGroup.description"
+                    placeholder=""
                   />
                 </v-col>
               </v-row>
@@ -247,28 +247,19 @@
 </template>
 
 <script lang="ts">
+  import type { VcsAction, VcsListItem } from '@vcmap/ui';
   import {
     AbstractConfigEditor,
-    VcsAction,
     VcsCheckbox,
     VcsFormSection,
     VcsLabel,
     VcsList,
-    VcsListItem,
     VcsTextField,
     VcsTextArea,
     VcsFormButton,
   } from '@vcmap/ui';
-  import {
-    computed,
-    defineComponent,
-    PropType,
-    reactive,
-    Ref,
-    ref,
-    toRaw,
-    watch,
-  } from 'vue';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, reactive, ref, toRaw, watch } from 'vue';
   import {
     VCol,
     VContainer,
@@ -278,7 +269,7 @@
     VForm,
   } from 'vuetify/components';
   import ModuleEditor from './ModuleEditor.vue';
-  import { Module, ModuleSelectorConfig, ModuleType } from '../index';
+  import type { Module, ModuleSelectorConfig, ModuleType } from '../index';
   import getDefaultOptions from '../defaultOptions.js';
   import WindowPositionSettings from './WindowPositionSettings.vue';
   import CloudModuleSelector from './CloudModuleSelector.vue';
@@ -334,18 +325,20 @@
     },
     setup(props) {
       const level = ref<number>(0);
-      const localConfig = ref<ModuleSelectorConfig | undefined>(undefined);
-      const listItemArray: Ref<VcsListItemWithLabel[]> = ref([]);
-      const currentGroup: Ref<VcsListItemWithLabel | undefined> =
-        ref(undefined);
-      const editingItem: Ref<ModuleItem> = ref({
+      const localConfig = ref<ModuleSelectorConfig>({
+        ...getDefaultOptions(),
+        ...props.getConfig(),
+      });
+      const listItemArray = ref<VcsListItemWithLabel[]>([]);
+      const currentGroup = ref<VcsListItemWithLabel>();
+      const editingItem = ref<ModuleItem>({
         id: '',
         title: '',
         icon: '',
         moduleUrl: '',
         description: '',
       });
-      const selectCloudItem: Ref<ModuleItem> = ref({
+      const selectCloudItem = ref<ModuleItem>({
         id: '',
         title: '',
         icon: '',
@@ -361,15 +354,10 @@
         cards: [],
       };
 
-      const selectCloudItemDialogVisible: Ref<boolean> = ref(false);
-      const editingItemDialogVisible: Ref<boolean> = ref(false);
-      const groupItemDialogVisible: Ref<boolean> = ref(false);
-      const listItems: Ref<VcsListItemWithLabel[] | undefined> = ref(undefined);
-
-      localConfig.value = {
-        ...getDefaultOptions(),
-        ...props.getConfig(),
-      } as ModuleSelectorConfig;
+      const selectCloudItemDialogVisible = ref<boolean>(false);
+      const editingItemDialogVisible = ref<boolean>(false);
+      const groupItemDialogVisible = ref<boolean>(false);
+      const listItems = ref<VcsListItemWithLabel[] | undefined>(undefined);
 
       const basisModule = ref();
 
@@ -396,6 +384,7 @@
       ): Module<ModuleType> {
         if (item.type === 'url') {
           const { actions, id, name, ...configItem } = item;
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           return {
             ...configItem,
             moduleUrl: item.moduleUrl || '',
@@ -404,11 +393,11 @@
           const updatedCards =
             item.cards?.map((card) => {
               const { actions, id, name, ...configItem } = card;
-              return {
-                ...configItem,
-              } as Module<'url'>;
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              return { ...configItem } as Module<'url'>;
             }) || [];
           const { actions, id, name, ...configItem } = item;
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           return {
             ...configItem,
             ...(updatedCards.length ? { cards: updatedCards } : {}),
@@ -639,17 +628,12 @@
                 (i) => i.id === editingItem.value?.id,
               );
               if (item) {
-                Object.assign(item, {
-                  ...editingItem.value,
-                });
+                Object.assign(item, { ...editingItem.value });
               }
             } else {
               listItemArray.value.push(
                 createListItem(
-                  {
-                    ...editingItem.value,
-                    type: 'url',
-                  },
+                  { ...editingItem.value, type: 'url' },
                   listItemArray.value.length,
                 ),
               );
@@ -660,9 +644,7 @@
             (i) => i.id === editingItem.value.id,
           );
           if (item) {
-            Object.assign(item, {
-              ...editingItem.value,
-            });
+            Object.assign(item, { ...editingItem.value });
           }
 
           let groupId;
@@ -677,10 +659,7 @@
         } else {
           currentGroup.value.cards!.push(
             createListItem(
-              {
-                ...editingItem.value,
-                type: 'url',
-              },
+              { ...editingItem.value, type: 'url' },
               currentGroup.value.cards!.length,
             ),
           );
@@ -725,10 +704,7 @@
         } else {
           currentGroup.value.cards!.push(
             createListItem(
-              {
-                ...selectCloudItem.value,
-                type: 'url',
-              },
+              { ...selectCloudItem.value, type: 'url' },
               currentGroup.value.cards!.length,
             ),
           );