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

package/plugins/simple-graph/SimpleGraphComponent.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-sparkline
+    padding="24"
+    stroke-linecap="round"
+    :show-labels="labels.length > 0"
+    :labels="labels"
+    :type="graph"
+    :color="color"
+    :gradient="gradient"
+    :fill="fill"
+    :smooth="smooth"
+    :value="values"
+  />
+</template>
+<script>
+
+/**
+ * @description A simple table view for feature attributes using {@link https://vuetifyjs.com/en/api/v-sparkline/#props|vuetify v-sparkline }
+ * @vue-prop {Object} attributes - the feature's attributes
+ * @vue-prop {string[]} [labels] - optional array of strings labeling all data points
+ * @vue-prop {string} [graph='trend'] - Choose between a trendline or bars
+ * @vue-prop {string} [color='primary'] - optional color of the sparkline of the graph
+ * @vue-prop {string[]} [gradient] - optional array of colors to use as a linear-gradient
+ * @vue-prop {boolean} [fill=false] - if true, filled area below sparkline
+ * @vue-prop {boolean|number|string} [smooth=true] - optional number of px to use as a corner radius. true defaults to 8, false is 0
+ * @vue-computed {number[]} values - numeric values for the graph derived from the attributeKeys
+ */
+  export default {
+    name: 'SimpleGraphComponent',
+    props: {
+      attributes: {
+        type: Object,
+        required: true,
+      },
+      labels: {
+        type: Array,
+        default: () => [],
+      },
+      graph: {
+        type: String,
+        default: 'trend',
+      },
+      color: {
+        type: String,
+        default: 'primary',
+      },
+      gradient: {
+        type: Array,
+        default: () => [],
+      },
+      fill: {
+        type: Boolean,
+        default: false,
+      },
+      smooth: {
+        type: Number,
+        default: 8,
+      },
+    },
+    computed: {
+      values() {
+        return Object.values(this.attributes);
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/plugins/simple-graph/index.js

@@ -0,0 +1,17 @@
+import SimpleGraphView from './simpleGraphView.js';
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function () {
+  return {
+    name: '@vcmap/simpleGraph',
+    onVcsAppMounted(app) {
+      /** Example for registering custom component on FeatureInfo */
+      app.featureInfo.classRegistry.registerClass(
+        app.dynamicContextId,
+        SimpleGraphView.className,
+        SimpleGraphView,
+      );
+    },
+  };
+}

package/plugins/simple-graph/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vcmap/simple-graph",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0",
+  "dependencies": {
+    "@vcsuite/parsers": "^1.0.1"
+  },
+  "peerDependencies": {
+    "@vcmap/ui": "5.0.0-rc.2"
+  }
+}

package/plugins/simple-graph/simpleGraphView.js

@@ -0,0 +1,76 @@
+import { parseBoolean } from '@vcsuite/parsers';
+import { AbstractFeatureInfoView } from '@vcmap/ui';
+import SimpleGraphComponent from './SimpleGraphComponent.vue';
+
+/**
+ * @typedef {FeatureInfoViewOptions} SimpleGraphFeatureInfoViewOptions
+ * @property {string[]|number[]} [labels] - optional array of strings labeling all data points
+ * @property {string} [graph='trend'] - Choose between a trendline or bars
+ * @property {string} [color='primary'] - optional color of the sparkline of the graph
+ * @property {string[]} [gradient] - optional array of colors to use as a linear-gradient
+ * @property {boolean} [fill=false] - if true, filled area below sparkline
+ * @property {number|string} [smooth=8] - optional number of px to use as a corner radius
+ */
+
+/**
+ * @class
+ * @description A graph view.
+ */
+class SimpleGraphView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'SimpleGraphView'; }
+
+  /**
+   * @param {SimpleGraphFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, SimpleGraphComponent);
+    /**
+     * @type {string[]|number[]}
+     */
+    this.labels = options.labels || [];
+    /**
+     * @type {string}
+     */
+    this.graph = options.graph || 'trend';
+    /**
+     * @type {string}
+     */
+    this.color = options.color || 'primary';
+    /**
+     * @type {string[]}
+     */
+    this.gradient = options.gradient || [];
+    /**
+     * @type {boolean}
+     */
+    this.fill = parseBoolean(options.fill, false);
+    /**
+     * @type {number|string}
+     */
+    this.smooth = options.smooth ?? 8;
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {FeatureInfoProps}
+   */
+  getProperties({ feature }, layer) {
+    return {
+      featureId: feature.getId(),
+      layerName: layer.name,
+      attributes: this.getAttributes(feature),
+      labels: this.labels,
+      graph: this.graph,
+      color: this.color,
+      gradient: this.gradient,
+      fill: this.fill,
+      smooth: this.smooth,
+    };
+  }
+}
+
+export default SimpleGraphView;

package/plugins/test/editor.vue

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

package/plugins/test/index.js

