npm - @vcmap/ui - Versions diffs - 5.0.0-rc.10 → 5.0.0-rc.13 - Mend

@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

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 (165) hide show

package/README.md +12 -5
package/build/build.js +6 -3
package/build/buildHelpers.js +12 -4
package/build/buildPreview.js +7 -0
package/build/getPluginProxies.js +4 -0
package/config/aerowest.config.json +13 -3
package/config/base.config.json +398 -219
package/config/codes.config.json +397 -0
package/config/dev.config.json +375 -1
package/config/graphFeatureInfo.config.json +100 -0
package/config/www.config.json +1232 -0
package/dist/assets/{cesium.eb5667.js → cesium.21663e.js} +0 -0
package/dist/assets/cesium.js +1 -1
package/dist/assets/core.63242d.js +4 -0
package/dist/assets/core.js +1 -1
package/dist/assets/font/OFL.txt +93 -0
package/dist/assets/font/TitilliumWeb-Regular.woff2 +0 -0
package/dist/assets/{index.4ccd4433.js → index.44b91cfe.js} +1 -1
package/dist/assets/{ol.ef03b1.js → ol.88ba9d.js} +0 -0
package/dist/assets/ol.js +1 -1
package/dist/assets/ui.3c2933.css +1 -0
package/dist/assets/ui.3c2933.js +71 -0
package/dist/assets/ui.js +1 -1
package/dist/assets/vue.c897fc.js +9 -0
package/dist/assets/vue.js +2 -1
package/dist/assets/{vuetify.401a29.css → vuetify.147c3a.css} +1 -1
package/dist/assets/{vuetify.401a29.js → vuetify.147c3a.js} +72 -72
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -5
package/index.js +39 -5
package/lib/vue.js +1 -0
package/map.config.json +15 -6
package/package.json +17 -8
package/plugins/@vcmap/create-link/fallbackCreateLink.vue +71 -0
package/plugins/@vcmap/create-link/index.js +83 -0
package/plugins/@vcmap/create-link/package.json +6 -0
package/plugins/@vcmap/pluginExample/index.js +2 -2
package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue +20 -3
package/plugins/@vcmap/project-selector/ProjectSelectorComponent.vue +1 -1
package/plugins/@vcmap/project-selector/index.js +1 -1
package/plugins/@vcmap/project-selector/package.json +1 -2
package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue +1 -1
package/plugins/@vcmap/theme-changer/index.js +1 -1
package/plugins/@vcmap/theme-changer/package.json +1 -2
package/plugins/categoryTest/Categories.vue +89 -1
package/plugins/categoryTest/Category.vue +1 -1
package/plugins/example/index.js +10 -23
package/plugins/simple-graph/README.md +51 -0
package/plugins/simple-graph/SimpleGraphComponent.vue +70 -0
package/plugins/simple-graph/index.js +17 -0
package/plugins/simple-graph/package.json +11 -0
package/plugins/simple-graph/simpleGraphView.js +76 -0
package/plugins/test/editor.vue +1 -1
package/plugins/test/index.js +76 -9
package/plugins/test/toolbox-data.js +82 -57
package/plugins/test/windowManagerExample.vue +1 -1
package/src/actions/stateRefAction.js +2 -2
package/src/actions/styleSelector.vue +1 -1
package/src/application/Navbar.vue +13 -2
package/src/application/VcsApp.vue +301 -116
package/src/application/VcsMap.vue +1 -1
package/src/application/VcsSettings.vue +1 -1
package/src/application/vcsAppWrapper.vue +1 -0
package/src/assets/font/OFL.txt +93 -0
package/src/assets/font/TitilliumWeb-Regular.woff2 +0 -0
package/src/components/form-inputs-controls/VcsCheckbox.vue +13 -0
package/src/components/form-inputs-controls/VcsColorPicker.vue +1 -1
package/src/components/form-inputs-controls/VcsRadio.vue +123 -0
package/src/components/form-output/VcsFormattedNumber.vue +1 -1
package/src/components/lists/VcsActionList.vue +22 -7
package/src/components/lists/VcsTreeview.vue +4 -4
package/src/components/lists/VcsTreeviewLeaf.vue +10 -3
package/src/components/lists/VcsTreeviewSearchbar.vue +1 -2
package/src/components/tables/VcsTable.vue +245 -0
package/src/contentTree/LayerTree.vue +1 -1
package/src/contentTree/contentTreeCollection.js +4 -4
package/src/contentTree/contentTreeItem.js +9 -9
package/src/contentTree/groupContentTreeItem.js +1 -1
package/src/contentTree/layerContentTreeItem.js +15 -1
package/src/contentTree/layerGroupContentTreeItem.js +21 -1
package/src/contentTree/nodeContentTreeItem.js +1 -1
package/src/featureInfo/AddressBalloonComponent.vue +47 -0
package/src/featureInfo/BalloonComponent.vue +140 -0
package/src/featureInfo/abstractFeatureInfoView.js +313 -0
package/src/featureInfo/addressBalloonFeatureInfoView.js +118 -0
package/src/featureInfo/balloonFeatureInfoView.js +151 -0
package/src/featureInfo/balloonHelper.js +132 -0
package/src/featureInfo/featureInfo.js +457 -0
package/src/featureInfo/featureInfoInteraction.js +42 -0
package/src/featureInfo/iframeFeatureInfoView.js +95 -0
package/src/featureInfo/tableFeatureInfoView.js +106 -0
package/src/i18n/de.js +26 -0
package/src/i18n/en.js +26 -0
package/src/i18n/i18nCollection.js +17 -0
package/src/icons/+all.js +80 -0
package/src/icons/ClippingHorizontalIcon.vue +7 -0
package/src/icons/ClippingIcon.vue +7 -0
package/src/icons/ClippingVerticalIcon.vue +7 -0
package/src/icons/ColorPickerIcon.vue +7 -0
package/src/icons/ComponentsIcon.vue +2 -2
package/src/icons/DimensionsHouseIcon.vue +11 -9
package/src/icons/EditIcon.vue +7 -0
package/src/icons/GlobalTerrainIcon.vue +9 -0
package/src/icons/GroundIcon.vue +18 -0
package/src/icons/HideIcon.vue +12 -0
package/src/icons/LogoutIcon.vue +7 -0
package/src/icons/ObjectAttributeIcon.vue +2 -13
package/src/icons/PedestrianIcon.vue +2 -3
package/src/icons/PenIcon.vue +2 -9
package/src/icons/PoiIcon.vue +5 -2
package/src/icons/PointSelectIcon.vue +4 -2
package/src/icons/QueryIcon.vue +6 -7
package/src/icons/ScreenshotIcon.vue +16 -0
package/src/icons/ShareIcon.vue +4 -16
package/src/icons/SkipNextIcon.vue +3 -1
package/src/icons/TerrainBoxIcon.vue +9 -0
package/src/icons/ToolsIcon.vue +4 -30
package/src/icons/UploadIcon.vue +2 -9
package/src/icons/UserProfileIcon.vue +7 -0
package/src/icons/UserShareIcon.vue +7 -0
package/src/icons/VideoRecorderIcon.vue +5 -9
package/src/icons/ViewpointFlightIcon.vue +11 -0
package/src/icons/ViewpointIcon.vue +11 -0
package/src/icons/Viewshed360Icon.vue +7 -0
package/src/icons/ViewshedConeIcon.vue +7 -0
package/src/icons/ViewshedIcon.vue +7 -0
package/src/icons/WallIcon.vue +4 -9
package/src/legend/legendHelper.js +193 -0
package/src/legend/styleLegendItem.vue +129 -0
package/src/legend/vcsLegend.vue +92 -0
package/src/manager/buttonManager.js +7 -12
package/src/manager/categoryManager/ComponentsManager.vue +30 -0
package/src/manager/categoryManager/categoryManager.js +500 -0
package/src/manager/contextMenu/contextMenuComponent.vue +43 -0
package/src/manager/contextMenu/contextMenuInteraction.js +42 -0
package/src/manager/contextMenu/contextMenuManager.js +197 -0
package/src/manager/navbarManager.js +9 -9
package/src/manager/toolbox/GroupToolboxComponent.vue +118 -0
package/src/manager/toolbox/SelectToolboxComponent.vue +128 -0
package/src/manager/toolbox/ToolboxManager.vue +116 -98
package/src/manager/toolbox/toolboxManager.js +235 -86
package/src/manager/window/WindowComponent.vue +1 -1
package/src/manager/window/WindowManager.vue +5 -3
package/src/manager/window/windowManager.js +118 -14
package/src/navigation/mapNavigation.vue +3 -5
package/src/navigation/overviewMap.js +28 -5
package/src/navigation/vcsCompass.vue +1 -1
package/src/pluginHelper.js +42 -10
package/src/setup.js +0 -2
package/src/state.js +256 -0
package/src/styles/_theming.scss +0 -5
package/src/styles/variables.scss +7 -0
package/src/styles/vcsFont.scss +17 -0
package/src/uiConfig.js +79 -0
package/src/vcsUiApp.js +213 -22
package/src/vuePlugins/vuetify.js +14 -4
package/config/berlin.config.json +0 -510
package/dist/assets/core.216494.js +0 -4
package/dist/assets/ui.99a1a7.css +0 -1
package/dist/assets/ui.99a1a7.js +0 -70
package/dist/assets/vue-composition-api.c5aca1.js +0 -14
package/dist/assets/vue-composition-api.js +0 -2
package/dist/assets/vue.762edd.js +0 -9
package/lib/vue-composition-api.js +0 -2
package/src/manager/toolbox/ToolboxGroupComponent.vue +0 -128

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export * from "./vuetify.401a29.js";
-export { default } from "./vuetify.401a29.js";
+export * from "./vuetify.147c3a.js";
+export { default } from "./vuetify.147c3a.js";

