@vcmap/ui 5.0.0-rc.14 → 5.0.0-rc.16

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

@@ -1,37 +1,19 @@
 <template>
   <v-form v-model="isValid">
     <VcsFormSection
-      title="VcsFormSection"
-      :title-actions="[
-        {
-          name: 'denseSelection',
-          title: 'change row height',
-          icon: dense ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical',
-          callback: () => this.dense = !this.dense
-        },
-        { name: 'noIcon', title: 'another action without icon', callback: () => {} },
-        {
-          name: 'help',
-          title: helpExample,
-          icon: 'mdi-help-circle',
-          callback: () => {},
-        },
-        {
-          name: 'toggleSection',
-          title: 'toggle section',
-          icon: showSection ? '$vcsMinus' : '$vcsPlus',
-          callback: () => this.showSection = !this.showSection
-        },
-        {
-          name: 'toggleIcon',
-          title: 'toggle switch example',
-          icon: showSection ? 'mdi-toggle-switch' : 'mdi-toggle-switch-off',
-          active: showSection,
-          callback: () => this.showSection = !this.showSection
-        },
-        { name: 'alert', icon: 'mdi-message-text', callback: alertAction },
-      ]"
+      heading="VcsFormSection Select & Text Inputs"
+      :header-actions="actions"
     >
+      <template #help>
+        <ol>
+          <li>{{ $t('pluginExample.help1') }}:</li>
+          <span>{{ $t('pluginExample.help1desc') }}</span>
+          <li>{{ $t('pluginExample.help2') }}:</li>
+          <span>{{ $t('pluginExample.help2desc') }}</span>
+          <li>{{ $t('pluginExample.help3') }}:</li>
+          <span>{{ $t('pluginExample.help3desc') }}</span>
+        </ol>
+      </template>
       <template #default v-if="showSection">
         <v-container class="pa-2">
           <v-row
@@ -107,6 +89,74 @@
               />
             </v-col>
           </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="emailInput" :dense="dense">
+                Email
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="emailInput"
+                :dense="dense"
+                type="email"
+                :rules="[isValidEmail]"
+                v-model="state.email"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="prependedInput" :dense="dense">
+                String With Icon
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="prependedInput"
+                :dense="dense"
+                prepend-icon="mdi-map-marker"
+                v-model="state.prependedInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="fileInput" :dense="dense">
+                Email
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="fileInput"
+                :dense="dense"
+                type="file"
+                multiple
+                v-model="state.files"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+    <VcsFormSection
+      heading="VcsFormSection Number Inputs"
+      help-text="pluginExample.help"
+    >
+      <template #default>
+        <v-container>
           <v-row
             :dense="dense"
             no-gutters
@@ -199,58 +249,14 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            :dense="dense"
-            no-gutters
-            align="center"
-          >
-            <v-col cols="1" class="px-1">
-              <VcsLabel html-for="textInput" :dense="dense" class="text-caption">
-                1
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsSelect
-                :items="['A', 'B', 'C']"
-                :dense="dense"
-              />
-            </v-col>
-            <v-col>
-              <VcsSelect
-                :items="['A', 'B', 'C']"
-                :dense="dense"
-                multiple
-              />
-            </v-col>
-            <v-col>
-              <VcsTextField
-                id="textInput"
-                clearable
-                :dense="dense"
-                v-model="state.conditionalInput"
-              />
-            </v-col>
-          </v-row>
-          <v-row
-            :dense="dense"
-            no-gutters
-            align="center"
-          >
-            <v-col>
-              <VcsLabel html-for="emailInput" :dense="dense">
-                Email
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsTextField
-                id="emailInput"
-                :dense="dense"
-                type="email"
-                :rules="[isValidEmail]"
-                v-model="state.email"
-              />
-            </v-col>
-          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+    <VcsFormSection
+      heading="VcsFormSection Radio & Checkbox"
+    >
+      <template #default>
+        <v-container>
           <v-row
             :dense="dense"
             no-gutters
@@ -296,6 +302,54 @@
         </v-container>
       </template>
     </vcsformsection>
