@vcmap/ui 5.0.0-rc.6

package/plugins/example/mySuperComponent.vue

@@ -0,0 +1,127 @@
+<template>
+  <v-sheet style="height: 100%">
+    <v-container class="pa-2">
+      <v-row
+        dense
+        align="center"
+      >
+        <v-col>
+          <label> test</label>
+        </v-col>
+        <v-col>
+          <v-text-field hide-details dense outlined />
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+      >
+        <v-col>
+          <v-text-field dense hide-details outlined class="ma-0" />
+        </v-col>
+        <v-col>
+          <v-text-field dense hide-details class="ma-0" />
+        </v-col>
+        <v-col>
+          <v-text-field label="test" dense hide-details outlined class="ma-0" />
+        </v-col>
+        <v-col>
+          <v-text-field label="test" dense hide-details class="ma-0" />
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+      >
+        <v-col>
+          <v-text-field hide-details outlined />
+        </v-col>
+        <v-col>
+          <v-text-field
+            hide-details
+            class="ma-0 pb-1 pt-1"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field label="test" hide-details outlined />
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="test"
+            hide-details
+            class="ma-0 pb-1 pt-1"
+          />
+        </v-col>
+      </v-row>
+      <v-row
+        dense
+      >
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            @mouseover="hover1 = true"
+            @mouseleave="hover1 = false"
+            :outlined="hover1"
+            class="ma-0"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            class="ma-0"
+            @mouseover="hover2 = true"
+            @mouseleave="hover2 = false"
+            :outlined="hover2"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            class="ma-0"
+            label="test"
+            @mouseover="hover3 = true"
+            @mouseleave="hover3 = false"
+            :outlined="hover3"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            dense
+            hide-details
+            class="ma-0"
+            label="test"
+            @mouseover="hover4 = true"
+            @mouseleave="hover4 = false"
+            :outlined="hover4"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <button
+      @click="outlined = !outlined"
+    >
+      test
+    </button>
+  </v-sheet>
+</template>
+<script>
+
+  import Vue from 'vue';
+
+  export default {
+    name: 'MySuperComponent',
+    components: {
+    },
+    data() {
+      return {
+        hover1: false,
+        hover2: false,
+        hover3: false,
+        hover4: false,
+        outlined: false,
+        email: 'test',
+      };
+    },
+  };
+</script>

package/plugins/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@vcmap/hello-world": "^1.0.0"
+  }
+}