package/dist/index.html CHANGED Viewed

@@ -3,11 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Titillium+Web"
-    />
-    <script type="module" crossorigin src="./assets/index.4ccd4433.js"></script>
+    <script type="module" crossorigin src="./assets/index.44b91cfe.js"></script>
   </head>
   <body style="height: 100vH;">
     <noscript>

package/index.js CHANGED Viewed

@@ -15,7 +15,12 @@ export {
 } from './src/actions/stateRefAction.js';
 export { default as Navbar } from './src/application/Navbar.vue';
-export { default as VcsApp } from './src/application/VcsApp.vue';
+export {
+  default as VcsApp,
+  setupMapNavbar,
+  setupPluginMountedListeners,
+  setupComponentsWindow,
+} from './src/application/VcsApp.vue';
 export { default as VcsAppWrapper } from './src/application/vcsAppWrapper.vue';
 export { default as VcsMap } from './src/application/VcsMap.vue';
@@ -41,10 +46,33 @@ export { default as ViewPointContentTreeItem } from './src/contentTree/viewPoint
 export { default as WindowComponent } from './src/manager/window/WindowComponent.vue';
 export { default as WindowComponentHeader } from './src/manager/window/WindowComponentHeader.vue';
 export { default as VcsWindowManager } from './src/manager/window/WindowManager.vue';
