@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/lib/vue-composition-api.js

@@ -1,2 +0,0 @@
-export * from '@vue/composition-api';
-export { default } from '@vue/composition-api';

package/map.config.json

@@ -1,35 +0,0 @@
-{
-  "plugins": [
-    {
-      "name": "@vcmap/project-selector",
-      "entry": "plugins/@vcmap/project-selector/index.js",
-      "selected": "VC Map Base",
-      "selectedContexts": ["development"],
-      "open": true,
-      "projects": [
-        {
-          "name": "VC Map HOSTING",
-          "description": "AEROWEST DEMO (Standard Hosting Layout)",
-          "contexts": [
-            { "configUrl": "config/aerowest.config.json" }
-          ]
-        },
-        {
-          "name": "VC Map Berlin",
-          "description": "Berlin DEMO (Standard Hosting Layout)",
-          "contexts": [
-            { "configUrl": "config/base.config.json" },
-            { "configUrl": "config/berlin.config.json" }
-          ]
-        }
-      ],
-      "contexts": [
-        {
-          "name": "development",
-          "description": "context containing examples, showcases and other stuff",
-          "configUrl": "config/dev.config.json"
-        }
-      ]
-    }
-  ]
-}

package/plugins/@vcmap/pluginExample/config.json

@@ -1,6 +0,0 @@
-{
-    "name": "@vcmap/pluginExample",
-    "entry": "plugins/@vcmap/pluginExample/index.js",
-    "selectOptions": ["A", "B", "C", "D"],
-    "initialTextInput": "myInitialText"
-}

package/plugins/@vcmap/pluginExample/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "@vcmap/plugin-example",
-  "version": "1.0.0",
-  "vcMapVersion": "~5.0.0",
-  "dependencies": {
-  }
-}

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

@@ -1,374 +0,0 @@
-<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">
-                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/project-selector/ProjectSelectorComponent.vue

@@ -1,81 +0,0 @@
-<template>
-  <v-container>
-    <h1>Projects</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

@@ -1,29 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-{
-    "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": []
-}