@vcmap/ui 6.0.0-rc.8 → 6.0.0

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

@@ -1,51 +0,0 @@
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import packageJSON from '../package.json';
-import ButtonsExample from './ButtonsExample.vue';
-
-/**
- * @returns {VcsPlugin}
- */
-export default async function buttonsExample() {
-  return {
-    get name() {
-      return packageJSON.name;
-    },
-    get version() {
-      return packageJSON.version;
-    },
-    get mapVersion() {
-      return packageJSON.mapVersion;
-    },
-    onVcsAppMounted(app) {
-      const { action, destroy } = createToggleAction(
-        {
-          name: 'Buttons Examples',
-          title: 'Buttons Example Plugin',
-          icon: '$vcsTouch',
-        },
-        {
-          id: 'buttons-buttons-example',
-          component: ButtonsExample,
-          slot: WindowSlot.DETACHED,
-          state: {
-            headerTitle: 'Buttons Example',
-            headerIcon: '$vcsTouch',
-          },
-          position: {
-            width: 500,
-          },
-        },
-        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/config-editor/README.md

@@ -1,3 +0,0 @@
-# Config Editor
-
-This is a show-case plugin demonstrating the concept of VC Map Config.

package/plugins/@vcmap-show-case/config-editor/package.json

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

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

@@ -1,62 +0,0 @@
-<template>
-  <v-container class="py-0 px-1">
-    <VcsTextArea v-model="configString" v-if="!loading" />
-    <v-progress-circular v-else />
-
-    <div class="d-flex gc-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/components';
-
-  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

@@ -1,49 +0,0 @@
-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/list-example/README.md

@@ -1,3 +0,0 @@
-# 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

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

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

@@ -1,403 +0,0 @@
-<template>
-  <v-sheet>
-    <VcsFormSection heading="Settings">
-      <v-container class="py-0 px-4">
-        <v-row no-gutters>
-          <v-col>
-            <v-switch v-model="selectable" label="Selectable" />
-          </v-col>
-          <v-col>
-            <v-switch
-              :disabled="!selectable"
-              v-model="selectSingle"
-              label=" Single Select"
-            />
-          </v-col>
-        </v-row>
-        <v-row no-gutters>
-          <v-col>
-            <v-switch v-model="searchable" label="Searchable" />
-          </v-col>
-          <v-col>
-            <v-switch v-model="draggable" label="Draggable" />
-          </v-col>
-        </v-row>
-        <v-row no-gutters>
-          <v-col>
-            <v-switch
-              v-model="prependIndex"
-              label="Prepend Index"
-              class="ma-0"
-            />
-          </v-col>
-          <v-col>
-            <v-switch v-model="appendIndex" label="Append Index" />
-          </v-col>
-        </v-row>
-      </v-container>
-    </VcsFormSection>
-    <VcsFormSection heading="Title">
-      <v-container class="py-0 px-4">
-        <v-row no-gutters>
-          <v-col>
-            <v-switch v-model="showTitle" label="Show Title" />
-          </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"
-            />
-          </v-col>
-          <v-col>
-            <v-switch v-model="titleIcon" label="Title Icon" class="ma-0" />
-          </v-col>
-        </v-row>
-      </v-container>
-    </VcsFormSection>
-    <VcsFormSection heading="Item">
-      <v-container class="py-2 px-4">
-        <v-row no-gutters>
-          <v-dialog v-model="dialog" width="400">
-            <template #activator="{ props }">
-              <vcs-form-button v-bind="props"> Add An item </vcs-form-button>
-            </template>
-            <v-card class="py-2 px-4">
-              <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="hasUpdate" v-model="newItem.hasUpdate" />
-                <v-switch label="rename action" v-model="newItem.renamable" />
-                <v-switch
-                  label="toggle rename action"
-                  v-model="newItem.toggleRename"
-                />
-                <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-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-2 px-4">
-        <v-row no-gutters>
-          <template v-if="selectable">
-            <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"
-      @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
-    >
-      <template #[`item.prepend-title`]="{ index }" v-if="prependIndex">
-        {{ index }}
-      </template>
-      <template #[`item.append-title`]="{ index }" v-if="appendIndex">
-        {{ index }}
-      </template>
-    </vcs-list>
-  </v-sheet>
-</template>
-
-<script>
-  import {
-    VcsList,
-    VcsFormButton,
-    VcsTextField,
-    Icons,
-    VcsFormSection,
-  } from '@vcmap/ui';
-  import {
-    VSwitch,
-    VSheet,
-    VDialog,
-    VCard,
-    VForm,
-    VContainer,
-    VRow,
-    VCol,
-  } from 'vuetify/components';
-  import { computed, reactive, 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 prependIndex = ref(false);
-      const appendIndex = 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,
-        renamable: false,
-        toggleRename: false,
-        action: false,
-        clicked: false,
-        selected: false,
-      });
-      const dialog = ref(false);
-
-      return {
-        draggable,
-        selectable,
-        searchable,
-        selectSingle,
-        selected,
-        showSelection,
-        prependIndex,
-        appendIndex,
-        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 = reactive({
-            name: newItem.value.name,
-            title: newItem.value.title,
-            disabled: newItem.value.disabled,
-            visible: newItem.value.visible,
-            hasUpdate: newItem.value.hasUpdate,
-            renamable: newItem.value.renamable,
-          });
-
-          if (newItem.value.icon) {
-            item.icon = getRandomIcon();
-          }
-
-          item.actions = [];
-
-          if (newItem.value.toggleRename) {
-            item.actions.push({
-              name: 'toggle rename',
-              callback() {
-                item.renamable = !item.renamable;
-              },
-            });
-          }
-
-          if (newItem.value.action) {
-            item.actions.push({
-              name: 'console.log',
-              callback() {
-                console.log("hi, i'm: ", item.name);
-              },
-            });
-          }
-
-          if (newItem.value.clicked) {
-            item.clickedCallbacks = [
-              () => {
-                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`);
-              }
-            };
-          }
-
-          if (newItem.value.renamable) {
-            item.titleChanged = (newTitle) => {
-              item.title = newTitle;
-            };
-          }
-
-          items.value.push(item);
-          newItem.value = {
-            name: 'foo',
-            title: 'foo',
-            disabled: false,
-            visible: true,
-            icon: false,
-            renamable: 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

@@ -1,46 +0,0 @@
-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/table-example/README.md

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

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

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