-export { WindowManager, WindowSlot, WindowPositions } from './src/manager/window/windowManager.js';
-export { ButtonManager } from './src/manager/buttonManager.js';
+export {
+  WindowManager,
+  WindowSlot,
+  WindowPositions,
+  WindowAlignment,
+  getFittedWindowPositionOptions,
+  getFittedWindowPositionOptionsFromMapEvent,
+  getWindowPositionOptions,
+  getWindowPositionOptionsFromMapEvent,
+} from './src/manager/window/windowManager.js';
+export { default as ButtonManager } from './src/manager/buttonManager.js';
 export { NavbarManager, ButtonLocation, getActionsByLocation } from './src/manager/navbarManager.js';
+export { default as ToolboxManager, ToolboxType } from './src/manager/toolbox/toolboxManager.js';
+export { default as CategoryManager } from './src/manager/categoryManager/categoryManager.js';
+export { default as ComponentsManager } from './src/manager/categoryManager/ComponentsManager.vue';
+export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
+export { default as ContextMenuComponent } from './src/manager/contextMenu/contextMenuComponent.vue';
+export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
+export { applyKeyMapping, applyValueMapping, default as AbstractFeatureInfoView } from './src/featureInfo/abstractFeatureInfoView.js';
+export { extractNestedKey, default as BalloonFeatureInfoView } from './src/featureInfo/balloonFeatureInfoView.js';
+export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener } from './src/featureInfo/balloonHelper.js';
+export { default as BalloonComponent } from './src/featureInfo/BalloonComponent.vue';
+export { default as AddressBalloonComponent } from './src/featureInfo/AddressBalloonComponent.vue';
+export { default as IframeFeatureInfoView } from './src/featureInfo/iframeFeatureInfoView.js';
+export { default as TableFeatureInfoView } from './src/featureInfo/tableFeatureInfoView.js';
 export { default as MapNavCompass } from './src/navigation/mapNavCompass.vue';
 export { default as MapNavigation } from './src/navigation/mapNavigation.vue';
