@vcmap/ui 6.0.0-rc.9 → 6.0.1

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-ac50bfc8.js";
+export * from "./vuetify-521222b6.js";

package/index.d.ts

@@ -190,6 +190,8 @@ export { default as VcsExtent } from "./src/components/extent/VcsExtent.vue";
 export type * from "./src/components/extent/VcsExtent.vue.d.ts";
 export { default as VcsExtentEditor } from "./src/components/extent/VcsExtentEditor.vue";
 export type * from "./src/components/extent/VcsExtentEditor.vue.d.ts";
+export { default as VcsProjection } from "./src/components/projection/VcsProjection.vue";
+export type * from "./src/components/projection/VcsProjection.vue.d.ts";
 export { default as VcsViewpointComponent } from "./src/components/viewpoint/VcsViewpointComponent.vue";
 export type * from "./src/components/viewpoint/VcsViewpointComponent.vue.d.ts";
 export { default as VcsViewpointEditor } from "./src/components/viewpoint/VcsViewpointEditor.vue";

package/index.js

@@ -281,6 +281,7 @@ export { default as VcsTextSelector } from './src/components/style/VcsTextSelect
 export { default as VcsTextMenu } from './src/components/style/VcsTextMenu.vue';
 export { default as VcsExtent } from './src/components/extent/VcsExtent.vue';
 export { default as VcsExtentEditor } from './src/components/extent/VcsExtentEditor.vue';
