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

package/plugins/test/testList.vue

@@ -0,0 +1,287 @@
+<template>
+  <v-sheet>
+    <v-sheet class="pa-2">
+      <v-switch
+        v-model="selectable"
+        label="Selectable"
+      />
+      <v-switch
+        :disabled="!selectable"
+        v-model="selectSingle"
+        label=" Single Select"
+      />
+      <v-switch
+        v-model="searchable"
+        label="Searchable"
+      />
+      <v-dialog
+        v-model="dialog"
+        width="400"
+      >
+        <template #activator="{ on }">
+          <vcs-button v-on="on">
+            Add An item
+          </vcs-button>
+        </template>
+        <v-card class="pa-2">
+          <v-form
+            @submit.prevent="add"
+          >
+            <vcs-text-field
+              v-model="newItem.name"
+              label="Name"
+              :rules="required"
+            />
+            <vcs-text-field
+              v-model="newItem.title"
+              label="Title"
+              :rules="required"
+            />
+            <v-switch label="visible" v-model="newItem.visible" />
+            <v-switch label="disabled" v-model="newItem.disabled" />
+            <v-switch label="random icon" v-model="newItem.icon" />
+            <v-switch label="console.log action" v-model="newItem.action" />
+            <v-switch label="console.log on clicked" v-model="newItem.clicked" />
+            <v-switch label="console.log selected state" v-model="newItem.selected" />
+            <vcs-button
+              type="submit"
+            >
+              Add
+            </vcs-button>
+          </v-form>
+        </v-card>
+      </v-dialog>
+      <v-divider class="ma-2" />
+      <v-switch
+        v-model="showTitle"
+        label="Show Title"
+      />
+      <vcs-text-field v-model="title" placeholder="Title" />
+      <v-switch
+        v-model="titleActions"
+        label="Title Actions"
+      />
+      <v-switch
+        v-model="titleIcon"
+        label="Title Icon"
+      />
+      <v-divider class="ma-2" />
+      <template v-if="selectable">
+        <vcs-button
+          @click="selected = []"
+        >
+          Clear Selection
+        </vcs-button>
+        <v-switch v-model="showSelection" label="Show Selection" />
+        <ul v-if="showSelection">
+          <li
+            v-for="(i, index) in selected"
+            :key="`item-${index}`"
+          >
+            {{ i.title }}
+          </li>
+        </ul>
+      </template>
+      <v-divider class="ma-2" />
+    </v-sheet>
+
+    <vcs-list
+      :items="items"
+      :selectable="selectable"
+      :single-select="selectSingle"
+      :searchable="searchable"
+      :show-title="showTitle"
+      :icon="titleIconSrc"
+      :actions="titleActionsArray"
+      :title="title"
+      v-model="selected"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { VcsList, VcsButton, VcsTextField, Icons } from '@vcmap/ui';
+  import {
+    VSwitch,
+    VDivider,
+    VSheet,
+    VDialog,
+    VCard,
+    VForm,
+  } from 'vuetify/lib';
+  import { computed, ref } from 'vue';
+
+  function getRandomIcon() {
+    const keys = Object.keys(Icons);
+    const index = Math.floor(keys.length * Math.random());
+    return `$${keys[index]}`;
+  }
+
+  const defaultItems = [
+    {
+      name: 'foo',
+      title: 'Foo',
+      tooltip: 'this is the foo',
+      icon: 'mdi-pen',
+    },
+    {
+      name: 'bar',
+      title: 'Bar',
+      tooltip: 'just a bar',
+      actions: [
+        {
+          name: 'console.log',
+          callback() {
+            console.log('bar action');
+          },
+        },
+      ],
+    },
+    {
+      name: 'bar',
+      title: 'Baz',
+      tooltip: 'special baz',
+    },
+  ];
+
+  export default {
+    name: 'TestList',
+    components: {
+      VcsList,
+      VcsButton,
+      VcsTextField,
+      VSwitch,
+      VDivider,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const selectable = ref(true);
+      const searchable = ref(true);
+      const selectSingle = ref(false);
+      const showSelection = ref(false);
+      const showTitle = ref(true);
+      const title = ref('Title');
+      const titleActionsArray = ref([]);
+      const titleIconSrc = ref(null);
+      const selected = ref([]);
+      const items = ref(defaultItems);
+      const newItem = ref({
+        name: 'foo',
+        title: 'foo',
+        disabled: false,
+        visible: true,
+        icon: false,
+        action: false,
+        clicked: false,
+        selected: false,
+      });
+      const dialog = ref(false);
+
+      return {
+        selectable,
+        searchable,
+        selectSingle,
+        selected,
+        showSelection,
+        showTitle,
+        title,
+        titleActionsArray,
+        titleIconSrc,
+        items,
+        newItem,
+        dialog,
+        required: [
+          v => !!v || 'Input may not be null',
+          v => v.length > 0 || 'Input must have a length',
+        ],
+        add() {
+          const item = {
+            name: newItem.value.name,
+            title: newItem.value.title,
+            disabled: newItem.value.disabled,
+            visible: newItem.value.visible,
+          };
+
+          if (newItem.value.icon) {
+            item.icon = getRandomIcon();
+          }
+
+          if (newItem.value.action) {
+            item.actions = [
+              {
+                name: 'console.log',
+                callback() {
+                  console.log('hi, i\'m: ', item.name);
+                },
+              },
+            ];
+          }
+
+          if (newItem.value.clicked) {
+            item.clicked = () => {
+              console.log(`${item.name} just got clicked`);
+            };
+          }
+
+          if (newItem.value.selected) {
+            item.selectionChanged = (selected) => {
+              if (selected) {
+                console.log(`${item.name} is selected`);
+              } else {
+                console.log(`${item.name} is no longer selected`);
+              }
+            };
+          }
+          items.value.push(item);
+          newItem.value = {
+            name: 'foo',
+            title: 'foo',
+            disabled: false,
+            visible: true,
+            icon: false,
+            action: false,
+            clicked: false,
+            selected: false,
+          };
+          dialog.value = false;
+        },
+        titleActions: computed({
+          get() {
+            return titleActionsArray.value.length > 0;
+          },
+          set(value) {
+            if (value) {
+              titleActionsArray.value = [{
+                name: 'console.log foo',
+                callback() {
+                  console.log('foo');
+                },
+              }];
+            } else {
+              titleActionsArray.value = [];
+            }
+          },
+        }),
+        titleIcon: computed({
+          get() {
+            return !!titleIconSrc.value;
+          },
+          set(value) {
+            if (value) {
+              titleIconSrc.value = getRandomIcon();
+            } else {
+              titleIconSrc.value = null;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/plugins/test/vcsContent.vue

@@ -14,8 +14,11 @@
 
 </style>
 <script>
+  import { VSheet } from 'vuetify/lib';
+
   export default {
     name: 'VcsContent',
+    components: [VSheet],
     setup() {
       return { };
     },

package/plugins/test/windowManagerExample.vue

@@ -51,6 +51,9 @@
           component: EmptyComponent,
           headerComponent: MyCustomHeader,
           slot: WindowSlot.DYNAMIC_RIGHT,
+          props: {
+            sample: 'A window property',
+          },
         },
         {
           id: 'dynamicRight2',

package/plugins/wizardExample/index.js

@@ -0,0 +1,41 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import WizardExample from './wizardExample.vue';
+
+export default async () => {
+  return {
+    name: 'wizardExample',
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'wizardExample',
+          icon: '$vcsLegend',
+          title: 'VCS Wizard Example',
+        },
+        {
+          id: 'wizard-example',
+          component: WizardExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'VCS Wizard',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        'wizardExample',
+      );
+      app.navbarManager.add(
+        { id: 'wizard-example', action },
+        'wizardExample',
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};

package/plugins/wizardExample/wizardExample.vue

@@ -0,0 +1,77 @@
+<template>
+  <VcsWizard
+    v-model="step"
+  >
+    <v-stepper-step
+      step="1"
+      editable
+      :complete="step > 1"
+    >
+      This is the first step
+    </v-stepper-step>
+    <v-stepper-content
+      step="1"
+    >
+      <v-sheet>
+        This is the content of the first step.
+      </v-sheet>
+      <VcsButton
+        @click="increaseStep()"
+        class="my-2"
+      >
+        Next
+      </VcsButton>
+    </v-stepper-content>
+    <v-stepper-step
+      :rules="[() => false]"
+      step="2"
+      editable
+    >
+      This is the second step
+    </v-stepper-step>
+    <v-stepper-content
+      step="2"
+    >
+      <VcsSelect
+        :items="['this', 'is', 'a', 'test']"
+        label="Select"
+        class="my-2"
+      />
+      <VcsButton
+        @click="decreaseStep()"
+      >
+        Back
+      </VcsButton>
+    </v-stepper-content>
+  </VcsWizard>
+</template>
+
+<script>
+  import { VcsWizard, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { VStepperStep, VStepperContent, VSheet } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  export default {
+    name: 'WizardExample',
+    components: {
+      VcsWizard,
+      VStepperStep,
+      VStepperContent,
+      VSheet,
+      VcsButton,
+      VcsSelect,
+    },
+    setup() {
+      const step = ref(1);
+      return {
+        step,
+        increaseStep() { step.value += 1; },
+        decreaseStep() { step.value -= 1; },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/actions/actionHelper.js

@@ -1,8 +1,11 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
-import { Collection, MapCollection, Viewpoint } from '@vcmap/core';
+import { Collection, Extent, MapCollection, mercatorProjection, Viewpoint } from '@vcmap/core';
+import { Feature } from 'ol';
+import { reactive, ref } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
-import { getWindowPositionOptions } from '../manager/window/windowManager.js';
+import { getWindowPositionOptions, WindowSlot } from '../manager/window/windowManager.js';
+import SearchComponent from '../search/searchComponent.vue';
 
 /**
  * @typedef {Object} ActionOptions
@@ -88,6 +91,60 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
   return { action, destroy };
 }
 
+/**
+ * Creates a toggle button for the search tool, which is only available, if at least one search implementation is registered.
+ * @param {VcsUiApp} app
+ * @returns {{ searchAction: import("vue").Ref<import("vue").UnwrapRef<VcsAction>|null>, destroy: function():void }}
+ */
+export function createSearchButtonAction(app) {
+  let destroyAction = () => {};
+  const searchAction = ref(null);
+  const determineAction = () => {
+    if (app.windowManager.has('searchId')) {
+      app.windowManager.remove('searchId');
+    }
+    if (app.search.size > 0 && searchAction.value === null) {
+      const action = createToggleAction(
+        {
+          name: 'search.title',
+          icon: '$vcsSearch',
+          title: 'search.tooltip',
+        },
+        {
+          id: 'searchId',
+          component: SearchComponent,
+          state: { hideHeader: true },
+          slot: WindowSlot.DETACHED,
+          position: {
+            right: 0,
+            top: 0,
+            width: 440,
+          },
+        },
+        app.windowManager,
+        vcsAppSymbol,
+      );
+      destroyAction = action.destroy;
+      searchAction.value = reactive(action.action);
+    } else if (searchAction.value !== null) {
+      destroyAction();
+      destroyAction = () => {};
+      searchAction.value = null;
+    }
+  };
+  determineAction();
+  const listeners = [
+    app.search.added.addEventListener(determineAction),
+    app.search.removed.addEventListener(determineAction),
+  ];
+  const destroy = () => {
+    destroyAction();
+    listeners.forEach((cb) => { cb(); });
+  };
+
+  return { searchAction, destroy };
+}
+
 /**
  * Creates an action which will toggle the overview map (opening & closing the window and activating/ deactivating the overview map).
  * @param {OverviewMap} overviewMap
@@ -260,3 +317,47 @@ export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCol
     },
   };
 }
+
+/**
+ * calculates and returns a viewpoint using feature's extent
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @returns {Viewpoint|null}
+ */
+export function getViewpointFromFeature(feature) {
+  const extent = new Extent({
+    coordinates: feature.getGeometry()?.getExtent?.(),
+    projection: mercatorProjection,
+  });
+
+  if (!extent || !extent.isValid()) {
+    return null;
+  }
+  return Viewpoint.createViewpointFromExtent(extent);
+}
+
+/**
+ * Creates an action, which when clicked, zooms to the provided feature
+ * @param {ActionOptions} actionOptions
+ * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+ * @param {import("@vcmap/core").MapCollection} mapCollection
+ * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
+ */
+export function createZoomToFeatureAction(actionOptions, feature, mapCollection) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+  });
+  check(feature, Feature);
+  check(mapCollection, MapCollection);
+
+  const viewpoint = getViewpointFromFeature(feature);
+
+  return {
+    title: 'search.zoomToFeatureAction',
+    ...actionOptions,
+    async callback() {
+      await mapCollection.activeMap.gotoViewpoint(viewpoint);
+    },
+  };
+}

package/src/actions/styleSelector.vue

@@ -20,12 +20,21 @@
 
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
+  import {
+    VChip, VList, VListItem, VListItemContent, VListItemIcon, VSheet,
+  } from 'vuetify/lib';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {
     name: 'StyleSelector',
     components: {
       VcsSelect,
+      VSheet,
+      VList,
+      VListItem,
+      VListItemIcon,
+      VChip,
+      VListItemContent,
     },
     props: {
       availableStyles: {