@@ -62,11 +90,14 @@ export { default as initApp } from './src/init.js';
 export {
   vcsAppSymbol,
   pluginFactorySymbol,
+  pluginBaseUrlSymbol,
+  getPluginAssetUrl,
   isValidPackageName,
   loadPlugin,
   serializePlugin,
   deserializePlugin,
 } from './src/pluginHelper.js';
+export { getStateFromURL, createEmptyState, setStateToUrl } from './src/state.js';
 export { default as VcsUiApp } from './src/vcsUiApp.js';
 export { default as Icons } from './src/icons/+all.js';
@@ -74,10 +105,13 @@ export { default as VcsButton } from './src/components/buttons/VcsButton.vue';
 export { default as VcsActionButtonList } from './src/components/buttons/VcsActionButtonList.vue';
 export { default as VcsTooltip } from './src/components/notification/VcsTooltip.vue';
+export { default as VcsTable } from './src/components/tables/VcsTable.vue';
 // export { default as VcsConfirmationDialog } from './src/components/dialogs/VcsConfirmationDialog.vue';
 export { default as VcsLabel } from './src/components/form-inputs-controls/VcsLabel.vue';
 export { default as VcsCheckbox } from './src/components/form-inputs-controls/VcsCheckbox.vue';
+export { default as VcsRadio } from './src/components/form-inputs-controls/VcsRadio.vue';
 // export { default as VcsColorPicker } from './src/components/form-inputs-controls/VcsColorPicker.vue';
 export { default as VcsFormSection } from './src/components/form-inputs-controls/VcsFormSection.vue';
 // export { default as VcsInputColumnCoordinates } from './src/components/form-inputs-controls/VcsInputColumnCoordinates.vue';
@@ -89,7 +123,7 @@ export { default as VcsTextArea } from './src/components/form-inputs-controls/Vc
 export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
-export { default as VcsActionList, validateActions } from './src/components/lists/VcsActionList.vue';
+export { default as VcsActionList, validateAction, validateActions } from './src/components/lists/VcsActionList.vue';
 // export { default as VcsEndlessList } from './src/components/lists/VcsEndlessList.vue';
 export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
 export { default as VcsTreeviewLeaf } from './src/components/lists/VcsTreeviewLeaf.vue';

package/lib/vue.js CHANGED Viewed

	@@ -1 +1,2 @@
1	+ export * from 'vue';
1 2	export { default } from 'vue';

package/map.config.json CHANGED Viewed

