@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/plugins/@vcmap-show-case/config-editor/src/ConfigEditor.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-container class="py-0 px-1">
+    <VcsTextArea v-model="configString" v-if="!loading" />
+    <v-progress-circular v-else />
+
+    <div class="d-flex gap-2 px-1 pt-2 pb-1 justify-end">
+      <VcsFormButton variant="filled" @click="replaceModule">
+        Apply
+      </VcsFormButton>
+      <VcsFormButton @click="removeModule"> Remove </VcsFormButton>
+    </div>
+  </v-container>
+</template>
+
+<script>
+  import { ref, inject } from 'vue';
+  import { VcsTextArea, VcsFormButton } from '@vcmap/ui';
+  import { VcsModule } from '@vcmap/core';
+  import { VContainer, VProgressCircular } from 'vuetify/lib';
+
+  const moduleId = 'foo';
+
+  export default {
+    name: 'ConfigEditor',
+    components: {
+      VcsFormButton,
+      VcsTextArea,
+      VContainer,
+      VProgressCircular,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const module = app.getModuleById(moduleId);
+      const configString = ref(
+        JSON.stringify(module ? module.config : {}, null, 2),
+      );
+      const loading = ref(false);
+
+      return {
+        configString,
+        loading,
+        async replaceModule() {
+          loading.value = true;
+          const config = JSON.parse(configString.value);
+          config.id = moduleId;
+          const newModule = new VcsModule(config);
+          await this.removeModule();
+          await app.addModule(newModule);
+          loading.value = false;
+        },
+        async removeModule() {
+          if (app.getModuleById(moduleId)) {
+            await app.removeModule(moduleId);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/config-editor/src/index.js

@@ -0,0 +1,49 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import ConfigEditor from './ConfigEditor.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function configEditor() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Config Editor',
+        },
+        {
+          id: 'config-editor',
+          state: {
+            headerTitle: 'Config Editor',
+          },
+          component: ConfigEditor,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'config-editor', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/context-menu-tester/README.md

@@ -0,0 +1,3 @@
+# Context Menu Tester
+
+This is a show-case plugin demonstrating the concept of [CONTEXT_MENU](../../../documentation/CONTEXT_MENU.md).

package/plugins/@vcmap-show-case/context-menu-tester/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/context-menu-tester",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/context-menu-tester/src/index.js

@@ -0,0 +1,41 @@
+import packageJSON from '../package.json';
+
+export default () => {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(vcsApp) {
+      vcsApp.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;
+      }, packageJSON.name);
+    },
+  };
+};

package/plugins/@vcmap-show-case/form-inputs-example/README.md

@@ -0,0 +1,4 @@
+# Form Inputs Example
+
+This is a show-case plugin demonstrating the usage of form input controls.
+See [form-input-controls](../../../src/components/form-inputs-controls) for the used components.

package/plugins/@vcmap-show-case/form-inputs-example/config.json

@@ -0,0 +1,5 @@
+{
+  "name": "form-inputs-example",
+  "selectOptions": ["A", "B", "C", "D"],
+  "initialTextInput": "myInitialText"
+}

package/plugins/@vcmap-show-case/form-inputs-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/form-inputs-example",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -0,0 +1,516 @@
+<template>
+  <v-form v-model="isValid" ref="form">
+    <VcsFormSection
+      heading="VcsFormSection Select & Text Inputs"
+      expandable
+      start-open
+      :header-actions="actions"
+      :action-button-list-overflow-count="4"
+    >
+      <template #help>
+        <ol>
+          <li>{{ $t('form-inputs-example.help1') }}:</li>
+          <span>{{ $t('form-inputs-example.help1desc') }}</span>
+          <li>{{ $t('form-inputs-example.help2') }}:</li>
+          <span>{{ $t('form-inputs-example.help2desc') }}</span>
+          <li>{{ $t('form-inputs-example.help3') }}:</li>
+          <span>{{ $t('form-inputs-example.help3desc') }}</span>
+        </ol>
+      </template>
+      <template #default>
+        <v-container class="py-0 px-1">
+          <v-row no-gutters>
+            <v-col class="w-max-half">
+              <VcsLabel html-for="selectInput" :dense="dense">
+                {{ $t('form-inputs-example.select') }}
+              </VcsLabel>
+            </v-col>
+            <v-col class="w-max-half">
+              <VcsSelect
+                id="selectInput"
+                :items="selectOptions"
+                :dense="dense"
+                :rules="[(v) => v !== 'D' || 'D is not allowed']"
+                v-model="state.selected"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <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"
+                placeholder="conditional"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col class="w-max-half">
+              <VcsLabel html-for="arrayInput" :dense="dense">
+                Array Input
+              </VcsLabel>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                type="number"
+                :dense="dense"
+                v-model="state.arrayInput"
+                :rules="[arrayTest]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsChipArrayInput
+                id="arrayInput"
+                :dense="dense"
+                v-model="state.arrayInputString"
+                column
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsTextField
+                :dense="dense"
+                v-model="state.initialTextInput"
+                :rules="[isValidText]"
+                :loading="state.initialTextInput === 'myInitialText'"
+                :error-messages="
+                  !state.checkboxInput
+                    ? ['manual error message depending on checkbox']
+                    : undefined
+                "
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsTextArea
+                :dense="dense"
+                :rules="[(v) => !!v || 'text area must not be empty']"
+                placeholder="This is a text area"
+                rows="2"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="emailInput" :dense="dense" required>
+                Email
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="emailInput"
+                :dense="dense"
+                type="email"
+                :rules="[isValidEmail]"
+                v-model="state.email"
+                color="blue"
+                placeholder="Email address"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <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"
+                label="text"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="fileInput" :dense="dense">
+                File input
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="fileInput"
+                :dense="dense"
+                type="file"
+                multiple
+                v-model="state.files"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="dateInput" :dense="dense"> Date </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsDatePicker id="dateInput" v-model="state.dateInput" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+    <VcsFormSection
+      heading="VcsFormSection Number Inputs"
+      help-text="form-inputs-example.help"
+    >
+      <template #default>
+        <v-container class="py-0 px-1">
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="numberInput" :dense="dense">
+                NumberInput
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="numberInput"
+                :dense="dense"
+                type="number"
+                step="1"
+                unit="cm"
+                v-model.number="state.numberInput"
+                show-spin-buttons
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters class="align-center">
+            <v-col>
+              <VcsLabel html-for="sliderInput" :dense="dense">
+                Slider
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsSlider
+                id="sliderInput"
+                :dense="dense"
+                type="number"
+                step="1"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <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 no-gutters>
+            <v-col>
+              <VcsTextField
+                id="coordinateX"
+                :dense="dense"
+                type="number"
+                step="10"
+                prefix="X"
+                unit="m"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+            <v-col class="px-2">
+              <VcsTextField
+                id="coordinateY"
+                :dense="dense"
+                type="number"
+                step="10"
+                prefix="Y"
+                unit="m"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="coordinateZ"
+                :dense="dense"
+                type="number"
+                step="10"
+                unit="m"
+                prefix="Z"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+    <VcsFormSection
+      heading="VcsFormSection Radio & Checkbox"
+      expandable
+      start-open
+      :disabled="!state.checkboxInput"
+    >
+      <template #default>
+        <v-container class="py-0 px-1">
+          <v-row no-gutters>
+            <v-col>
+              <VcsRadio
+                :dense="dense"
+                :items="[
+                  ...selectOptions,
+                  {
+                    label: 'Radio Option E colored',
+                    color: 'primary',
+                    value: 'E',
+                  },
+                ]"
+                v-model="state.selected"
+                :rules="[(v) => v !== 'D' || 'D is not allowed']"
+                row
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel :dense="dense"> Text </VcsLabel>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <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>
+              <VcsFormButton
+                :is-active="state.checkboxInput"
+                @click="state.checkboxInput = !state.checkboxInput"
+                tooltip="toggle button"
+                color="warning"
+                tooltip-position="right"
+                class="pt-1"
+              >
+                <span v-if="state.checkboxInput">Active-true</span>
+                <span v-else>Active-false</span>
+              </VcsFormButton>
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+    <VcsFormSection heading="VcsFormSection Mixed Inputs">
+      <template #header="{ heading }">
+        <article class="pa-2 text--primary">
+          {{ heading }}
+          <h3>This is a custom header using header slot</h3>
+        </article>
+      </template>
+      <template #default>
+        <v-container class="py-0 px-1">
+          <v-row>
+            <v-col cols="1">
+              <VcsLabel
+                html-for="textInput"
+                :dense="dense"
+                class="text-caption"
+              >
+                1
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsSelect
+                :items="[
+                  { value: 'one', i18n: 'form-inputs-example.numbers.one' },
+                  { value: 'two', i18n: 'form-inputs-example.numbers.two' },
+                  { value: 'three', i18n: 'form-inputs-example.numbers.three' },
+                ]"
+                :item-text="(item) => item.i18n"
+                :dense="dense"
+                placeholder="Numbers"
+              />
+            </v-col>
+            <v-col>
+              <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"
+                :rules="[
+                  (v) => !!v.length || 'Please select at least one option.',
+                ]"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsRadioGrid
+                v-model="state.selected"
+                :items="[
+                  { value: 'A', src: 'mdi-circle-outline' },
+                  { value: 'B', src: 'mdi-close' },
+                  { value: 'C', src: 'mdi-triangle-outline' },
+                  { value: 'D', src: 'mdi-square-outline' },
+                ]"
+                :dense="dense"
+                :rules="[(v) => v !== 'D' || 'Square is not allowed']"
+              >
+                <!-- if label slot is not used, src is forwarded to img src -->
+                <template #label="{ src }">
+                  <v-icon size="24">{{ src }}</v-icon>
+                </template>
+              </VcsRadioGrid>
+            </v-col>
+          </v-row>
+        </v-container>
+      </template>
+    </VcsFormSection>
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2">
+        <VcsFormButton @click="validate()"> Val </VcsFormButton>
+        <VcsFormButton @click="resetState()" icon="$vcsReturn">
+          Reset
+        </VcsFormButton>
+      </div>
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton
+          variant="filled"
+          @click="logState(state)"
+          :disabled="!isValid"
+          :tooltip="'Log current state in console'"
+          :has-update="isValid && newUpdate"
+        >
+          Log State
+        </VcsFormButton>
+      </div>
+    </div>
+  </v-form>
+</template>
+<script>
+  import { inject, ref, watch } from 'vue';
+  import {
+    VcsSelect,
+    VcsCheckbox,
+    VcsRadio,
+    VcsFormButton,
+    VcsTextField,
+    VcsChipArrayInput,
+    VcsFormattedNumber,
+    VcsFormSection,
+    VcsLabel,
+    VcsTextArea,
+    VcsDatePicker,
+    VcsSlider,
+    VcsRadioGrid,
+  } from '@vcmap/ui';
+  import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/lib';
+  import packageJSON from '../package.json';
+  import {
+    isValidText,
+    conditionalTest,
+    arrayTest,
+    isValidEmail,
+  } from './validation.js';
+
+  export default {
+    name: 'FormInputsExample',
+    components: {
+      VcsFormButton,
+      VcsSelect,
+      VcsTextField,
+      VcsCheckbox,
+      VcsRadio,
+      VcsFormattedNumber,
+      VcsFormSection,
+      VcsLabel,
+      VcsTextArea,
+      VcsChipArrayInput,
+      VForm,
+      VRow,
+      VCol,
+      VContainer,
+      VcsDatePicker,
+      VcsSlider,
+      VcsRadioGrid,
+      VIcon,
+    },
+    props: {
+      actions: {
+        type: Array,
+        required: true,
+      },
+      dense: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const plugin = app.plugins.getByKey(packageJSON.name);
+      const newUpdate = ref(true);
+      watch(plugin.state, () => {
+        newUpdate.value = true;
+      });
+      const form = ref();
+
+      return {
+        // 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,
+        form,
+        isValid: ref(true),
+        isValidText,
+        conditionalTest,
+        arrayTest,
+        isValidEmail,
+        newUpdate,
+        resetState() {
+          plugin.resetState();
+          form.value.resetValidation();
+        },
+        validate() {
+          form.value.validate();
+        },
+        logState() {
+          // eslint-disable-next-line no-console
+          console.log(plugin.getSerializedState());
+          newUpdate.value = false;
+        },
+      };
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  label {
+    font-size: 12px;
+  }
+</style>