npm - @vcmap/ui - Versions diffs - 5.0.0-rc.29 → 5.0.0-rc.31 - Mend

@vcmap/ui 5.0.0-rc.29 → 5.0.0-rc.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (334) hide show

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~d3054c~~.js";
1	+ export * from "./ui.50452a.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.30740e.js";
-import { default as f } from "./vue.30740e.js";
+export * from "./vue.5d696e.js";
+import { default as f } from "./vue.5d696e.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.946bd8.js → vuetify.f0a769.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.946bd8.css');import v from "./vue.30740e.js";
+} await loadCss('./assets/vuetify.f0a769.css');import v from "./vue.5d696e.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.946bd8.js";
-import { default as f } from "./vuetify.946bd8.js";
+export * from "./vuetify.f0a769.js";
+import { default as f } from "./vuetify.f0a769.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -1,46 +1,38 @@
 <!DOCTYPE html>
 <html class="vcs-ui" lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>VC Map</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-32.6b9add.png"
       sizes="32x32"
-    />
+    >
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-128.4c4ce5.png"
       sizes="128x128"
-    />
+    >
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-180.5b99c0.png"
       sizes="180x180"
-    />
+    >
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-192.0e205e.png"
       sizes="192x192"
-    />
-    <link rel="icon" type="image/svg+xml" href="./assets/favicon.d5ec97.svg" />
-    <script type="module" crossorigin src="./assets/index-cb070eff.js"></script>
-  </head>
-  <body style="height: 100vh">
-    <noscript>
-      <strong>...</strong>
-    </noscript>
-    <div id="app">
-      <div id="loading-wrapper">
-        <div id="loading-text">LOADING</div>
-        <div id="loading-content"></div>
-      </div>
-    </div>
+    >
+    <link rel="icon" type="image/svg+xml" href="./assets/favicon.d5ec97.svg">
+    <link
+      rel="stylesheet"
+      href="./assets/@mdi/font/css/materialdesignicons.min.e3f476.css"
+    >
     <style>
       #loading-wrapper {
         position: fixed;
@@ -55,7 +47,7 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        color: #409d76;
+        color: grey;
         width: 100px;
         height: 30px;
         margin: -7px 0 0 -45px;
@@ -76,8 +68,8 @@
       #loading-content {
         border: 3px solid transparent;
-        border-top-color: #409d76;
-        border-bottom-color: #409d76;
+        border-top-color: grey;
+        border-bottom-color: grey;
         border-radius: 50%;
         -webkit-animation: loader 2s linear infinite;
         -moz-animation: loader 2s linear infinite;
@@ -99,6 +91,18 @@
         }
       }
     </style>
+    <script type="module" crossorigin src="./assets/index-dd539204.js"></script>
+  </head>
+  <body style="height: 100vh">
+    <noscript>
+      <strong>...</strong>
+    </noscript>
+    <div id="app">
+      <div id="loading-wrapper">
+        <div id="loading-text">LOADING</div>
+        <div id="loading-content"></div>
+      </div>
+    </div>
   </body>
 </html>

package/index.html CHANGED Viewed

@@ -1,48 +1,38 @@
 <!DOCTYPE html>
 <html class="vcs-ui" lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>VC Map</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-32.png"
       sizes="32x32"
-    />
+    >
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-128.png"
       sizes="128x128"
-    />
+    >
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-180.png"
       sizes="180x180"
-    />
+    >
     <link
       rel="icon"
       type="image/png"
       href="./assets/favicon-192.png"
       sizes="192x192"
-    />
-    <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+    >
+    <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg">
     <link
       rel="stylesheet"
       href="./assets/@mdi/font/css/materialdesignicons.min.css"
-    />
-  </head>
-  <body style="height: 100vh">
-    <noscript>
-      <strong>...</strong>
-    </noscript>
-    <div id="app">
-      <div id="loading-wrapper">
-        <div id="loading-text">LOADING</div>
-        <div id="loading-content"></div>
-      </div>
-    </div>
+    >
     <style>
       #loading-wrapper {
         position: fixed;
@@ -57,7 +47,7 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        color: #409d76;
+        color: grey;
         width: 100px;
         height: 30px;
         margin: -7px 0 0 -45px;
@@ -78,8 +68,8 @@
       #loading-content {
         border: 3px solid transparent;
-        border-top-color: #409d76;
-        border-bottom-color: #409d76;
+        border-top-color: grey;
+        border-bottom-color: grey;
         border-radius: 50%;
         -webkit-animation: loader 2s linear infinite;
         -moz-animation: loader 2s linear infinite;