@@ -3,8 +3,8 @@
     {
       "name": "@vcmap/project-selector",
       "entry": "plugins/@vcmap/project-selector/index.js",
-      "selected": "VC Map Base",
-      "selectedContexts": ["development"],
+      "selected": "",
+      "selectedContexts": ["development", "codeLists"],
       "open": true,
       "projects": [
         {
@@ -15,11 +15,10 @@
           ]
         },
         {
-          "name": "VC Map Berlin",
-          "description": "Berlin DEMO (Standard Hosting Layout)",
+          "name": "VC Map Demo",
+          "description": "VC Map Demo www.virtualcitymap.de",
           "contexts": [
-            { "configUrl": "config/base.config.json" },
-            { "configUrl": "config/berlin.config.json" }
+            { "configUrl": "config/www.config.json" }
           ]
         }
       ],
@@ -28,6 +27,16 @@
           "name": "development",
           "description": "context containing examples, showcases and other stuff",
           "configUrl": "config/dev.config.json"
+        },
+        {
+          "name": "codeLists",
+          "description": "context containing code lists for key and attribute mapping",
+          "configUrl": "config/codes.config.json"
+        },
+        {
+          "name": "graphFeatureInfo",
+          "description": "context adding a graph Feature Info view",
+          "configUrl": "config/graphFeatureInfo.config.json"
         }
       ]
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.10",
+  "version": "5.0.0-rc.13",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -42,11 +42,10 @@
   },
   "peerDependencies": {
     "@vcmap/cesium": "~1.93.1",
-    "@vcmap/core": "^5.0.0-rc.13",
-    "@vue/composition-api": "~1.4.5",
+    "@vcmap/core": "^5.0.0-rc.20",
     "ol": "~6.13.0",
-    "vue": "~2.6.14",
-    "vuetify": "~2.6.3"
+    "vue": "~2.7.3",
+    "vuetify": "~2.6.7"
   },
   "devDependencies": {
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.1",
@@ -61,8 +60,8 @@
     "rollup-plugin-strip-pragma": "^1.0.0",
     "sass": "1.32.13",
     "typescript": "^4.2.4",
-    "unplugin-vue-components": "^0.19.6",
-    "vite": "^2.9.12",
+    "unplugin-vue-components": "^0.21.1",
+    "vite": "^2.9.13",
     "vite-plugin-vue2": "^2.0.1",
     "vitest": "^0.14.2"
   },
@@ -122,5 +121,15 @@
     "node": "^16.14.0",
     "npm": "^8.3.1"
   },
