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

@vcmap/ui 5.0.0-rc.30 → 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 (323) hide show

package/dist/assets/ui.js CHANGED Viewed

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

package/dist/assets/vue.js CHANGED Viewed

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

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

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.ea3fa8.css');import v from "./vue.67e80f.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.ea3fa8.js";
-import { default as f } from "./vuetify.ea3fa8.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-c115e3a1.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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.30",
+  "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/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/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": {

package/plugins/@vcmap-show-case/vector-properties-example/vectorPropertiesExample.vue CHANGED Viewed

@@ -11,12 +11,24 @@
           />
         </v-col>
       </v-row>
+      <v-row>
+        <v-col>
+          <VcsCheckbox v-model="hideDividers" label="Hide dividers" />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <VcsCheckbox v-model="expandable" label="Expandable" />
+        </v-col>
+      </v-row>
     </v-container>
     <VcsVectorPropertiesComponent
       v-model="featureProperties"
       :value-default="defaultOptions"
       :show3-d-properties="is3D"
       :properties="propertiesToDisplay.map((item) => item.name)"
+      :hide-dividers="hideDividers"
+      :expandable="expandable"
     />
   </v-sheet>
 </template>
@@ -24,7 +36,11 @@
 <script>
   import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
   import { CesiumMap, VectorLayer, VectorProperties } from '@vcmap/core';
-  import { VcsVectorPropertiesComponent, VcsList } from '@vcmap/ui';
+  import {
+    VcsVectorPropertiesComponent,
+    VcsList,
+    VcsCheckbox,
+  } from '@vcmap/ui';
   import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
   import { Feature } from 'ol';
   import { Polygon } from 'ol/geom.js';
@@ -43,6 +59,7 @@
     components: {
       VcsVectorPropertiesComponent,
       VcsList,
+      VcsCheckbox,
       VSheet,
       VContainer,
       VRow,
@@ -103,6 +120,8 @@
         is3D,
         propertiesToSelectFrom,
         propertiesToDisplay: ref([...propertiesToSelectFrom]),
+        hideDividers: ref(false),
+        expandable: ref(false),
       };
     },
   };

package/plugins/package.json CHANGED Viewed

@@ -1,10 +1,14 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.7",
     "@vcmap/print": "^1.0.2",
     "@vcmap/swipe-tool": "^1.0.3",
     "@vcmap/export": "^1.0.1",
     "@vcmap/shadow": "^1.0.1",
-    "@vcmap/draw": "^1.0.0"
+    "@vcmap/draw": "^1.0.0",
+    "@vcmap/create-link": "^1.0.1",
+    "@vcmap/search-nominatim": "^1.0.1"
+  },
+  "optionalDependencies": {
+    "@vcmap/hello-world": "^1.0.7"
   }
 }

package/src/application/VcsAttributions.vue CHANGED Viewed

@@ -1,24 +1,29 @@
 <template>
-  <v-list class="px-2">
-    <v-list-item
-      v-for="{ key, title, attributions } in entries"
-      :key="key"
-      class="px-0"
-    >
-      <v-list-item-content>
-        <v-list-item-title>{{ $t(title) }}</v-list-item-title>
-        <v-list-item-subtitle
-          v-for="attribution in attributions"
-          :key="attribution.provider"
-          :title="`${$t(attribution.provider)} ${attribution.year}`"
-        >
-          <a :href="attribution.url" target="_blank">
-            {{ $t(attribution.provider) }} {{ attribution.year }}
-          </a>
-        </v-list-item-subtitle>
-      </v-list-item-content>
-    </v-list-item>
-  </v-list>
+  <v-sheet>
+    <v-list v-if="entries.length" class="px-2">
+      <v-list-item
+        v-for="{ key, title, attributions } in entries"
+        :key="key"
+        class="px-0"
+      >
+        <v-list-item-content>
+          <v-list-item-title>{{ $t(title) }}</v-list-item-title>
+          <v-list-item-subtitle
+            v-for="attribution in attributions"
+            :key="attribution.provider"
+            :title="`${$t(attribution.provider)} ${attribution.year}`"
+          >
+            <a :href="attribution.url" target="_blank">
+              {{ $t(attribution.provider) }} {{ attribution.year }}
+            </a>
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+    <v-sheet v-else class="ma-2">
+      {{ $t('footer.attributions.empty') }}
+    </v-sheet>
+  </v-sheet>
 </template>
 <style lang="scss" scoped>
@@ -51,6 +56,7 @@
     VListItemContent,
     VListItemTitle,
     VListItemSubtitle,
+    VSheet,
   } from 'vuetify/lib';
   /**
@@ -65,6 +71,7 @@
       VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
+      VSheet,
     },
     props: {
       entries: {