@vcmap/ui 5.0.0-rc.18 → 5.0.0-rc.20

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/categoryTest/ItemEditor.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'ItemEditor',
-  };
-</script>
-
-<style scoped>
-
-</style>

package/plugins/test/allIconsComponent.vue

@@ -1,50 +0,0 @@
-<template>
-  <v-sheet class="overflow-auto icons-window">
-    <v-list>
-      <v-list-item
-        v-for="icon in icons"
-        :key="icon"
-      >
-        <v-list-item-title>{{ icon }}</v-list-item-title>
-        <v-list-item-icon>
-          <v-icon>{{ icon }}</v-icon>
-        </v-list-item-icon>
-      </v-list-item>
-    </v-list>
-  </v-sheet>
-</template>
-
-<script>
-  import { Icons } from '@vcmap/ui';
-  import {
-    VSheet,
-    VList,
-    VListItem,
-    VListItemIcon,
-    VIcon,
-    VListItemTitle,
-  } from 'vuetify/lib';
-
-  export default {
-    name: 'AllIconsComponent',
-    components: {
-      VSheet,
-      VList,
-      VListItem,
-      VListItemIcon,
-      VIcon,
-      VListItemTitle,
-    },
-    computed: {
-      icons() {
-        return Object.keys(Icons).map(n => `$${n}`);
-      },
-    },
-  };
-</script>
-
-<style scoped>
-/*.icons-window {*/
-/*  max-height: 600px;*/
-/*}*/
-</style>

package/plugins/test/index.js

@@ -1,209 +0,0 @@
-import VectorSource from 'ol/source/Vector.js';
-import { Feature } from 'ol';
-import {
-  ButtonLocation, createModalAction, createToggleAction, setStateToUrl, ToolboxType, WindowSlot,
-} from '@vcmap/ui';
-import { getToolboxData } from './toolbox-data.js';
-import editor from './editor.vue';
-import windowManagerExample from './windowManagerExample.vue';
-import AllIconsComponent from './allIconsComponent.vue';
-import TestList from './testList.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.DYNAMIC_LEFT,
-        },
-        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',
-      );
-      const { action: iconAction, destroy: destroyIconAction } = createToggleAction(
-        {
-          name: 'Icons',
-        },
-        {
-          id: 'allIcons',
-          state: {
-            headerTitle: 'All Icons',
-          },
-          component: AllIconsComponent,
-        },
-        app.windowManager,
-        '@vcmap/test',
-      );
-      const { action: clipboardDialogAction, destroy: destroyClipboardDialogAction } = createModalAction(
-        {
-          name: 'Create Link',
-        },
-        {
-          component: {
-            template: '<div>{{url}}</div>',
-            data() {
-              return {
-                url: '',
-              };
-            },
-            async created() {
-              const url = new URL(window.location.href);
-              setStateToUrl(await app.getState(true), url);
-              this.url = url.toString();
-            },
-          },
-          position: {
-            top: '50px',
-            left: '8%',
-            right: '8%',
-          },
-        },
-        app,
-        '@vcmap/test',
-      );
-      const { action: listAction, destroy: destroyList } = createToggleAction(
-        {
-          name: 'TestList',
-        },
-        {
-          id: 'testList',
-          state: {
-            headerTitle: 'Test List',
-          },
-          slot: WindowSlot.DYNAMIC_LEFT,
-          component: TestList,
-        },
-        app.windowManager,
-        '@vcmap/test',
-      );
-      this._destroyActions = [
-        destroyConfigEditorAction,
-        destroyWindowAction,
-        destroyIconAction,
-        destroyClipboardDialogAction,
-        destroyList,
-      ];
-      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', action: configEditorAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'windowManagerExample', action: windowAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'allIcons', action: iconAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'alert', action: alertAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        { id: 'list', action: listAction },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      app.navbarManager.add(
-        {
-          id: 'createLink',
-          action: clipboardDialogAction,
-        },
-        '@vcmap/test',
-        ButtonLocation.TOOL,
-      );
-      const { toolboxData, destroy: destroyToolboxData } = getToolboxData(app);
-      toolboxData.forEach(([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
-        let group;
-        if (app.toolboxManager.has(toolboxComponentOptions.id)) {
-          group = app.toolboxManager.get(toolboxComponentOptions.id);
-        } else {
-          group = app.toolboxManager.add(toolboxComponentOptions, owner);
-        }
-        if (group.type === ToolboxType.GROUP && buttonComponents) {
-          buttonComponents.forEach(c => group.buttonManager.add(c, owner));
-        }
-      });
-      this._destroyActions.push(destroyToolboxData);
-
-      app.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;
-      }, '@vcmap/test');
-    },
-    destroy() {
-      if (this._destroyActions) {
-        this._destroyActions.forEach(cb => cb());
-        this._destroyActions = null;
-      }
-    },
-  };
-}

package/plugins/wizardExample/wizardExample.vue

@@ -1,77 +0,0 @@
-<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/components/form-inputs-controls/VcsColorPicker.vue

@@ -1,85 +0,0 @@
-<template>
-  <v-color-picker
-    ref="picker"
-    @input="(e) => sub$.next(e)"
-    :value="value"
-    class="caption"
-    v-bind="props"
-  />
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .v-color-picker__controls {
-    padding: 8px;
-  }
-
-  .v-color-picker__input input {
-    margin: 0;
-  }
-
-  .v-color-picker__edit {
-    margin-top: 12px;
-  }
-}
-</style>
-
-<script>
-  import {
-    onMounted,
-    onUnmounted,
-  } from 'vue';
-  import { Subject } from 'rxjs';
-  import { debounceTime, takeUntil } from 'rxjs/operators';
-  import { VColorPicker } from 'vuetify/lib';
-
-  /**
-   * @description
-   * Stylized wrapper around vuetify Color Picker
-   */
-  export default {
-    name: 'VcsColorPicker',
-    components: {
-      VColorPicker,
-    },
-    props: {
-      width: {
-        type: Number,
-        default: 200,
-      },
-      mode: {
-        type: String,
-        default: 'hexa',
-      },
-      dotSize: {
-        type: Number,
-        default: 12,
-      },
-      value: {
-        type: String,
-        default: '#000000',
-      },
-    },
-    setup(props, context) {
-      const destroy$ = new Subject();
-      const sub$ = new Subject();
-
-      onMounted(() => {
-        sub$.pipe(debounceTime(330), takeUntil(destroy$)).subscribe((color) => {
-          // this.$vuetify.theme.themes.light.primary = color;
-          context.emit('input', color);
-        });
-      });
-
-      onUnmounted(() => {
-        destroy$.next();
-        destroy$.unsubscribe();
-      });
-
-      return {
-        props,
-        sub$,
-      };
-    },
-  };
-</script>