-  "type": "module"
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./config/*.json": "./config/*.json",
+    "./src/assets/logo.svg": "./src/assets/logo.svg",
+    "./src/assets/logo-mobile.svg": "./src/assets/logo-mobile.svg",
+    "./build/buildHelpers.js": "./build/buildHelpers.js",
+    "./build/getPluginProxies.js": "./build/getPluginProxies.js",
+    "./build/determineHost.js": "./build/determineHost.js",
+    "./src/styles/variables.scss": "./src/styles/variables.scss"
+  }
 }

package/plugins/@vcmap/create-link/fallbackCreateLink.vue ADDED Viewed

@@ -0,0 +1,71 @@
+<template>
+  <v-sheet class="d-flex flew-row align-center pl-2 pr-2">
+    <VcsTextField
+      :value="localLink"
+      class="d-flex col-10 pa-0 mr-2"
+    />
+    <div class="d-flex col-2 justify-end pa-0">
+      <VcsButton
+        small
+        icon="mdi-content-copy"
+        class="mr-2"
+        @click="copy"
+        :title="$t('createLink.copyToClipboard')"
+      />
+      <VcsButton
+        small
+        icon="mdi-refresh"
+        class="mr-2"
+        @click="refresh"
+        :title="$t('createLink.refreshTooltip')"
+      />
+    </div>
+  </v-sheet>
+</template>
+<script>
+  import { VcsTextField, VcsButton, setStateToUrl } from '@vcmap/ui';
+  import { getCurrentInstance, inject, ref } from 'vue';
+  export default {
+    name: 'FallbackCreateLink',
+    props: {
+      link: {
+        type: String,
+        required: true,
+      },
+    },
+    components: {
+      VcsTextField,
+      VcsButton,
+    },
+    setup(props) {
+      const localLink = ref(props.link);
+      const app = inject('vcsApp');
+      const { proxy } = getCurrentInstance();
+      const copy = () => {
+        const element = proxy.$el.querySelector('input');
+        element.select();
+        document.execCommand('copy');
+      };
+      const refresh = async () => {
+        const state = await app.getState(true);
+        const url = new URL(window.location.href);
+        setStateToUrl(state, url);
+        localLink.value = url.toString();
+      };
+      return {
+        copy,
+        refresh,
+        localLink,
+      };
+    },
+  };
+</script>
+<style scoped>
+</style>

package/plugins/@vcmap/create-link/index.js ADDED Viewed

@@ -0,0 +1,83 @@
+import { ButtonLocation, setStateToUrl, WindowSlot } from '@vcmap/ui';
+import FallbackCreateLink from './fallbackCreateLink.vue';
+const name = '@vcmap/create-link';
+const fallBackWindowId = 'create-link-fallback-window';
+function createFallbackWindow(app, link) {
+  app.windowManager.remove(fallBackWindowId);
+  app.windowManager.add(
+    {
+      id: fallBackWindowId,
+      component: FallbackCreateLink,
+      slot: WindowSlot.DYNAMIC_RIGHT,
+      state: {
+        headerTitle: 'createLink.windowTitle',
+        headerIcon: 'mdi-share-variant',
+      },
+      props: {
+        link,
+      },
+    },
+    name,
+  );
+}
+export default function createLink() {
+  return {
+    name,
+    version: '1.0.0',
+    i18n: {
+      de: {
+        createLink: {
+          title: 'Link Kopieren',
+          windowTitle: 'Applikationslink',
+          tooltip: 'Dialog zum kopieren des Applikationslinks anzeigen.',
+          copyToClipboard: 'Applikationslink in Zwischenablage kopieren',
+          refreshTooltip: 'Applikationslink aktualisieren',
+        },
+      },
+      en: {
+        createLink: {
+          title: 'Copy Link',
+          windowTitle: 'Application Link',
+          tooltip: 'Open dialog to copy application link to clipboard',
+          copyToClipboard: 'Copy application link to clipboard',
+          refreshTooltip: 'Refresh application link',
+        },
+      },
+    },
+    /**
+     * @param {VcsUiApp} app
+     */
+    initialize(app) {
+      const title = navigator.clipboard ?
+        'createLink.copyToClipboard' :
+        'createLink.tooltip';
+      app.navbarManager.add(
+        {
+          action: {
+            name: 'createLink.title',
+            title,
+            icon: 'mdi-share-variant',
+            /**
+             * @returns {Promise<void>}
+             */
+            async callback() {
+              const state = await app.getState(true);
+              const url = new URL(window.location.href);
+              setStateToUrl(state, url);
+              if (navigator.clipboard) {
+                await navigator.clipboard.writeText(url.toString());
+              } else {
+                createFallbackWindow(app, url.toString());
+              }
+            },
+          },
+        },
+        name,
+        ButtonLocation.SHARE,
+      );
+    },
+  };
+}

package/plugins/@vcmap/create-link/package.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "name": "@vcmap/create-link",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0",
+  "main": "index.js"
+}