@@ -101,6 +91,17 @@
         }
       }
     </style>
+  </head>
+  <body style="height: 100vh">
+    <noscript>
+      <strong>...</strong>
+    </noscript>
+    <div id="app">
+      <div id="loading-wrapper">
+        <div id="loading-text">LOADING</div>
+        <div id="loading-content"></div>
+      </div>
+    </div>
     <script type="module">
       import { initAppFromAppConfig } from '@vcmap/ui';

package/index.js CHANGED Viewed

@@ -162,6 +162,7 @@ export {
   vcsAppSymbol,
   pluginFactorySymbol,
   pluginBaseUrlSymbol,
+  pluginModuleUrlSymbol,
   getPluginAssetUrl,
   isValidPackageName,
   loadPlugin,
@@ -204,6 +205,7 @@ export { default as VcsFormSection } from './src/components/form-inputs-controls
 export { default as VcsSelect } from './src/components/form-inputs-controls/VcsSelect.vue';
 export { default as VcsSlider } from './src/components/form-inputs-controls/VcsSlider.vue';
 export { default as VcsTextField } from './src/components/form-inputs-controls/VcsTextField.vue';
+export { default as VcsChipArrayInput } from './src/components/form-inputs-controls/VcsChipArrayInput.vue';
 export { default as VcsTextArea } from './src/components/form-inputs-controls/VcsTextArea.vue';
 export { default as VcsWizard } from './src/components/form-inputs-controls/VcsWizard.vue';
 export { default as VcsWizardStep } from './src/components/form-inputs-controls/VcsWizardStep.vue';
@@ -245,5 +247,9 @@ export {
   VectorStyleMenus,
 } from './src/components/style/VcsVectorStyleComponent.vue';
+export { default as VcsVectorPropertiesComponent } from './src/components/vector-properties/VcsVectorPropertiesComponent.vue';
 // export { default as VcsFileNamePopover } from './src/components/popovers/VcsFileNamePopover.vue';
 // export { default as VcsTexturePopover } from './src/components/popovers/VcsTexturePopover.vue';
+export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.29",
+  "version": "5.0.0-rc.31",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -17,7 +17,7 @@
     "lint": "npm run lint:js && npm run lint:prettier",
     "format": "prettier --write --list-different . && npm run lint:js -- --fix",
     "prepack": "node build/build.js",
-    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force"
+    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force --include optional"
   },
   "repository": {
     "type": "git",
@@ -44,9 +44,9 @@
     "vue-i18n": "^8.24.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "~2.4.3",
-    "@vcmap/core": "^5.0.0-rc.37",
-    "ol": "~7.5.1",
+    "@vcmap-cesium/engine": "^4.0.0",
+    "@vcmap/core": "^5.0.0-rc.38",
+    "ol": "^7.5.2",
     "vue": "~2.7.3",
     "vuetify": "~2.6.7"
   },

package/plugins/@vcmap-show-case/form-inputs-example/FormInputsExample.vue CHANGED Viewed

@@ -54,6 +54,34 @@
               />
             </v-col>
           </v-row>
+          <v-row no-gutters>
+            <v-col class="w-max-half">
+              <VcsLabel html-for="arrayInput" :dense="dense">
+                Array Input
+              </VcsLabel>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                type="number"
+                :dense="dense"
+                v-model="state.arrayInput"
+                :rules="[arrayTest]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                :dense="dense"
+                v-model="state.arrayInputString"
+                column
+              />
+            </v-col>
+          </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsTextField
@@ -394,6 +422,7 @@
     VcsRadio,
     VcsFormButton,
     VcsTextField,
+    VcsChipArrayInput,
     VcsFormattedNumber,
     VcsFormSection,
     VcsLabel,
@@ -404,7 +433,12 @@
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/lib';
   import packageJSON from './package.json';