@@ -1,6 +1,6 @@
 import VectorSource from 'ol/source/Vector.js';
 import { Feature } from 'ol';
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { ButtonLocation, createModalAction, createToggleAction, setStateToUrl, WindowSlot } from '@vcmap/ui';
 import { toolboxData } from './toolbox-data.js';
 import editor from './editor.vue';
 import windowManagerExample from './windowManagerExample.vue';
@@ -73,7 +73,37 @@ export default async function () {
         app.windowManager,
         '@vcmap/test',
       );
-      this._destroyActions = [destroyConfigEditorAction, destroyWindowAction, destroyIconAction];
+      const { action: clipboardDialogAction, destroy: destroryClipboardDialogAction } = createModalAction(
+        {
+          name: 'Create Link',
+        },
+        {
+          component: {
+            template: '<div>{{url}}</div>',
+            data() {
+              return {
+                url: '',
+              };
+            },
+            async created() {
+              this.url = setStateToUrl(await app.getState(true)).toString();
+            },
+          },
+          position: {
+            top: '50px',
+            left: '8%',
+            right: '8%',
+          },
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      this._destroyActions = [
+        destroyConfigEditorAction,
+        destroyWindowAction,
+        destroyIconAction,
+        destroryClipboardDialogAction,
+      ];
       const alertAction = {
         name: 'VC Systems',
         callback() {
@@ -101,10 +131,41 @@ export default async function () {
         '@vcmap/test',
         ButtonLocation.TOOL,
       );
+      app.navbarManager.add(
+        {
+          id: 'createLink',
+          action: clipboardDialogAction,
+        },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
       toolboxData.forEach(([{ id, icon, title, buttonComponents }, owner]) => {
         const group = app.toolboxManager.requestGroup(id, icon, title);
         buttonComponents.forEach(c => group.buttonManager.add(c, owner));
       });
+
+      app.contextMenuManager.addEventHandler(async (event) => {
+        const actions = [{
+          id: 'foo2',
+          name: 'Log Position',
+          icon: '$vcsInfo',
+          callback() {
+            console.log(event.positionOrPixel);
+          },
+        }];
+        if (event.feature) {
+          actions.push({
+            id: 'foo',
+            name: 'Log Feature',
+            icon: '$vcsInfo',
+            callback() {
+              console.log('feature right clicked');
+              console.log(event.feature);
+            },
+          });
+        }
+        return actions;
+      }, '@vcmap/test');
     },
     destroy() {
       if (this._destroyActions) {

package/plugins/test/windowManagerExample.vue

@@ -14,7 +14,7 @@
 
 </style>
 <script>
-  import { inject, onUnmounted, ref, computed } from '@vue/composition-api';
+  import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
 
   import { WindowSlot, VcsButton } from '@vcmap/ui';

package/src/actions/stateRefAction.js

@@ -1,4 +1,4 @@
-import { watch } from '@vue/composition-api';
+import { watch } from 'vue';
 import { check } from '@vcsuite/check';
 
 /**
@@ -30,7 +30,7 @@ const stateI18nMap = {
 /**
  * Creates an action
  * @param {string} name
- * @param {import("@vue/composition-api").Ref<StateActionState>} stateRef
+ * @param {import("vue").Ref<StateActionState>} stateRef
  * @param {function():void} callback
  * @returns {{ action: VcsAction, destroy: function():void }}
  */

package/src/actions/styleSelector.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-  import { computed, inject, onUnmounted, ref } from '@vue/composition-api';
+  import { computed, inject, onUnmounted, ref } from 'vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {

package/src/application/Navbar.vue

@@ -44,7 +44,13 @@
           </v-toolbar-items>
         </v-col>
         <v-col class="align-center d-flex justify-center">
-          <div v-if="$vuetify.breakpoint.mdAndUp" class="company-logo" />
+          <div v-if="$vuetify.breakpoint.mdAndUp" class="d-flex">
+            <img v-if="config.logo" class="logo" :src="config.logo" alt="Logo">
+            <div v-else class="company-logo logo" />
+            <div v-if="config.appTitle" class="ml-4">
+              {{ $t(config.appTitle) }}
+            </div>
+          </div>
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
           <v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
@@ -109,10 +115,14 @@
   .v-toolbar__items > div{
     gap: 8px;
   }
+  .logo {
+    max-height: 36px;
+    margin: 0 auto;
+  }
 </style>
 
 <script>
-  import { inject, ref, computed } from '@vue/composition-api';
+  import { inject, ref, computed } from 'vue';
   import { ButtonLocation, getActionsByLocation } from '../manager/navbarManager.js';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
   import VcsActionList from '../components/lists/VcsActionList.vue';
@@ -137,6 +147,7 @@
         projectActions: getActions(ButtonLocation.PROJECT),
         shareActions: getActions(ButtonLocation.SHARE),
         menuActions: getActions(ButtonLocation.MENU),
+        config: app.uiConfig.config,
       };
     },
   };