package/plugins/@vcmap/pluginExample/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ref, reactive, watch } from '@vue/composition-api';
+import { ref, reactive, watch } from 'vue';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
@@ -157,7 +157,7 @@ export default function (config) {
         {
           id: 'pluginExample',
           component: pluginExampleComponent,
-          slot: WindowSlot.STATIC,
+          slot: WindowSlot.DYNAMIC_LEFT,
           state: {
             headerTitle: 'pluginExample.select',
             headerIcon: '$vcsCircle',

package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue CHANGED Viewed

@@ -251,6 +251,20 @@
               />
             </v-col>
           </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsRadio
+                :dense="dense"
+                :items="[...selectOptions, { label: 'Radio Option E colored', color: 'primary', value: 'E' }]"
+                v-model="state.selected"
+                row
+              />
+            </v-col>
+          </v-row>
           <v-row
             :dense="dense"
             no-gutters
@@ -287,6 +301,7 @@
       :disabled="!isValid"
       :tooltip="'Log current state in console'"
       :has-update="isValid && newUpdate"
+      class="mx-2 mb-2"
     >
       Log State
     </VcsButton>
@@ -299,10 +314,11 @@
   </v-form>
 </template>
 <script>
-  import { inject, ref, watch } from '@vue/composition-api';
+  import { inject, ref, watch } from 'vue';
   import {
     VcsSelect,
     VcsCheckbox,
+    VcsRadio,
     VcsButton,
     VcsTextField,
     VcsFormattedNumber,
@@ -318,6 +334,7 @@
       VcsSelect,
       VcsTextField,
       VcsCheckbox,
+      VcsRadio,
       VcsFormattedNumber,
       VcsFormSection,
       VcsLabel,
@@ -342,8 +359,8 @@
       ].join('\n');
       return {
-        showSection: true,
-        dense: true,
+        showSection: ref(true),
+        dense: ref(true),
         helpExample,
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,

package/plugins/@vcmap/project-selector/ProjectSelectorComponent.vue CHANGED Viewed

@@ -46,7 +46,7 @@
   </v-container>
 </template>
 <script>
-  import { inject } from '@vue/composition-api';
+  import { inject } from 'vue';
   import ContextsListComponent from './ContextsListComponent.vue';
   export default {

package/plugins/@vcmap/project-selector/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { ButtonLocation, createToggleAction } from '@vcmap/ui';
 import { Context } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';

package/plugins/@vcmap/project-selector/package.json CHANGED Viewed

@@ -8,7 +8,6 @@
   },
   "peerDependencies": {
     "@vcmap/ui": "^5.0.0-rc.11",
-    "@vcmap/core": "^5.0.0-rc.5",
-    "@vue/composition-api": "^1.4.5"
+    "@vcmap/core": "^5.0.0-rc.5"
   }
 }

package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue CHANGED Viewed

@@ -64,7 +64,7 @@
   </v-card>
 </template>
 <script>
-  import { inject } from '@vue/composition-api';
+  import { inject } from 'vue';
   export default {
     name: 'ThemeChanger',

package/plugins/@vcmap/theme-changer/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { check } from '@vcsuite/check';
 import { ButtonLocation, createToggleAction, vuetify } from '@vcmap/ui';
 import ThemeChangerComponent from './ThemeChangerComponent.vue';

package/plugins/@vcmap/theme-changer/package.json CHANGED Viewed

@@ -6,7 +6,6 @@
     "@vcsuite/check": "^1.1.2"
   },
   "peerDependencies": {
-    "@vcmap/ui": "5.0.0-rc.2",
-    "@vue/composition-api": "^1.4.5"
+    "@vcmap/ui": "^5.0.0-rc.2"
   }
 }

package/plugins/categoryTest/Categories.vue CHANGED Viewed

@@ -13,6 +13,7 @@
     <span>
       <VcsButton icon="$vcsPlus" @click="newDialog = true" />
       <VcsButton icon="$vcsExport" @click="uploadDialog = true" />
+      <VcsButton @click="addManagedCategories"> Add Categories To Manager </VcsButton>
     </span>
     <v-dialog
@@ -56,8 +57,9 @@
 </template>
 <script>
-  import { inject, ref, onUnmounted } from '@vue/composition-api';
+  import { inject, ref, onUnmounted } from 'vue';
   import { VcsButton } from '@vcmap/ui';
+  import { GeoJSONLayer } from '@vcmap/core';
   import Category from './Category.vue';
   export default {
@@ -133,6 +135,92 @@
             console.error('not a valid JSON');
           }
         },
+        async addManagedCategories() {
+          if (!app.categories.hasKey('layers')) {
+            const layersCat = await app.categories.requestCategory({
+              name: 'layers',
+              type: 'AppBackedCategory',
+              collectionName: 'layers',
+              title: 'categories.layers',
+            });
+            const actions = [{
+              name: 'mySuperAction',
+              icon: 'mdi-plus',
+              callback: () => {
+                layersCat.collection.add(new GeoJSONLayer({
+                  features: [
+                    {
+                      type: 'Feature',
+                      properties: {},
+                      geometry: {
+                        type: 'Polygon',
+                        coordinates: [
+                          [
+                            [
+                              13.376044753386196,
+                              52.51700747314845,
+                              34.434221826595746,
+                            ],
+                            [
+                              13.375890137534464,
+                              52.51683412207231,
+                              34.43535288837092,
+                            ],
+                            [
+                              13.376141126603242,
+                              52.51641627693124,
+                              34.66410424636929,
+                            ],
+                            [
+                              13.376773170085109,
+                              52.516279904694215,
+                              34.73478984011562,
+                            ],
+                            [
+                              13.376887028670879,
+                              52.51695485856382,
+                              34.72412287410914,
+                            ],
+                            [
+                              13.376044753386196,
+                              52.51700747314845,
+                              34.434221826595746,
+                            ],
+                          ],
+                        ],
+                      },
+                    }],
+                }));
+              },
+            }];
+            app.categoryManager.addCategory(layersCat.name, '@vcmap/categoryTest', actions);
+            app.categoryManager.addMappingFunction((item, category) => {
+              return category.name === 'layers';
+            }, (item, category, treeViewItem) => {
+              // eslint-disable-next-line no-console
+              const action = {
+                name: 'mySuperAction',
+                icon: '$vcsSimpleCircleFilled',
+                callback: () => {
+                  console.log(item, category, treeViewItem);
+                },
+              };
+              treeViewItem.actions.push(action);
+              treeViewItem.clickable = true;
+              treeViewItem.clicked = () => {
+                if (!item.active) item.activate(); else item.deactivate();
+              };
+              const action2 = {
+                name: 'mySuperAction3',
+                icon: 'mdi-minus',
+                callback: () => {
+                  category.collection.remove(item);
+                },
+              };
+              treeViewItem.actions.push(action2);
+            }, ['layers'], '@vcmap/categoryTest');
+          }
+        },
       };
     },
   };

