@vcmap/ui 5.0.0-rc.10

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

@@ -0,0 +1,374 @@
+<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 },
+      ]"
+    >
+      <template #default v-if="showSection">
+        <v-container class="pa-2">
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="selectInput" :dense="dense">
+                {{ $t('pluginExample.select') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsSelect
+                id="selectInput"
+                :items="selectOptions"
+                :dense="dense"
+                :rules="[conditionalTest(state.conditionalInput, state.selected)]"
+                v-model="state.selected"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="conditionalInput" :dense="dense">
+                ConditionalInput
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="conditionalInput"
+                clearable
+                :dense="dense"
+                :rules="[conditionalTest(state.conditionalInput, state.selected)]"
+                v-model="state.conditionalInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsTextField
+                :dense="dense"
+                v-model="initialTextInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="initialTextInput" :dense="dense">
+                InitialTextInput
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="initialTextInput"
+                :dense="dense"
+                :rules="[isValidText]"
+                :loading="state.initialTextInput === 'myInitialText'"
+                v-model="state.initialTextInput"
+                :error-messages="!state.checkboxInput ? ['manual error message depending on checkbox'] : undefined"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="numberInput" :dense="dense">
+                NumberInput
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="numberInput"
+                :dense="dense"
+                type="number"
+                step="10"
+                suffix="cm"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="formattedNumber" :dense="dense">
+                VcsFormattedNumber
+              </VcsLabel>
+            </v-col>
+            <v-col class="d-flex justify-end">
+              <VcsFormattedNumber
+                id="formattedNumber"
+                :value="state.numberInput"
+                unit="cm"
+                :fraction-digits="1"
+                :dense="dense"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col cols="1" class="px-1">
+              <VcsLabel html-for="coordinateX" :dense="dense">
+                X
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="coordinateX"
+                :dense="dense"
+                type="number"
+                step="10"
+                suffix="m"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+            <v-col cols="1" class="px-1">
+              <VcsLabel html-for="coordinateY" :dense="dense">
+                Y
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="coordinateY"
+                :dense="dense"
+                type="number"
+                step="10"
+                suffix="m"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+            <v-col cols="1" class="px-1">
+              <VcsLabel html-for="coordinateZ" :dense="dense">
+                Z
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="coordinateZ"
+                :dense="dense"
+                type="number"
+                step="10"
+                suffix="m"
+                v-model.number="state.numberInput"
+              />
+            </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-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsCheckbox
+                id="checkboxInput"
+                label="CheckboxInput"
+                :dense="dense"
+                :rules="[() => state.checkboxInput || 'Please accept our terms of use']"
+                v-model="state.checkboxInput"
+              />
+            </v-col>
+            <v-col>
+              <VcsButton
+                :is-active="state.checkboxInput"
+                @click="state.checkboxInput = !state.checkboxInput"
+                tooltip="toggle button"
+                color="warning"
+                tooltip-position="right"
+                small
+              >
+                <span v-if="state.checkboxInput">Active-true</span>
+                <span v-else>Active-false</span>
+              </VcsButton>
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </vcsformsection>
+    <VcsButton
+      @click="logState(state)"
+      :disabled="!isValid"
+      :tooltip="'Log current state in console'"
+      :has-update="isValid && newUpdate"
+    >
+      Log State
+    </VcsButton>
+    <VcsButton
+      type="reset"
+      icon="$vcsReturn"
+    >
+      Reset
+    </VcsButton>
+  </v-form>
+</template>
+<script>
+  import { inject, ref, watch } from '@vue/composition-api';
+  import {
+    VcsSelect,
+    VcsCheckbox,
+    VcsButton,
+    VcsTextField,
+    VcsFormattedNumber,
+    VcsFormSection,
+    VcsLabel,
+  } from '@vcmap/ui';
+  import { isValidText, conditionalTest, isValidEmail } from './validation.js';
+
+  export default {
+    name: 'PluginExampleComponent',
+    components: {
+      VcsButton,
+      VcsSelect,
+      VcsTextField,
+      VcsCheckbox,
+      VcsFormattedNumber,
+      VcsFormSection,
+      VcsLabel,
+    },
+    props: {
+      windowId: {
+        type: String,
+        default: '',
+      },
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const plugin = app.plugins.getByKey('@vcmap/plugin-example');
+      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: true,
+        dense: 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
+        selectOptions: plugin.config.selectOptions,
+        initialTextInput: plugin.config.initialTextInput,
+        isValid: false,
+        isValidText,
+        conditionalTest,
+        isValidEmail,
+        newUpdate,
+        logState() {
+          // eslint-disable-next-line no-console
+          console.log(plugin.getSerializedState());
+          newUpdate.value = false;
+        },
+        alertAction() {
+          alert('alert');
+        },
+      };
+    },
+  };
+</script>
+<style lang="scss" scoped>
+label{
+  font-size: 12px;
+}
+</style>

package/plugins/@vcmap/pluginExample/validation.js

@@ -0,0 +1,30 @@
+/**
+ * @param {string} value
+ * @returns {boolean|string}
+ */
+export function isValidText(value) {
+  const pattern = /\D+/;
+  return pattern.test(value) || `Invalid text: ${value}`;
+}
+
+/**
+ * @param {string} value
+ * @param {string} condition
+ * @returns {boolean|string}
+ */
+export function conditionalTest(value, condition) {
+  if (condition === 'Option A') {
+    return value === 'test' || `input ${value} must be "test"`;
+  } else {
+    return true;
+  }
+}
+
+/**
+ * @param {string} value
+ * @returns {boolean|string}
+ */
+export function isValidEmail(value) {
+  const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return pattern.test(value) || 'Invalid e-mail.';
+}

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

@@ -0,0 +1,62 @@
+<template>
+  <v-container class="pa-0">
+    <v-list
+      color="rgba(0,0,0,0)"
+    >
+      <v-chip
+        v-for="(context, index) in contexts"
+        :key="index"
+        class="mx-1"
+        :color="context.active ? 'primary' : undefined"
+        :disabled="!toggleable"
+        @click="toggle(context)"
+      >
+        {{ context.name || context.configUrl }}
+        <VcsTooltip
+          v-if="context.description"
+          :tooltip="context.description"
+        >
+          <template #activator="{ on, attrs }">
+            <v-icon
+              right
+              v-bind="{...$attrs, ...attrs}"
+              v-on="{...$listeners, ...on}"
+            >
+              mdi-help-circle
+            </v-icon>
+          </template>
+        </VcsTooltip>
+      </v-chip>
+    </v-list>
+  </v-container>
+</template>
+
+<script>
+  import { VcsTooltip } from '@vcmap/ui';
+
+  export default {
+    name: 'ContextsListComponent',
+    components: { VcsTooltip },
+    props: {
+      contexts: {
+        type: Array,
+        required: true,
+      },
+      toggleable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    methods: {
+      toggle(context) {
+        if (this.toggleable) {
+          this.$emit('toggle-context', context);
+        }
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <v-container>
+    <h1>{{ $t('project-selector.project.title') }}</h1>
+    <v-list
+      v-for="(project, index) in state.projects.value"
+      :key="index"
+    >
+      <v-card
+        class="ma-1"
+        :color="project.active ? 'accent' : undefined"
+        @click="selectProject(project)"
+        hover
+        outlined
+        :loading="loading === project.name"
+      >
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-title class="font-weight-bold">
+              {{ project.name }}
+            </v-list-item-title>
+            <v-list-item-subtitle>{{ project.description }}</v-list-item-subtitle>
+            <ContextsListComponent
+              :contexts="project.contexts"
+              @toggle-context="toggleContext"
+              :toggleable="false"
+            />
+          </v-list-item-content>
+          <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>
+      </v-card>
+    </v-list>
+    <v-divider />
+    <h1>Contexts</h1>
+    <ContextsListComponent
+      :contexts="state.contexts.value"
+      @toggle-context="toggleContext"
+    />
+  </v-container>
+</template>
+<script>
+  import { inject } from '@vue/composition-api';
+  import ContextsListComponent from './ContextsListComponent.vue';
+
+  export default {
+    name: 'ProjectSelector',
+    components: { ContextsListComponent },
+    setup() {
+      const app = inject('vcsApp');
+      const plugin = app.plugins.getByKey('@vcmap/project-selector');
+      async function selectProject(project) {
+        this.loading = project.name;
+        await plugin.selectProject(app, project);
+        this.loading = undefined;
+      }
+
+      async function toggleContext(context) {
+        if (context.active) {
+          await plugin.unloadContext(app, context);
+        } else {
+          await plugin.loadContext(app, context);
+        }
+      }
+
+      return {
+        loading: undefined,
+        state: plugin.state,
+        config: plugin.config,
+        selectProject,
+        toggleContext,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap/project-selector/README.md

@@ -0,0 +1,29 @@
+# VC Map Plugin Project Selector
+
+This is a plugin to select and load `VCMapProjects` and `VCMapContexts`.
+
+## configuration
+
+You can add projects or contexts and define the startup behavior of the plugin:
+
+### ProjectSelectorConfig
+| Property         | Type                       | default       | Description                  |
+|------------------|----------------------------|---------------|------------------------------|
+| selected         | string                     | 'VC Map Base' | selected project on startup  |
+| selectedContexts | string[]                   | []            | selected contexts on startup |
+| projects         | Array<VCMapProjectOptions> | []            |                              |
+| contexts         | Array<VCMapContextOptions> | []            |                              |
+
+### VCMapProjectOptions
+| Property    | Type                       | Description                |
+|-------------|----------------------------|----------------------------|
+| name        | string                     | name of the project        |
+| description | string                     | description of the project |
+| contexts    | Array<VCMapContextOptions> |                            |
+
+### VCMapContextOptions
+| Property    | Type   | Description                |
+|-------------|--------|----------------------------|
+| name        | string | name of the context        |
+| description | string | description of the context |
+| configUrl   | string | url to config.json         |

package/plugins/@vcmap/project-selector/config.json

@@ -0,0 +1,15 @@
+{
+    "name": "projectSelector",
+    "entry": "plugins/@vcmap/project-selector/index.js",
+    "selected": "VC Map Base",
+    "selectedContexts": [],
+    "open": false,
+    "projects": [
+        {
+            "name": "VC Map Base",
+            "description": "Base Layout with basic datasets",
+            "contexts": [ { "configUrl": "config/base.config.json" } ]
+        }
+    ],
+    "contexts": []
+}

package/plugins/@vcmap/project-selector/de.json

@@ -0,0 +1,7 @@
+{
+  "project-selector": {
+    "project" : {
+      "title": "Projekte"
+    }
+  }
+}

package/plugins/@vcmap/project-selector/en.json

@@ -0,0 +1,7 @@
+{
+  "project-selector": {
+    "project" : {
+      "title": "Projects"
+    }
+  }
+}