+    <VcsFormSection
+      heading="VcsFormSection Mixed Inputs"
+    >
+      <template #default>
+        <v-container>
+          <v-row
+            :dense="dense"
+            align="center"
+          >
+            <v-col cols="1">
+              <VcsLabel html-for="textInput" :dense="dense" class="text-caption">
+                1
+              </VcsLabel>
+            </v-col>
+            <v-col cols="3">
+              <VcsSelect
+                :items="[
+                  {value: 'one', i18n: 'pluginExample.numbers.one'},
+                  {value: 'two', i18n: 'pluginExample.numbers.two'},
+                  {value: 'three', i18n: 'pluginExample.numbers.three'}]"
+                :item-text="item => item.i18n"
+                :dense="dense"
+              />
+            </v-col>
+            <v-col cols="3">
+              <VcsSelect
+                :items="[
+                  {value: 'Anna', fullName: 'Annabella'},
+                  {value: 'Bella', fullName: 'Belladonna'},
+                  {value: 'Claudi', fullName: 'Claudine'}]"
+                :item-text="item => item.fullName"
+                :dense="dense"
+                multiple
+                v-model="state.selectedMultiple"
+              />
+            </v-col>
+            <v-col cols="5">
+              <VcsTextField
+                id="textInput"
+                clearable
+                :dense="dense"
+                v-model="state.conditionalInput"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
     <VcsButton
       @click="logState(state)"
       :disabled="!isValid"
@@ -325,6 +379,7 @@
     VcsFormSection,
     VcsLabel,
   } from '@vcmap/ui';
+  import { VCol, VContainer, VForm, VRow } from 'vuetify/lib';
   import { isValidText, conditionalTest, isValidEmail } from './validation.js';
 
   export default {
@@ -338,11 +393,23 @@
       VcsFormattedNumber,
       VcsFormSection,
       VcsLabel,
+      VForm,
+      VRow,
+      VCol,
+      VContainer,
     },
     props: {
-      windowId: {
-        type: String,
-        default: '',
+      actions: {
+        type: Array,
+        required: true,
+      },
+      dense: {
+        type: Object,
+        required: true,
+      },
+      showSection: {
+        type: Object,
+        required: true,
       },
     },
     setup() {
@@ -351,17 +418,7 @@
       const newUpdate = ref(true);
       watch(plugin.state, () => { newUpdate.value = true; });
 
-      const helpExample = [
-        'Please select an option.',
-        'If Option A is chosen, input of ConditionalInput must be \'test\'.',
-        'InitialTextInput stays in loading state as long as the initial text is not changed.',
-        'VcsFormattedNumber rounds the NumberInput to one decimal digit.',
-      ].join('\n');
-
       return {
-        showSection: ref(true),
-        dense: ref(true),
-        helpExample,
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,
         // do not put the whole config here, since it would become reactive
@@ -377,9 +434,6 @@
           console.log(plugin.getSerializedState());
           newUpdate.value = false;
         },
-        alertAction() {
-          alert('alert');
-        },
       };
     },
   };

package/plugins/@vcmap/project-selector/ContextsListComponent.vue

@@ -33,10 +33,17 @@
 
 <script>
   import { VcsTooltip } from '@vcmap/ui';