package/plugins/test/editor.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <v-textarea
+      v-model="configString"
+      v-if="!loading"
+    />
+    <v-progress-circular
+      v-else
+    />
+
+    <VcsButton @click="replaceContext">
+      Apply
+    </VcsButton>
+    <VcsButton @click="removeContext">
+      Remove
+    </VcsButton>
+  </div>
+</template>
+
+<script>
+  import { ref, inject } from '@vue/composition-api';
+  import { VcsButton } from '@vcsuite/ui-components';
+  import { Context } from '@vcmap/core';
+
+  const contextId = 'foo';
+
+  export default {
+    name: 'Editor',
+    components: {
+      VcsButton,
+    },
+    setup() {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const context = app.getContextById(contextId);
+      const configString = ref(JSON.stringify(context ? context.config : {}, null, 2));
+      const loading = ref(false);
+
+      return {
+        configString,
+        loading,
+        async replaceContext() {
+          loading.value = true;
+          const config = JSON.parse(configString.value);
+          config.id = contextId;
+          const newContext = new Context(config);
+          await this.removeContext();
+          await app.addContext(newContext);
+          loading.value = false;
+        },
+        async removeContext() {
+          if (app.getContextById(contextId)) {
+            await app.removeContext(contextId);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/plugins/test/index.js

@@ -0,0 +1,93 @@
+import VectorSource from 'ol/source/Vector.js';
+import { Feature } from 'ol';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { toolboxData } from './toolbox-data.js';
+import editor from './editor.vue';
+import windowManagerExample from './windowManagerExample.vue';
+
+let source;
+
+function getSource() {
+  if (!source) {
+    source = new VectorSource();
+  }
+  return source;
+}
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function () {
+  return {
+    name: '@vcmap/test',
+    onVcsAppMounted(app) {
+      const { action: configEditorAction, destroy: destroyConfigEditorAction } = createToggleAction(
+        {
+          name: 'Config Editor',
+        },
+        {
+          id: 'config-editor',
+          state: {
+            headerTitle: 'Context Editor',
+          },
+          component: editor,
+          slot: WindowSlot.STATIC,
+          position: {
+            width: 500,
+          },
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      const { action: windowAction, destroy: destroyWindowAction } = createToggleAction(
+        {
+          name: 'Windows',
+        },
+        {
+          id: 'windowManagerExample',
+          state: {
+            headerTitle: 'windowManager Example',
+          },
+          component: windowManagerExample,
+          position: {
+            left: '60%',
+            right: '10%',
+            top: '10%',
+          },
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
+      this._destroyActions = [destroyConfigEditorAction, destroyWindowAction];
+      const alertAction = {
+        name: 'VC Systems',
+        callback() {
+          getSource().addFeature(new Feature({}));
+          window.alert(`there are ${getSource().getFeatures().length} features ${app.maps.activeMap.name}`);
+        },
+      };
+      app.navbarManager.add({
+        id: 'config-editor',
+        location: ButtonLocation.TOOL,
+        action: configEditorAction,
+      }, '@vcmap/test');
+      app.navbarManager.add({
+        id: 'windowManagerExample',
+        location: ButtonLocation.TOOL,
+        action: windowAction,
+      }, '@vcmap/test');
+      app.navbarManager.add({
+        id: 'alert',
+        location: ButtonLocation.TOOL,
+        action: alertAction,
+      }, '@vcmap/test');
+      // toolboxData.forEach(([group, id]) => app.toolboxManager.addToolboxGroup(group, id));
+    },
+    destroy() {
+      if (this._destroyActions) {
+        this._destroyActions.forEach(cb => cb());
+        this._destroyActions = null;
+      }
+    },
+  };
+}

package/plugins/test/myCustomHeader.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing </span>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'MyCustomHeader',
+    setup(props, { emit }) {
+      return {
+        clicked: () => {
+          emit('close');
+        },
+      };
+    },
+  };
+</script>

package/plugins/test/toolbox-data.js

@@ -0,0 +1,49 @@
+export const toolboxData = [
+  [
+    {
+      icon: '$vcsPen',
+      type: 'multiSelectButton',
+      id: 1,
+      open: false,
+      options: [
+        {
+          id: 'foo',
+          icon: '$vcsPointSelect',
+          text: 'Item 1',
+          selected: true,
+        },
+        { id: 'bar', icon: '$vcsObjectSelect', text: 'Item 2' },
+      ],
+    },
+    1,
+  ],
+  [
+    {
+      type: 'singleSelectButton',
+      id: 2,
+      open: false,
+      options: [
+        { id: 'delta', icon: '$vcsPointSelect' },
+        { id: 'zulu', icon: '$vcsObjectSelect' },
+      ],
+    },
+    2,
+  ],
+  [
+    {
+      type: 'toggleButton',
+      id: 3,
+      active: true,
+    },
+    3,
+  ],
+  [
+    {
+      type: 'customComponent',
+      component: 'Button',
+      id: 5,
+      active: true,
+    },
+    5,
+  ],
+];

package/plugins/test/vcsContent.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-sheet>
+    <span>
+      content
+    </span>
+  </v-sheet>
+</template>
+
+<style scoped>
+
+.vcsTest span {
+  background-color: red;
+}
+
+</style>
+<script>
+  export default {
+    name: 'VcsContent',
+    setup() {
+      return { };
+    },
+  };
+</script>

package/plugins/test/windowManagerExample.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <VcsButton v-for="(example, index) in examples" :key="`b-${index}`" @click="(e) => toggle(e, example)">
+      toggle {{ example }}
+    </VcsButton>
+
+    <VcsButton @click="toggleClass()">
+      Change Static2 TestClass
+    </VcsButton>
+  </div>
+</template>
+<style>
+
+
+</style>
+<script>
+  import { inject, onUnmounted, ref, computed } from '@vue/composition-api';
+  import { getLogger } from '@vcsuite/logger';
+  import { VcsButton } from '@vcsuite/ui-components';
+
+  import { EmptyCmpt, WindowSlot } from '@vcmap/ui';
+  import VcsContent from './vcsContent.vue';
+  import MyCustomHeader from './myCustomHeader.vue';
+
+  const showTestClass = ref(false);
+
+  export default {
+    name: 'WindowManagerExample',
+    components: { VcsButton },
+    setup() {
+      const exampleWindows = [
+        {
+          id: 'dynamicLeft',
+          headerTitle: 'Example dynamicLeft',
+          component: EmptyCmpt,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicLeft2',
+          state: {
+            headerTitle: 'Example dynamicLeft2',
+          },
+          component: EmptyCmpt,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        {
+          id: 'dynamicRight',
+          state: {
+            headerTitle: 'Example dynamicRight',
+          },
+          component: EmptyCmpt,
+          headerComponent: MyCustomHeader,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        {
+          id: 'dynamicRight2',
+          state: {
+            headerTitle: 'Example dynamicRight2',
+          },
+          component: EmptyCmpt,
+          slot: WindowSlot.DYNAMIC_RIGHT,
+        },
+        {
+          id: 'static',
+          state: {
+            headerTitle: 'Example static',
+            styles: { 'background-color': 'red' },
+          },
+          component: VcsContent,
+          slot: WindowSlot.STATIC,
+        },
+        {
+          id: 'static2',
+          state: {
+            headerTitle: 'Example static2 With TestClass',
+            classes: {
+              vcsTest: computed(() => {
+                return showTestClass.value;
+              }),
+            },
+          },
+          component: VcsContent,
+          slot: WindowSlot.STATIC,
+        },
+        {
+          id: 'position1',
+          state: {
+            headerTitle: 'Example position1',
+          },
+          component: VcsContent,
+          position: {
+            left: '30%',
+            right: '30%',
+            top: '40%',
+            bottom: '20%',
+          },
+        },
+        {
+          id: 'position2',
+          state: {
+            hideHeader: true,
+            headerTitle: 'Example position2',
+          },
+          component: EmptyCmpt,
+          position: {
+            left: '35%',
+            right: '35%',
+            top: '40%',
+            bottom: '20%',
+          },
+        },
+      ];
+
+      onUnmounted(() => {
+        // can be used to get a callback when the window is closed
+        getLogger('windowManagerExample').log('got unmounted');
+      });
+
+      /**
+       * @type {Map<string, WindowComponent>}
+       */
+      const windowComponents = new Map();
+
+      const app = inject('vcsApp');
+      return {
+        toggleClass() {
+          showTestClass.value = !showTestClass.value;
+        },
+        toggle(e, windowId) {
+          if (app.windowManager.has(windowId)) {
+            app.windowManager.remove(windowId);
+          } else {
+            e.stopPropagation();
+            const windowComponentOptions =
+              windowComponents.get(windowId) || exampleWindows.find(item => item.id === windowId);
+            const windowComponent = app.windowManager.add(windowComponentOptions, 'WindowManagerExample');
+            windowComponents.set(windowId, windowComponent);
+          }
+        },
+        examples: exampleWindows.map(item => item.id),
+      };
+    },
+  };
+</script>