package/plugins/categoryTest/Category.vue CHANGED Viewed

@@ -48,7 +48,7 @@
 </template>
 <script>
-  import { inject, nextTick, ref } from '@vue/composition-api';
+  import { inject, nextTick, ref } from 'vue';
   import { VcsButton } from '@vcmap/ui';
   import { getObjectFromClassRegistry } from '@vcmap/core';

package/plugins/example/index.js CHANGED Viewed

@@ -40,30 +40,17 @@ export default async function (config) {
         '@vcmap/example',
         ButtonLocation.TOOL,
       );
-      const buttonComponents = [
-        {
-          id: 'distance3D',
-          action: {
-            name: 'distance3D',
-            title: '3D distance',
-            icon: '$vcs3dDistance',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
-        },
-        {
-          id: 'area3D',
-          action: {
-            name: 'area3D',
-            title: '3D area',
-            icon: '$vcs3dArea',
-            active: false,
-            callback() { this.active = !this.active; },
-          },
+      const miscGroup = app.toolboxManager.get('miscellaneous');
+      miscGroup.buttonManager.add({
+        id: 'example',
+        action: {
+          name: 'example',
+          title: 'example',
+          icon: 'mdi-circle-small',
+          active: false,
+          callback() { this.active = !this.active; },
         },
-      ];
-      const measurementGroup = app.toolboxManager.requestGroup('measurement');
-      buttonComponents.forEach(c => measurementGroup.buttonManager.add(c, '@vcmap/example'));
+      }, '@vcmap/example');
     },
     destroy() {
       if (this._destroyAction) {