+  import { VChip, VContainer, VIcon, VList } from 'vuetify/lib';
 
   export default {
     name: 'ContextsListComponent',
-    components: { VcsTooltip },
+    components: {
+      VcsTooltip,
+      VContainer,
+      VList,
+      VChip,
+      VIcon,
+    },
     props: {
       contexts: {
         type: Array,

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

@@ -47,11 +47,37 @@
 </template>
 <script>
   import { inject } from 'vue';
+  import {
+    VList,
+    VContainer,
+    VCard,
+    VIcon,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VListItemAction,
+    VAvatar,
+    VDivider,
+  } from 'vuetify/lib';
   import ContextsListComponent from './ContextsListComponent.vue';
 
   export default {
     name: 'ProjectSelector',
-    components: { ContextsListComponent },
+    components: {
+      ContextsListComponent,
+      VList,
+      VContainer,
+      VCard,
+      VIcon,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VListItemAction,
+      VAvatar,
+      VDivider,
+    },
     setup() {
       const app = inject('vcsApp');
       const plugin = app.plugins.getByKey('@vcmap/project-selector');

package/plugins/@vcmap/search-nominatim/LICENSE.md

@@ -0,0 +1,14 @@
+
+Copyright 2022 support@vc.systems
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 
+and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS 
+OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/plugins/@vcmap/search-nominatim/README.md

@@ -0,0 +1,2 @@
+# @vcmap/search-nominatim
+describe your plugin

package/plugins/@vcmap/search-nominatim/config.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vcmap/search-nominatim",
+
+}

package/plugins/@vcmap/search-nominatim/index.js

@@ -0,0 +1,26 @@
+import { version, name } from './package.json';
+import Nominatim from './nominatim.js';
+
+
+/**
+ * @param {NominatimSearchOptions} config - the configuration of this plugin instance, passed in from the app.
+ * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<T>}
+ * @template {Object} T
+ * @template {Object} S
+ */
+export default function SearchNominatim(config) {
+  return {
+    _instance: null,
+    _app: null,
+    get name() { return name; },
+    get version() { return version; },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     */
+    initialize(vcsUiApp) {
+      this._instance = new Nominatim(config);
+      this._app = vcsUiApp;
+      vcsUiApp.search.add(this._instance, name);
+    },
+  };
+}

package/plugins/@vcmap/search-nominatim/nominatim.js

@@ -0,0 +1,170 @@
+import { Extent, parseGeoJSON, wgs84Projection } from '@vcmap/core';
+import { AddressBalloonFeatureInfoView, featureInfoViewSymbol } from '@vcmap/ui';
+
+/**
+ *
+ * @param {Object} item - response item from the search request
+ * @returns {ResultItem}
+ */
+function createResultItem(item) {
+  const data = parseGeoJSON(item.geojson);
+  const feature = data.features[0];
+  feature.setProperties(item.address);
+  const title = item.display_name;
+  feature[featureInfoViewSymbol] = new AddressBalloonFeatureInfoView({
+    type: 'AddressBalloonFeatureInfoView',
+    name: 'NominatimSearchBalloon',
+    balloonSubtitle: '',
+    addressName: 'building',
+    street: 'road',
+    number: 'house_number',
+    city: 'city',
+    zip: 'postcode',
+    country: 'country',
+  });
+
+  return {
+    title,
+    feature,
+  };
+}
+
+/**
+ * @typedef {Object} NominatimSearchOptions
+ * @property {string} [name="Nominatim"]
+ * @property {string} [url="https://nominatim.openstreetmap.org/search"]
+ * @property {string|undefined} city
+ * @property {string|undefined} state
+ * @property {string|undefined} [countrycode="de"]
+ * @property {import("@vcmap/core").Extent.Options|undefined} extent
+ * @property {number|undefined} [limit=20]
+ * @api
+ */
+
+/**
+ * @class
+ * @implements {SearchImpl}
+ */
+class Nominatim {
+  /**
+   * @returns {NominatimSearchOptions}
+   */
+  static getDefaultOptions() {
+    return {
+      name: 'Nominatim',
+      url: 'https://nominatim.openstreetmap.org/search',
+      city: undefined,
+      state: undefined,
+      countrycode: 'de',
+      extent: undefined,
+      limit: 20,
+    };
+  }
+
+  /**
+   * @param {NominatimSearchOptions} options
+   */
+  constructor(options) {
+    /**
+     * @type {NominatimSearchOptions}
+     */
+    const defaultOptions = Nominatim.getDefaultOptions();
+
+    /** @type {string|null} */
+    this.name = options.name ?? defaultOptions.name;
+
+    /** @type {string|Object} */
+    this.url = options.url ?? defaultOptions.url;
+
+    /** @type {string|null} */
+    this.city = options.city ?? null;
+
+    /** @type {string|null} */
+    this.state = options.state ?? null;
+
+    /** @type {string} */
+    this.countrycode = options.countrycode ?? defaultOptions.countrycode;
+
+    /** @type {import("@vcmap/core").Extent|null} */
+    this.extent = options.extent ? new Extent(options.extent) : null;
+
+    /** @type {number} */
+    this.limit = options.limit ?? defaultOptions.limit;
+    /**
+     * @type {AbortController}
+     * @private
+     */
+    this._controller = new AbortController();
+  }
+
+  /**
+   * @param {string} q - search value
+   * @returns {Array<ResultItem>}
+   */
+  async search(q) {
+    const params = {
+      q,
+      countrycodes: this.countrycode,
+      format: 'json',
+      polygon_geojson: 1,
+      addressdetails: 1,
+      limit: this.limit,
+    };
+
+    if (this.city) {
+      params.q += `,${this.city}`;
+    }
+
+    if (this.state) {
+      params.q += `,${this.state}`;
+    }
+
+    if (this.extent) {
+      params.viewbox = this.extent.getCoordinatesInProjection(wgs84Projection).join(',');
+      params.bounded = 1;
+    }
+
+    const url = new URL(this.url);
+    url.search = new URLSearchParams(params).toString();
+
+    const { signal } = this._controller.signal;
+    const response = await fetch(url, { signal });
+    const results = await response.json();
+    return results.map(createResultItem);
+  }
+
+  abort() {
+    this._controller.abort();
+  }
+
+  toJSON() {
+    /**
+     * @type {NominatimSearchOptions}
+     */
+    const defaultOptions = Nominatim.getDefaultOptions();
+    const config = {};
+
+    if (this.url !== defaultOptions.url) {
+      config.url = this.url;
+    }
+    if (this.city !== defaultOptions.city) {
+      config.city = this.city;
+    }
+    if (this.state !== defaultOptions.state) {
+      config.state = this.state;
+    }
+    if (this.countrycode !== defaultOptions.countrycode) {
+      config.countrycode = this.countrycode;
+    }
+    if (this.extent && this.extent !== defaultOptions.extent) {
+      config.extent = this.extent.toJSON();
+    }
+    if (this.limit !== defaultOptions.limit) {
+      config.limit = this.limit;
+    }
+
+    return config;
+  }
+}
+
+export default Nominatim;

package/plugins/@vcmap/search-nominatim/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@vcmap/search-nominatim",
+  "version": "1.0.0",
+  "description": "A search plugin for OSM Nominatim",
+  "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "vcmplugin build",
+    "build": "vcmplugin build",
+    "pack": "vcmplugin pack",
+    "start": "vcmplugin serve",
+    "preview": "vcmplugin preview",
+    "buildStagingApp": "vcmplugin buildStagingApp",
+    "lint": "eslint \"{src,tests}/**/*.{js,vue}\""
+  },
+  "author": "support@vc.systems",
+  "license": "MIT",
+  "dependencies": {},
+  "peerDependencies": {
+    "@vcmap/core": "^5.0.0-rc.20"
+  },
+  "keywords": [
+    "vcmap",
+    "plugin"
+  ],
+  "files": [
+    "src/",
+    "dist/",
+    "plugin-assets/",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./dist": "./dist/index.js"
+  },
+  "eslintIgnore": [
+    "node_modules"
+  ],
+  "eslintConfig": {
+    "root": true,
+    "extends": "@vcsuite/eslint-config/vue"
+  }
+}

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

@@ -65,9 +65,35 @@
 </template>
 <script>
   import { inject } from 'vue';
+  import {
+    VCard,
+    VCardText,
+    VChip,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemAction,
+    VAvatar,
+    VIcon,
+    VDivider,
+    VSwitch,
+  } from 'vuetify/lib';
 
   export default {
     name: 'ThemeChanger',
+    components: {
+      VCard,
+      VCardText,
+      VChip,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemAction,
+      VAvatar,
+      VIcon,
+      VDivider,
+      VSwitch,
+    },
     setup() {
       const app = inject('vcsApp');
       const plugin = app.plugins.getByKey('@vcmap/theme-changer');