@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/plugins/@vcmap-show-case/icons-example/src/AllIconsComponent.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-sheet class="overflow-auto icons-window">
+    <vcs-list :items="icons" :searchable="true" :show-title="false" />
+  </v-sheet>
+</template>
+
+<script>
+  import { Icons, VcsList } from '@vcmap/ui';
+  import { VSheet } from 'vuetify/lib';
+  import { computed } from 'vue';
+
+  export default {
+    name: 'AllIconsComponent',
+    components: {
+      VcsList,
+      VSheet,
+    },
+    setup() {
+      const createListItem = (icon) => {
+        const key = `$${icon}`;
+        return {
+          name: key,
+          title: key,
+          icon: key,
+          actions: [
+            {
+              name: 'copy-icon-to-clipboard',
+              icon: 'mdi-content-copy',
+              title: `Copy ${key}`,
+              callback: async () => {
+                await navigator.clipboard.writeText(key);
+              },
+            },
+          ],
+        };
+      };
+
+      return {
+        icons: computed(() =>
+          Object.keys(Icons).map((icon) => createListItem(icon)),
+        ),
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .icons-window {
+    max-height: 600px;
+  }
+</style>

package/plugins/@vcmap-show-case/icons-example/src/index.js

@@ -0,0 +1,46 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import AllIconsComponent from './AllIconsComponent.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function iconsExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Icons Examples',
+          title: 'Icons Example Plugin',
+        },
+        {
+          id: 'icons-example',
+          component: AllIconsComponent,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Icons Example',
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

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

@@ -0,0 +1,3 @@
+# List Example
+
+This is a show-case plugin demonstrating the usage of [VcsList](../../../src/components/lists/VcsList.vue).

package/plugins/@vcmap-show-case/list-example/package.json

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

package/plugins/@vcmap-show-case/list-example/src/ListExample.vue

@@ -0,0 +1,411 @@
+<template>
+  <v-sheet>
+    <VcsFormSection heading="Settings">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              v-model="selectable"
+              label="Selectable"
+              class="ma-0"
+              dense
+            />
+          </v-col>
+          <v-col>
+            <v-switch
+              :disabled="!selectable"
+              v-model="selectSingle"
+              label=" Single Select"
+              class="ma-0"
+              dense
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              dense
+              v-model="searchable"
+              label="Searchable"
+              class="ma-0"
+            />
+          </v-col>
+          <v-col>
+            <v-switch
+              dense
+              v-model="draggable"
+              label="Draggable"
+              class="ma-0"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Title">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              dense
+              v-model="showTitle"
+              label="Show Title"
+              class="ma-0"
+            />
+          </v-col>
+          <v-col>
+            <vcs-text-field
+              v-model="title"
+              placeholder="Title"
+              :disabled="!showTitle"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              v-model="titleActions"
+              label="Title Actions"
+              class="ma-0"
+              dense
+            />
+          </v-col>
+          <v-col>
+            <v-switch
+              dense
+              v-model="titleIcon"
+              label="Title Icon"
+              class="ma-0"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Item">
+      <v-container class="py-1 px-1">
+        <v-row no-gutters>
+          <v-dialog v-model="dialog" width="400">
+            <template #activator="{ on }">
+              <vcs-form-button v-on="on"> Add An item </vcs-form-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
+                  dense
+                  label="visible"
+                  v-model="newItem.visible"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="disabled"
+                  v-model="newItem.disabled"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="random icon"
+                  v-model="newItem.icon"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="hasUpdate"
+                  v-model="newItem.hasUpdate"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="console.log action"
+                  v-model="newItem.action"
+                  class="ma-0"
+                />
+                <v-switch
+                  label="console.log on clicked"
+                  v-model="newItem.clicked"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="console.log selected state"
+                  v-model="newItem.selected"
+                  class="ma-0"
+                />
+                <vcs-form-button type="submit"> Add </vcs-form-button>
+              </v-form>
+            </v-card>
+          </v-dialog>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Selection">
+      <v-container class="py-1 px-1">
+        <v-row no-gutters>
+          <template v-if="selectable">
+            <v-col>
+              <vcs-form-button @click="selected = []"> Clear </vcs-form-button>
+            </v-col>
+            <v-col>
+              <v-switch
+                v-model="showSelection"
+                label="Show Selection"
+                dense
+                class="ma-0"
+              />
+            </v-col>
+          </template>
+        </v-row>
+        <v-row no-gutters>
+          <ul v-if="showSelection" class="mx-2">
+            <li v-for="(i, index) in selected" :key="`item-${index}`">
+              {{ i.title }}
+            </li>
+          </ul>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+
+    <vcs-list
+      :items="items"
+      :draggable="draggable"
+      :selectable="selectable"
+      :single-select="selectSingle"
+      :searchable="searchable"
+      :show-title="showTitle"
+      :icon="titleIconSrc"
+      :actions="titleActionsArray"
+      :title="title"
+      v-model="selected"
+      @item-moved="move"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import {
+    VcsList,
+    VcsFormButton,
+    VcsTextField,
+    Icons,
+    VcsFormSection,
+  } from '@vcmap/ui';
+  import {
+    VSwitch,
+    VSheet,
+    VDialog,
+    VCard,
+    VForm,
+    VContainer,
+    VRow,
+    VCol,
+  } 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',
+      selectionChanged: (value) => console.log('changed cb foo', value),
+    },
+    {
+      name: 'bar',
+      title: 'Bar',
+      actions: [
+        {
+          name: 'console.log',
+          callback() {
+            console.log('bar action');
+          },
+        },
+      ],
+      selectionChanged: (value) => console.log('changed cb bar', value),
+    },
+    {
+      name: 'baz',
+      title: 'Baz',
+      tooltip: 'special baz',
+      selectionChanged: (value) => console.log('bchanged cb baz', value),
+    },
+  ];
+
+  export default {
+    name: 'ListExample',
+    components: {
+      VcsList,
+      VcsFormButton,
+      VcsTextField,
+      VcsFormSection,
+      VSwitch,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const draggable = ref(true);
+      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 {
+        draggable,
+        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,
+            hasUpdate: newItem.value.hasUpdate,
+          };
+
+          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 = (selectedValue) => {
+              if (selectedValue) {
+                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,
+            hasUpdate: 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;
+            }
+          },
+        }),
+        move({ item, targetIndex }) {
+          let target = targetIndex;
+          target = target >= 0 ? target : 0;
+          target =
+            target < items.value.length ? target : items.value.length - 1;
+          const from = items.value.indexOf(item);
+          if (from !== target) {
+            items.value.splice(from, 1);
+            items.value.splice(target, 0, item);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .d-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+</style>

package/plugins/@vcmap-show-case/list-example/src/index.js

@@ -0,0 +1,46 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import ListExample from './ListExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function iconsExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'List Examples',
+          title: 'List Example Plugin',
+        },
+        {
+          id: 'list-example',
+          component: ListExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'List Example',
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

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

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

package/plugins/@vcmap-show-case/notifier-tester/package.json

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

package/plugins/@vcmap-show-case/notifier-tester/src/NotifierTester.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-sheet>
+    <v-text-field v-model="message" label="Message" />
+    <v-text-field v-model.number="timeout" label="Timeout" />
+    <VcsCheckbox v-model="hasTimeout" label="Toggle Timeout" />
+    <v-list>
+      <v-list-item v-for="type in types" :key="type">
+        {{ type }}
+        <v-list-item-action @click="notify(type)">
+          <v-icon>mdi-plus</v-icon>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <v-card>
+      Current number of notifications: {{ notifications.length }}
+    </v-card>
+  </v-sheet>
+</template>
+
+<script>
+  import {
+    VSheet,
+    VList,
+    VListItem,
+    VListItemAction,
+    VTextField,
+    VIcon,
+    VCard,
+    VDivider,
+  } from 'vuetify/lib';
+  import { NotificationType, VcsCheckbox } from '@vcmap/ui';
+  import { computed, inject, ref } from 'vue';
+
+  export default {
+    name: 'NotifierTester',
+    components: {
+      VSheet,
+      VList,
+      VListItem,
+      VListItemAction,
+      VTextField,
+      VIcon,
+      VCard,
+      VDivider,
+      VcsCheckbox,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const message = ref('Message');
+      const timeout = ref(5000);
+
+      return {
+        types: NotificationType,
+        message,
+        notify(type) {
+          app.notifier.add({
+            type,
+            message: message.value,
+            timeout: timeout.value,
+          });
+        },
+        notifications: app.notifier.notifications,
+        timeout,
+        hasTimeout: computed({
+          get() {
+            return timeout.value === -1;
+          },
+          set(value) {
+            if (value && timeout.value !== -1) {
+              timeout.value = -1;
+            } else if (timeout.value === -1) {
+              timeout.value = 5000;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,42 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import component from './NotifierTester.vue';
+
+export default function createNotifierPlugin() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Notifier Tester',
+          icon: '$vcsComment',
+        },
+        {
+          id: 'notifier-tester',
+          state: {
+            headerTitle: 'Notifier Tester',
+            headerIcon: '$vcsComment',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        packageJSON.name,
+      );
+      vcsApp.navbarManager.add(
+        { id: 'notifier', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/@vcmap-show-case/plugin-editors/README.md

@@ -0,0 +1,4 @@
+# Plugin Editors
+
+A plugin rendering all config editors of available plugins.
+Can be used for development of new plugin config editors.