@vcmap/module-selector 2.0.0-rc.2 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/module-selector",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -45,13 +45,13 @@
   ],
   "prettier": "@vcsuite/eslint-config/prettier.js",
   "peerDependencies": {
-    "@vcmap/core": "^6.0.0-rc.10",
-    "@vcmap/ui": "^6.0.0-rc.9",
+    "@vcmap/core": "^6.0.0",
+    "@vcmap/ui": "^6.0.1",
     "vue": "~3.4.38",
-    "vuetify": "^3.7.2"
+    "vuetify": "^3.7.3"
   },
   "devDependencies": {
-    "@vcmap/plugin-cli": "^4.0.0-rc.5",
+    "@vcmap/plugin-cli": "^4.0.0",
     "@vcsuite/eslint-config": "^3.0.8",
     "@vitest/coverage-v8": "^2.1.1",
     "jest-canvas-mock": "^2.5.2",
@@ -61,5 +61,10 @@
     "vitest": "^2.1.1",
     "vue-tsc": "^2.1.6"
   },
-  "mapVersion": "^6.0"
+  "mapVersion": "^6.0",
+  "dependencies": {
+    "@vcsuite/logger": "^1.0.1",
+    "@vcsuite/parsers": "^2.0.0",
+    "fast-deep-equal": "^3.1.3"
+  }
 }

package/src/ModuleSelector.vue

@@ -77,7 +77,15 @@
         <VcsFormButton
           variant="filled"
           class="ma-5"
-          @click="startApplication"
+          @click="
+            startApplication(
+              plugin.selectedMainModuleIndex.value,
+              plugin.selectedNestedModuleIndex.value,
+              app,
+              modules,
+              basisModule,
+            )
+          "
           :disabled="isButtonDisabled"
         >
           {{ $st('moduleSelector.startButton') }}
@@ -99,14 +107,14 @@
   } from 'vuetify/components';
   import { VcsFormButton, VcsUiApp } from '@vcmap/ui';
   import { computed, defineComponent, inject, PropType } from 'vue';
-  import { loadModule, unloadModule } from './moduleHelper.js';
   import { name } from '../package.json';
   import { BasisModule, ModuleSelectorPlugin, ModuleType } from './index.js';
   import type { Module } from './index.ts';
+  import { startApplication } from './moduleHelper';
 
-  export const windowIdModuleSelector = 'moduleSelector_window_id';
   export default defineComponent({
     name: 'ModuleSelector',
+    methods: { startApplication },
     components: {
       VSheet,
       VContainer,
@@ -168,29 +176,6 @@
         plugin.selectedMainModuleIndex.value = null;
       };
 
-      const startApplication = async (): Promise<void> => {
-        await unloadModule(app);
-
-        const mainModuleIndex = plugin.selectedMainModuleIndex.value;
-        const nestedModuleIndex = plugin.selectedNestedModuleIndex.value;
-
-        if (mainModuleIndex === null) return;
-
-        const mainModule = modules[mainModuleIndex!];
-        const nestedModule =
-          mainModule?.type === 'group'
-            ? mainModule.cards?.[nestedModuleIndex!]
-            : null;
-
-        if (nestedModule?.moduleUrl) {
-          await loadModule(nestedModule.moduleUrl, app);
-        } else if (mainModule?.type === 'url') {
-          await loadModule(mainModule.moduleUrl, app);
-        }
-
-        app.windowManager.remove(windowIdModuleSelector);
-      };
-
       const isButtonDisabled = computed(() => {
         if (!props.requireModuleSelection) return false;
 
@@ -212,8 +197,8 @@
         selectModule,
         selectNestedModule,
         showMainCards,
-        startApplication,
         isButtonDisabled,
+        app,
       };
     },
   });

package/src/config/ModuleEditor.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-card>
+    <VcsFormSection>
+      <v-form v-model="isFormValid" ref="form">
+        <v-container class="px-2 pt-0 pb-2">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <VcsLabel required html-for="moduleName">
+                {{ $st('moduleSelector.configEditor.moduleName') }}
+              </VcsLabel>
+            </v-col>
+            <v-col cols="6">
+              <VcsTextField
+                id="moduleName"
+                placeholder="Module Name"
+                v-model="localModuleOptions.title"
+                :rules="[requiredRule]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col cols="6">
+              <VcsLabel required html-for="moduleIcon">
+                {{ $st('moduleSelector.configEditor.moduleIcon') }}
+              </VcsLabel>
+            </v-col>
+            <v-col cols="6">
+              <VcsTextField
+                id="moduleIcon"
+                placeholder="Icon Name"
+                v-model="localModuleOptions.icon"
+                :rules="[requiredRule]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col cols="6">
+              <VcsLabel required html-for="moduleUrl">
+                {{ $st('moduleSelector.configEditor.moduleUrl') }}
+              </VcsLabel>
+            </v-col>
+            <v-col cols="6">
+              <VcsTextField
+                id="moduleUrl"
+                placeholder="URL"
+                v-model="localModuleOptions.moduleUrl"
+                :rules="[requiredRule]"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-form>
+      <v-divider />
+      <div class="d-flex gc-2 w-100 justify-end pa-2">
+        <VcsFormButton
+          :disabled="!isFormValid"
+          @click="
+            () => {
+              $emit('submit', localModuleOptions);
+            }
+          "
+          variant="filled"
+        >
+          {{ $st('components.apply') }}
+        </VcsFormButton>
+        <VcsFormButton @click="$emit('close')">
+          {{ $st('components.cancel') }}
+        </VcsFormButton>
+      </div>
+    </VcsFormSection>
+  </v-card>
+</template>
+<script lang="ts">
+  import {
+    VcsFormButton,
+    VcsFormSection,
+    VcsLabel,
+    VcsTextField,
+  } from '@vcmap/ui';
+  import {
+    VCard,
+    VDivider,
+    VContainer,
+    VForm,
+    VCol,
+    VRow,
+  } from 'vuetify/components';
+  import { defineComponent, PropType, ref } from 'vue';
+
+  export default defineComponent({
+    name: 'ModuleEditor',
+    components: {
+      VcsTextField,
+      VcsLabel,
+      VCol,
+      VRow,
+      VForm,
+      VContainer,
+      VcsFormButton,
+      VDivider,
+      VCard,
+      VcsFormSection,
+    },
+    props: {
+      modelValue: {
+        type: Object as PropType<{
+          id: string;
+          title: string;
+          icon: string;
+          moduleUrl: string;
+        }>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const localModuleOptions = ref(props.modelValue); // structuredClone
+      const isFormValid = ref(false);
+
+      const validateForm = (): void => {
+        isFormValid.value = !!localModuleOptions.value.title;
+      };
+
+      const requiredRule = (value: string): string | boolean =>
+        !!value || 'moduleSelector.configEditor.editorError';
+
+      return {
+        localModuleOptions,
+        isFormValid,
+        validateForm,
+        requiredRule,
+      };
+    },
+  });
+</script>
+
+<style></style>