+export { default as VcsProjection } from './src/components/projection/VcsProjection.vue';
 export {
   default as VcsVectorStyleComponent,
   VectorStyleMenus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.9",
+  "version": "6.0.1",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -47,7 +47,7 @@
     "@intlify/core-base": "^9.13.1",
     "@vcsuite/check": "^2.1.0",
     "@vcsuite/logger": "^1.0.1",
-    "@vcsuite/parsers": "^1.0.3",
+    "@vcsuite/parsers": "^2.0.0",
     "dompurify": "^3.1.6",
     "fast-deep-equal": "^3.1.3",
     "marked": "^14.0.0",
@@ -57,17 +57,17 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.2",
-    "@vcmap/core": "^6.0.0-rc.10",
-    "ol": "^10.2.0",
+    "@vcmap/core": "^6.0.0",
+    "ol": "^10.2.1",
     "vue": "~3.4.38",
-    "vuetify": "^3.7.2"
+    "vuetify": "^3.7.3"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
     "@vcsuite/eslint-config": "^3.0.5",
-    "@vitejs/plugin-vue": "^5.1.2",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/coverage-v8": "^2.1.3",
     "@vue/test-utils": "^2.4.6",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vuetify": "^2.4.0",
@@ -76,16 +76,16 @@
     "jsdoc": "^4.0.3",
     "jsdoc-plugin-intersection": "^1.0.4",
     "jsdoc-plugin-typescript": "^2.2.1",
-    "jsdom": "^24.1.1",
+    "jsdom": "^25.0.1",
     "resize-observer-polyfill": "1.5.1",
     "rollup-plugin-strip-pragma": "^1.0.0",
-    "sass": "^1.77.8",
+    "sass": "^1.80.2",
     "tar": "^7.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.4.1",
+    "vite": "^5.4.9",
     "vite-plugin-vuetify": "^2.0.4",
-    "vitest": "^2.0.5",
-    "vue-tsc": "^2.0.29"
+    "vitest": "^2.1.3",
+    "vue-tsc": "^2.1.6"
   },
   "stylelint": {
     "extends": "stylelint-config-standard",

package/plugins/@vcmap-show-case/README.md

@@ -4,25 +4,34 @@ This directory contains show-case plugins demonstrating the usage of VC Map UI c
 
 ## components
 
-- [buttons-example](./buttons-example/README.md)
 - [collection-manager-example](./collection-manager-example/README.md)
+- [extent-example](./extent-example/README.md)
+- [flight-example](./flight-example/README.md)
 - [form-inputs-example](./form-inputs-example/README.md)
 - [icons-example](./icons-example/README.md)
-- [list-example](./list-example/README.md)
+- [custom-icons-example](./custom-icons-example/README.md)
 - [style-input-example](style-input-example/README.md)
-- [table-example](table-example/README.md)
-- [textfields-example](./textfields-example/README.md)
+- [vector-properties-example](./vector-properties-example/README.md)
+- [viewpoint-component-example](./viewpoint-component-example/README.md)
 - [wizard-example](./wizard-example/README.md)
+- [projection-example](./projection-example/README.md)
+
+For base components see [stories](../../story), which can be run with `npm run story:dev`.
+
+> All components showcase plugins are part of the [components-show-case.config.json](../../config/components-show-case.config.json)
 
 ## concepts
 
 - [category-tester](category-tester/README.md)
-- [config-editor](./config-editor/README.md)
 - [context-menu-tester](./context-menu-tester/README.md)
 - [notifier-tester](./notifier-tester/README.md)
+- [panel-tester](./panel-tester/README.md)
 - [plugin-editors](plugin-editors/README.md)
 - [project-selector](project-selector/README.md)
 - [simple-graph](simple-graph/README.md)
 - [switch-map-callback-example](switch-map-callback-example/README.md)
-- [theme-changer](theme-changer/README.md)
+- [theming-example](./theming-example/README.md)
+- [toolbox-example](./toolbox-example/README.md)
 - [window-tester](./window-tester/README.md)
+
+> All concept showcase plugins are part of the [concepts-show-case.config.json](../../config/concepts-show-case.config.json)

package/plugins/@vcmap-show-case/category-tester/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/category-tester",
   "version": "2.0.0",
-  "mapVersion": "^6.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/category-tester/src/CollectionComponentOptions.vue

@@ -7,7 +7,7 @@
         </VcsLabel>
       </v-col>
       <v-col>
-        <VcsTextField id="title" clearable dense v-model="title" />
+        <VcsTextField id="title" clearable v-model="title" />
       </v-col>
     </v-row>
     <v-row no-gutters v-for="key in keys" :key="key">
@@ -17,14 +17,18 @@
         </VcsLabel>
       </v-col>
       <v-col>
-        <VcsCheckbox :id="key" dense v-model="getComputed(key).value" />
+        <VcsCheckbox
+          :id="key"
+          :model-value="localOptions[key]"
+          @update:model-value="(v) => updateOption(key, v)"
+        />
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script>
-  import { computed, inject, isRef } from 'vue';
+  import { inject, isRef, reactive } from 'vue';
   import { VContainer, VRow, VCol } from 'vuetify/components';
   import { VcsCheckbox, VcsLabel, VcsTextField } from '@vcmap/ui';
 
@@ -43,29 +47,25 @@
     },
     setup() {
       const collectionComponent = inject('collectionComponent');
+      const localOptions = reactive({
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        renamable: collectionComponent.renamable,
+        removable: collectionComponent.removable,
+      });
 
       return {
         title: collectionComponent.title,
-        keys: [
-          'draggable',
-          'selectable',
-          'singleSelect',
-          'renamable',
-          'removable',
-        ],
-        getComputed(key) {
-          return computed({
-            get() {
-              return collectionComponent[key];
-            },
-            set(value) {
-              if (isRef(collectionComponent[key])) {
-                collectionComponent[key].value = value;
-              } else {
-                collectionComponent[key] = value;
-              }
-            },
-          });
+        keys: Object.keys(localOptions),
+        localOptions,
+        updateOption(key, value) {
+          localOptions[key] = value;
+          if (isRef(collectionComponent[key])) {
+            collectionComponent[key].value = value;
+          } else {
+            collectionComponent[key] = value;
+          }
         },
       };
     },

package/plugins/@vcmap-show-case/category-tester/src/FoobarEditor.vue

@@ -12,7 +12,7 @@
           </VcsLabel>
         </v-col>
         <v-col>
-          <VcsTextField id="name" clearable dense v-model="localConfig.name" />
+          <VcsTextField id="name" clearable v-model="localConfig.name" />
         </v-col>
       </v-row>
       <v-row no-gutters v-if="!multi">
@@ -22,12 +22,7 @@
           </VcsLabel>
         </v-col>
         <v-col>
-          <VcsTextField
-            id="title"
-            clearable
-            dense
-            v-model="localConfig.title"
-          />
+          <VcsTextField id="title" clearable v-model="localConfig.title" />
         </v-col>
       </v-row>
       <v-row no-gutters>
@@ -40,7 +35,6 @@
           <VcsTextField
             id="random"
             clearable
-            dense
             type="number"
             v-model.number="localConfig.random"
             :placeholder="$t('categoryTester.fooEditor.ambiguous')"

package/plugins/@vcmap-show-case/collection-manager-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/collection-manager-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/collection-manager-example/src/CollectionManagerExample.vue

@@ -19,7 +19,6 @@
                 <VcsSelect
                   id="selectInput"
                   :items="appCollections"
-                  dense
                   v-model="selected"
                 />
               </v-col>
@@ -71,13 +70,16 @@
   };
 
   function setupCollectionComponentStandalone() {
-    const collectionComponent = new CollectionComponentClass({
-      id: 'standalone',
-      title: 'Collection Component Standalone',
-      collection: new Collection(),
-      renamable: true,
-      selectable: true,
-    });
+    const collectionComponent = new CollectionComponentClass(
+      {
+        id: 'standalone',
+        title: 'Collection Component Standalone',
+        collection: new Collection(),
+        renamable: true,
+        selectable: true,
+      },
+      owner,
+    );
 
     for (let i = 0; i <= 12; i++) {
       collectionComponent.collection.add({

package/plugins/@vcmap-show-case/context-menu-tester/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/context-menu-tester",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/extent-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/extent-example",
   "version": "1.0.0",
-  "mapVersion": "^5.1.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/flight-component-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/flight-component-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/form-inputs-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/form-inputs-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/hello-world/package.json

@@ -2,5 +2,5 @@
   "name": "@vcmap/hello-world",
   "description": "A small hello world plugin",
   "version": "1.0.8",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/icons-example/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/icons-example",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/notifier-tester/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/notifier-tester",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/panel-tester/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/panel-tester",
   "version": "1.0.0",
-  "mapVersion": "^5.1.0"
+  "mapVersion": "^6.0"
 }

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

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/plugin-editors",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "mapVersion": "^6.0"
 }

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

@@ -1,13 +1,20 @@
 import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import { name, version } from '../package.json';
+import packageJSON from '../package.json';
 import component from './PluginEditors.vue';
 /**
  * @returns {VcsPlugin}
  */
 export default function pluginEditors() {
   return {
-    name,
-    version,
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
     async initialize(app) {
       const { action, destroy } = createToggleAction(
         {
@@ -15,7 +22,7 @@ export default function pluginEditors() {
           title: 'Overview of Plugins with editors.',
         },
         {
-          id: name,
+          id: packageJSON.name,
           component,
           slot: WindowSlot.DYNAMIC_LEFT,
           state: {
@@ -23,9 +30,13 @@ export default function pluginEditors() {
           },
         },
         app.windowManager,
-        name,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: packageJSON.name, action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
       );
-      app.navbarManager.add({ id: name, action }, name, ButtonLocation.TOOL);
       this._destroyAction = destroy;
     },
     getConfigEditors() {

package/plugins/@vcmap-show-case/project-selector/package.json

@@ -1,13 +1,5 @@
 {
   "name": "@vcmap-show-case/project-selector",
   "version": "1.0.0",
-  "mapVersion": "^5.0.0",
-  "dependencies": {
-    "@vcsuite/check": "^1.1.2",
-    "@vcsuite/logger": "^1.0.1"
-  },
-  "peerDependencies": {
-    "@vcmap/ui": "^5.0.0-rc.11",
-    "@vcmap/core": "^5.0.0-rc.5"
-  }
+  "mapVersion": "^6.0"
 }

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -1,47 +1,38 @@
 <template>
   <v-container class="pa-0">
-    <v-list color="rgba(0,0,0,0)">
-      <v-chip
-        v-for="(module, index) in modules"
-        :key="index"
-        class="mx-1"
-        :color="module.active ? 'primary' : undefined"
-        :disabled="!toggleable"
-        @click="toggle(module)"
+    <v-chip
+      v-for="(module, index) in modules"
+      :key="index"
+      class="ma-1"
+      :color="module.active ? 'primary' : undefined"
+      :disabled="!toggleable"
+      @click="toggle(module)"
+    >
+      {{ module.name || module.configUrl }}
+      <v-icon
+        v-if="module.description && toggleable"
+        right
+        v-bind="{ ...$attrs, ...$props }"
       >
-        {{ module.name || module.configUrl }}
-        <v-icon
-          v-if="module.description && toggleable"
-          right
-          v-bind="{ ...$attrs, ...$props }"
-        >
-          mdi-help-circle
-        </v-icon>
-        <v-tooltip
-          v-if="module.description && toggleable"
-          :text="module.description"
-          activator="parent"
-        />
-      </v-chip>
-    </v-list>
+        mdi-help-circle
+      </v-icon>
+      <v-tooltip
+        v-if="module.description && toggleable"
+        :text="module.description"
+        activator="parent"
+      />
+    </v-chip>
   </v-container>
 </template>
 
 <script>
-  import {
-    VChip,
-    VContainer,
-    VIcon,
-    VList,
-    VTooltip,
-  } from 'vuetify/components';
+  import { VChip, VContainer, VIcon, VTooltip } from 'vuetify/components';
 
   export default {
     name: 'ModulesListComponent',
     components: {
       VTooltip,
       VContainer,
-      VList,
       VChip,
       VIcon,
     },

package/plugins/@vcmap-show-case/project-selector/src/ProjectSelectorComponent.vue

@@ -4,28 +4,26 @@
     <v-list v-for="(project, index) in state.projects" :key="index">
       <v-card
         class="ma-1"
-        :color="project.active ? 'base lighten-3' : undefined"
+        :title="project.name"
+        :subtitle="project.description"
+        :color="project.active ? 'base-lighten-3' : undefined"
         @click="selectProject(project)"
         hover
         outlined
         :loading="loading === project.name"
       >
-        <v-list-item>
-          <v-list-item-title class="font-weight-bold">
-            {{ project.name }}
-          </v-list-item-title>
-          <v-list-item-subtitle>{{ project.description }}</v-list-item-subtitle>
+        <template #actions>
           <ModulesListComponent
             :modules="project.modules"
             @toggle-module="toggleModule"
             :toggleable="false"
           />
-          <v-list-item-action>
-            <v-avatar color="success" size="30" v-if="project.active">
-              <v-icon>mdi-check</v-icon>
-            </v-avatar>
-          </v-list-item-action>
-        </v-list-item>
+        </template>
+        <template #append>
+          <v-avatar color="success" size="30" v-if="project.active">
+            <v-icon>mdi-check</v-icon>
+          </v-avatar>
+        </template>
       </v-card>
     </v-list>
     <v-divider />
@@ -37,16 +35,12 @@
   </v-container>
 </template>
 <script>
-  import { inject } from 'vue';
+  import { inject, ref } from 'vue';
   import {
     VList,
     VContainer,
     VCard,
     VIcon,
-    VListItem,
-    VListItemTitle,
-    VListItemSubtitle,
-    VListItemAction,
     VAvatar,
     VDivider,
   } from 'vuetify/components';
@@ -60,20 +54,18 @@
       VContainer,
       VCard,
       VIcon,
-      VListItem,
-      VListItemTitle,
-      VListItemSubtitle,
-      VListItemAction,
       VAvatar,
       VDivider,
     },
     setup() {
       const app = inject('vcsApp');
       const plugin = app.plugins.getByKey('@vcmap-show-case/project-selector');
+      const loading = ref(undefined);
+
       async function selectProject(project) {
-        this.loading = project.name;
+        loading.value = project.name;
         await plugin.selectProject(app, project);
-        this.loading = undefined;
+        loading.value = undefined;
       }
 
       async function toggleModule(module) {

package/plugins/@vcmap-show-case/projection-example/README.md

@@ -0,0 +1,3 @@
+# Extent Example
+
+This is a show-case plugin demonstrating the usage of the [VcsProjection](../../../src/components/projection/VcsProjection.vue) component.

package/plugins/@vcmap-show-case/projection-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/projection-example",
+  "version": "1.0.0",
+  "mapVersion": "^6.0"
+}

package/plugins/@vcmap-show-case/projection-example/src/ProjectionExample.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+  import { ref, toRaw } from 'vue';
+  import { mercatorProjection } from '@vcmap/core';
+  import { VContainer, VCol, VRow, VSwitch } from 'vuetify/components';
+  import { VcsProjection, VcsFormButton, VcsLabel } from '@vcmap/ui';
+
+  const projectionOptions = ref(mercatorProjection.toJSON());
+  const required = ref(false);
+  const hideRequestButton = ref(false);
+  const hideAlias = ref(false);
+  function reset() {
+    projectionOptions.value = mercatorProjection.toJSON();
+    console.log(mercatorProjection.toJSON());
+  }
+</script>
+
+<template>
+  <div>
+    <v-container>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel>
+            {{ $t('required') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <v-switch v-model="required" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel>
+            {{ $t('hideRequestButton') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <v-switch v-model="hideRequestButton" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <VcsLabel>
+            {{ $t('hideAlias') }}
+          </VcsLabel>
+        </v-col>
+        <v-col>
+          <v-switch v-model="hideAlias" />
+        </v-col>
+      </v-row>
+      <v-row no-gutters>
+        <v-col>
+          <vcs-form-button @click="reset" class="w-100"
+            >Reset Web Mercator</vcs-form-button
+          >
+        </v-col>
+      </v-row>
+    </v-container>
+    <vcs-projection
+      v-model="projectionOptions"
+      :required="required"
+      :hide-request-button="hideRequestButton"
+      :hide-alias="hideAlias"
+      class="pa-1"
+    ></vcs-projection>
+    <div class="d-flex gc-2 justify-end mr-2">
+      <vcs-form-button @click="console.log(toRaw(projectionOptions))">{{
+        $t('projectionExample.log')
+      }}</vcs-form-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>