-  import { isValidText, conditionalTest, isValidEmail } from './validation.js';
+  import {
+    isValidText,
+    conditionalTest,
+    arrayTest,
+    isValidEmail,
+  } from './validation.js';
   export default {
     name: 'FormInputsExample',
@@ -418,6 +452,7 @@
       VcsFormSection,
       VcsLabel,
       VcsTextArea,
+      VcsChipArrayInput,
       VForm,
       VRow,
       VCol,
@@ -455,6 +490,7 @@
         isValid: ref(true),
         isValidText,
         conditionalTest,
+        arrayTest,
         isValidEmail,
         newUpdate,
         resetState() {

package/plugins/@vcmap-show-case/form-inputs-example/index.js CHANGED Viewed

@@ -26,6 +26,7 @@ function getLogger() {
  * @typedef FormInputsExampleState
  * @property {string} selected
  * @property {Array<string>} selectedMultiple
+ * @property {Array<number>} arrayInput
  * @property {string} conditionalInput
  * @property {string} initialTextInput
  * @property {number} numberInput
@@ -83,6 +84,8 @@ export default function formInputsExample(config) {
   const pluginState = {
     selected: pluginConfig.selectOptions.value[0],
     selectedMultiple: [],
+    arrayInput: [1, 2, 3],
+    arrayInputString: ['a', 'b', 'c'],
     conditionalInput: '',
     initialTextInput: pluginConfig.initialTextInput.value,
     numberInput: 100.156,

package/plugins/@vcmap-show-case/form-inputs-example/validation.js CHANGED Viewed

@@ -20,6 +20,17 @@ export function conditionalTest(value, condition) {
   }
 }
+/**
+ * @param {number[]} value
+ * @returns {boolean|string}
+ */
+export function arrayTest(value) {
+  if (value > 10) {
+    return 'Input must be lower 10';
+  }
+  return true;
+}
 /**
  * @param {string} value
  * @returns {boolean|string}

package/plugins/@vcmap-show-case/plugin-editors/PluginEditors.vue ADDED Viewed

@@ -0,0 +1,119 @@
+<template>
+  <VcsList :items="plugins" :show-title="false" />
+</template>
+<script>
+  import { inject, onUnmounted, ref } from 'vue';
+  import { VcsList, createToggleAction, WindowSlot } from '@vcmap/ui';
+  import { name } from './package.json';
+  export default {
+    name: 'PluginEditors',
+    components: {
+      VcsList,
+    },
+    setup() {
+      const plugins = ref([]);
+      const vcsApp = /** @type {VcsUiApp} */ (inject('vcsApp'));
+      const createPluginItem = (plugin) => {
+        const editors = plugin.getConfigEditors?.();
+        if (editors?.length > 0) {
+          const actions = editors
+            .map((e) => e.component)
+            .filter((c) => c)
+            .map((component, index) =>
+              createToggleAction(
+                {
+                  name: `editor-${index + 1}`,
+                  icon: index < 9 ? `mdi-numeric-${index + 1}-box` : undefined,
+                },
+                {
+                  id: `${plugin.name}-editor-${index}`,
+                  component,
+                  parentId: name,
+                  slot: WindowSlot.DYNAMIC_CHILD,
+                  props: {
+                    getConfig: () =>
+                      Promise.resolve(
+                        vcsApp.plugins.getSerializedByKey(plugin.name),
+                      ),
+                    setConfig(config) {
+                      if (config) {
+                        vcsApp.notifier.add({
+                          type: 'info',
+                          message: `${plugin.name}: ${JSON.stringify(
+                            config,
+                            null,
+                            2,
+                          )}`,
+                        });
+                      } else {
+                        vcsApp.notifier.add({
+                          type: 'warning',
+                          message: `${plugin.name}: no config set.`,
+                        });
+                      }
+                    },
+                  },
+                  state: {
+                    headerTitle:
+                      component.title ?? `${plugin.name} Editor ${index + 1}`,
+                  },
+                  position: {
+                    width: 500,
+                  },
+                },
+                vcsApp.windowManager,
+                name,
+              ),
+            );
+          if (actions.length > 0) {
+            return {
+              title: plugin.name,
+              actions: actions.map((a) => a.action),
+              destroy() {
+                actions.forEach((a) => a.destroy());
+                actions.splice(0);
+              },
+            };
+          }
+        }
+        return null;
+      };
+      plugins.value = [...vcsApp.plugins]
+        .map(createPluginItem)
+        .filter((p) => p);
+      const added = vcsApp.plugins.added.addEventListener((p) => {
+        const item = createPluginItem(p);
+        if (item) {
+          plugins.value.push(item);
+        }
+      });
+      const removed = vcsApp.plugins.removed.addEventListener((p) => {
+        const index = plugins.value.findIndex((i) => i.title === p.name);
+        if (index > -1) {
+          plugins.value[index].destroy();
+          plugins.value.splice(index, 1);
+        }
+      });
+      onUnmounted(() => {
+        added();
+        removed();
+        plugins.value.forEach((p) => {
+          p.destroy();
+        });
+      });
+      return {
+        plugins,
+      };
+    },
+  };
+</script>
+<style scoped></style>

package/plugins/@vcmap-show-case/plugin-editors/index.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { name, version } from './package.json';
+import component from './PluginEditors.vue';
+/**
+ * @returns {VcsPlugin}
+ */
+export default function pluginEditors() {
+  return {
+    name,
+    version,
+    async initialize(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Plugin Editors',
+          title: 'Overview of Plugins with editors.',
+        },
+        {
+          id: name,
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Plugin Editors',
+          },
+        },
+        app.windowManager,
+        name,
+      );
+      app.navbarManager.add({ id: name, action }, name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    getConfigEditors() {
+      return [];
+    },
+    toJSON() {
+      return {};
+    },
+    destroy() {
+      this._destroyAction();
+    },
+  };
+}

package/plugins/@vcmap-show-case/plugin-editors/package.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/plugin-editors",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/{@vcmap → @vcmap-show-case}/project-selector/ProjectSelectorComponent.vue RENAMED Viewed

@@ -75,7 +75,7 @@
     },
     setup() {
       const app = inject('vcsApp');
-      const plugin = app.plugins.getByKey('@vcmap/project-selector');
+      const plugin = app.plugins.getByKey('@vcmap-show-case/project-selector');
       async function selectProject(project) {
         this.loading = project.name;
         await plugin.selectProject(app, project);

package/plugins/{@vcmap → @vcmap-show-case}/project-selector/config.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
-  "name": "projectSelector",
-  "entry": "plugins/@vcmap/project-selector/index.js",
+  "name": "@vcmap-show-case/project-selector",
+  "entry": "plugins/@vcmap-show-case/project-selector/index.js",
   "selected": "VC Map Base",
   "selectedModules": [],
   "open": false,

package/plugins/{@vcmap → @vcmap-show-case}/project-selector/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "@vcmap/project-selector",
+  "name": "@vcmap-show-case/project-selector",
   "version": "1.0.0",
   "vcMapVersion": "~5.0.0",
   "dependencies": {

package/plugins/{@vcmap → @vcmap-show-case}/simple-graph/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "@vcmap/simple-graph",
+  "name": "@vcmap-show-case/simple-graph",
   "version": "1.0.0",
   "vcMapVersion": "~5.0.0",
   "dependencies": {

package/plugins/@vcmap-show-case/style-input-example/styleExample.vue CHANGED Viewed

@@ -135,7 +135,6 @@
               color: parseColor(image.getStroke().getColor()),
               width: image.getStroke().getWidth(),
             },
-            src: 'mdi-circle-outline',
           };
         } else if (image instanceof Icon) {
           styleOptions.value.image = {

package/plugins/@vcmap-show-case/table-example/DataTableExample.vue CHANGED Viewed

@@ -134,7 +134,6 @@
       const items = ref(defaultItems);
       const headers = ref(defaultHeaders);
       const newItem = ref({
-        id: items.value.length,
         name: 'foo',
         type: 'foo',
         date: new Date(),
@@ -159,6 +158,7 @@
             name: newItem.value.name,
             type: newItem.value.type,
             date: newItem.value.date,
+            id: items.value.length,
           };
           items.value.push(item);

package/plugins/{@vcmap → @vcmap-show-case}/theme-changer/ThemeChangerComponent.vue RENAMED Viewed

@@ -98,7 +98,7 @@
     },
     setup() {
       const app = inject('vcsApp');
-      const plugin = app.plugins.getByKey('@vcmap/theme-changer');
+      const plugin = app.plugins.getByKey('@vcmap-show-case/theme-changer');
       function setTheme(theme) {
         const { name, dark, light } = theme;

package/plugins/{@vcmap → @vcmap-show-case}/theme-changer/config.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
-  "name": "themeChanger",
-  "entry": "plugins/@vcmap/theme-changer/index.js",
+  "name": "@vcmap-show-case/theme-changer",
+  "entry": "plugins/@vcmap-show-case/theme-changer/index.js",
   "themes": [
     {
       "name": "Theme 1",

package/plugins/{@vcmap → @vcmap-show-case}/theme-changer/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "@vcmap/theme-changer",
+  "name": "@vcmap-show-case/theme-changer",
   "version": "1.0.0",
   "vcMapVersion": "~5.0.0",
   "dependencies": {