@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

package/plugins/@vcmap/theme-changer/config.json

@@ -1,69 +1,69 @@
 {
-    "name": "themeChanger",
-    "entry": "plugins/@vcmap/theme-changer/index.js",
-    "themes": [
-        {
-            "name": "Theme 1",
-            "dark": {
-                "primary": "#21CFF3",
-                "accent": "#FF4081",
-                "secondary": "#21dc79",
-                "success": "#86af3f",
-                "info": "#f34fc6",
-                "warning": "#FB8C00",
-                "error": "#FF5252"
-            },
-            "light": {
-                "primary": "#22daff",
-                "accent": "#ff6b99",
-                "secondary": "#26ff8c",
-                "success": "#a5d64c",
-                "info": "#ff53d0",
-                "warning": "#ff8e00",
-                "error": "#ff5252"
-            }
-        },
-        {
-            "name": "Theme 2",
-            "dark": {
-                "primary": "#E65100",
-                "accent": "#7CB342",
-                "secondary": "#689F38",
-                "success": "#4CAF50",
-                "info": "#6156d8",
-                "warning": "#1565C0",
-                "error": "#FF7043"
-            },
-            "light": {
-                "primary": "#ffa450",
-                "accent": "#a1e754",
-                "secondary": "#92de4e",
-                "success": "#6dff74",
-                "info": "#7365ff",
-                "warning": "#2e8ac0",
-                "error": "#ff5e3c"
-            }
-        },
-        {
-            "name": "Theme 3",
-            "dark": {
-                "primary": "#33691E",
-                "accent": "#FFCA28",
-                "secondary": "#607D8B",
-                "success": "#FFEB3B",
-                "info": "#2196F3",
-                "warning": "#9C27B0",
-                "error": "#B71C1C"
-            },
-            "light": {
-                "primary": "#6ae240",
-                "accent": "#ffe063",
-                "secondary": "#7ea4b6",
-                "success": "#ffea70",
-                "info": "#229eff",
-                "warning": "#e239ff",
-                "error": "#e82424"
-            }
-        }
-    ]
+  "name": "themeChanger",
+  "entry": "plugins/@vcmap/theme-changer/index.js",
+  "themes": [
+    {
+      "name": "Theme 1",
+      "dark": {
+        "primary": "#21CFF3",
+        "accent": "#FF4081",
+        "secondary": "#21dc79",
+        "success": "#86af3f",
+        "info": "#f34fc6",
+        "warning": "#FB8C00",
+        "error": "#FF5252"
+      },
+      "light": {
+        "primary": "#22daff",
+        "accent": "#ff6b99",
+        "secondary": "#26ff8c",
+        "success": "#a5d64c",
+        "info": "#ff53d0",
+        "warning": "#ff8e00",
+        "error": "#ff5252"
+      }
+    },
+    {
+      "name": "Theme 2",
+      "dark": {
+        "primary": "#E65100",
+        "accent": "#7CB342",
+        "secondary": "#689F38",
+        "success": "#4CAF50",
+        "info": "#6156d8",
+        "warning": "#1565C0",
+        "error": "#FF7043"
+      },
+      "light": {
+        "primary": "#ffa450",
+        "accent": "#a1e754",
+        "secondary": "#92de4e",
+        "success": "#6dff74",
+        "info": "#7365ff",
+        "warning": "#2e8ac0",
+        "error": "#ff5e3c"
+      }
+    },
+    {
+      "name": "Theme 3",
+      "dark": {
+        "primary": "#33691E",
+        "accent": "#FFCA28",
+        "secondary": "#607D8B",
+        "success": "#FFEB3B",
+        "info": "#2196F3",
+        "warning": "#9C27B0",
+        "error": "#B71C1C"
+      },
+      "light": {
+        "primary": "#6ae240",
+        "accent": "#ffe063",
+        "secondary": "#7ea4b6",
+        "success": "#ffea70",
+        "info": "#229eff",
+        "warning": "#e239ff",
+        "error": "#e82424"
+      }
+    }
+  ]
 }

package/plugins/@vcmap/theme-changer/index.js

@@ -37,7 +37,7 @@ export default async function themeChanger(config) {
   const availableThemes = [vcsTheme, ...customThemes];
 
   const pluginConfig = {
-    themes: ref(/** @type {Array<VcMapTheme> */[]),
+    themes: ref(/** @type {Array<VcMapTheme> */ []),
   };
 
   const pluginState = {
@@ -53,12 +53,18 @@ export default async function themeChanger(config) {
     check(theme.dark, Object);
     pluginConfig.themes.value.push(theme);
   }
-  availableThemes.forEach(t => addTheme(t));
+  availableThemes.forEach((t) => addTheme(t));
 
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     config: pluginConfig,
     state: pluginState,
     addTheme,

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

@@ -10,10 +10,11 @@ This directory contains show-case plugins demonstrating the usage of VC Map UI c
 - [list-example](./list-example/README.md)
 - [textfields-example](./textfields-example/README.md)
 - [wizard-example](./wizard-example/README.md)
+- [collection-manager-example](./collection-manager-example/README.md)
 
 ## concepts
 
-- [category-tester](./category-tester/README.md)
+- [category-tester](category-tester/README.md)
 - [config-editor](./config-editor/README.md)
 - [context-menu-tester](./context-menu-tester/README.md)
 - [notifier-tester](./notifier-tester/README.md)

package/plugins/@vcmap-show-case/buttons-example/ButtonsExample.vue

@@ -24,9 +24,7 @@
     <v-divider />
     <v-list-item>
       <v-list-item-content>
-        <v-list-item-title class="font-weight-bold">
-          ACTIVE
-        </v-list-item-title>
+        <v-list-item-title class="font-weight-bold"> ACTIVE </v-list-item-title>
       </v-list-item-content>
       <v-list-item-action>
         <v-switch v-model="active" />
@@ -58,42 +56,59 @@
     <v-list-item>
       <v-list-item-content>
         <v-list-item-title class="font-weight-bold">
-          &ltVcsButton standard/&gt (default)
+          <!-- eslint-disable-next-line -->
+          &ltVcsFormButton /&gt
         </v-list-item-title>
         <v-row>
           <v-col>
             <v-card>
-              <v-card-title>PRIMARY</v-card-title>
+              <v-card-title>Form fields</v-card-title>
               <v-card-actions>
-                <VcsButton
-                  @click="toggle"
-                  :active="active"
-                  :background="background"
-                  color="primary"
-                  :disabled="disabled"
-                  :has-update="update"
-                  :icon="loading ? '$vcsProgress' : ''"
-                  tooltip="PRIMARY BUTTON"
-                >
-                  PRIMARY
-                </VcsButton>
+                <div class="d-flex gap-2">
+                  <VcsFormButton
+                    @click="toggle"
+                    :disabled="disabled"
+                    :has-update="update"
+                    :loading="loading"
+                    tooltip="OUTLINED BUTTON"
+                  >
+                    OUTLINED
+                  </VcsFormButton>
+                  <VcsFormButton
+                    @click="toggle"
+                    :disabled="disabled"
+                    :has-update="update"
+                    :loading="loading"
+                    tooltip="FILLED BUTTON"
+                    variant="filled"
+                  >
+                    FILLED
+                  </VcsFormButton>
+                </div>
               </v-card-actions>
             </v-card>
           </v-col>
           <v-col>
             <v-card>
-              <v-card-title>SECONDARY</v-card-title>
+              <v-card-title>OVERFLOW</v-card-title>
               <v-card-actions>
-                <VcsButton
-                  @click="toggle"
-                  :active="active"
-                  :background="background"
-                  :disabled="disabled"
-                  :has-update="update"
-                  tooltip="SECONDARY BUTTON"
-                >
-                  SECONDARY
-                </VcsButton>
+                <VcsActionButtonList
+                  :actions="[
+                    {
+                      name: 'Action 1',
+                      title: 'Overflow Button with active state',
+                      callback: toggle,
+                      active,
+                    },
+                    {
+                      name: 'Action 2',
+                      title: 'Overflow Button without state',
+                      callback: toggle,
+                    },
+                  ]"
+                  button="VcsFormButton"
+                  :overflow-count="0"
+                />
               </v-card-actions>
             </v-card>
           </v-col>
@@ -104,22 +119,23 @@
     <v-list-item>
       <v-list-item-content>
         <v-list-item-title class="font-weight-bold">
-          &ltVcsButton large/&gt (e.g. Navbar)
+          <!-- eslint-disable-next-line -->
+          &ltVcsToolButton/&gt
         </v-list-item-title>
         <v-row>
           <v-col>
             <v-card>
-              <v-card-title>STANDARD</v-card-title>
+              <v-card-title>Navbar</v-card-title>
               <v-card-actions>
-                <VcsButton
+                <VcsToolButton
                   @click="toggle"
                   :active="active"
                   :disabled="disabled"
                   :background="background"
                   :has-update="update"
-                  :icon="loading ? '$vcsProgress' : '$vcs3d'"
-                  tooltip="ButtonClass large"
-                  large
+                  :loading="loading"
+                  icon="$vcs3d"
+                  tooltip="VcsToolButton"
                 />
               </v-card-actions>
             </v-card>
@@ -130,11 +146,20 @@
               <v-card-actions>
                 <VcsActionButtonList
                   :actions="[
-                    { name: 'Tool 1', title: 'Overflow Button with active state', callback: toggle, active },
-                    { name: 'Tool 2', title: 'Overflow Button without state', callback: toggle },
+                    {
+                      name: 'Tool 1',
+                      title: 'Overflow Button with active state',
+                      callback: toggle,
+                      active,
+                    },
+                    {
+                      name: 'Tool 2',
+                      title: 'Overflow Button without state',
+                      callback: toggle,
+                    },
                   ]"
+                  button="VcsToolButton"
                   :overflow-count="0"
-                  button-class="large"
                 />
               </v-card-actions>
             </v-card>
@@ -146,21 +171,22 @@
     <v-list-item>
       <v-list-item-content>
         <v-list-item-title class="font-weight-bold">
-          &ltVcsButton small/&gt
+          <!-- eslint-disable-next-line -->
+          &ltVcsButton/&gt
         </v-list-item-title>
         <v-row>
           <v-col>
             <v-card>
-              <v-card-title>STANDARD</v-card-title>
+              <v-card-title>Action Item</v-card-title>
               <v-card-actions>
                 <VcsButton
                   @click="toggle"
                   :active="active"
-                  :background="background"
+                  :has-update="update"
                   :disabled="disabled"
-                  :icon="loading ? '$vcsProgress' : '$vcsColorSwatch'"
+                  :loading="loading"
+                  icon="$vcsColorSwatch"
                   tooltip="ACTION BUTTON"
-                  small
                 />
               </v-card-actions>
             </v-card>
@@ -171,11 +197,19 @@
               <v-card-actions>
                 <VcsActionButtonList
                   :actions="[
-                    { name: 'Action 1', title: 'Overflow Button with active state', callback: toggle, active },
-                    { name: 'Action 2', title: 'Overflow Button without state', callback: toggle },
+                    {
+                      name: 'Action 1',
+                      title: 'Overflow Button with active state',
+                      callback: toggle,
+                      active,
+                    },
+                    {
+                      name: 'Action 2',
+                      title: 'Overflow Button without state',
+                      callback: toggle,
+                    },
                   ]"
                   :overflow-count="0"
-                  small
                 />
               </v-card-actions>
             </v-card>
@@ -186,7 +220,12 @@
   </v-card>
 </template>
 <script>
-  import { VcsButton, VcsActionButtonList } from '@vcmap/ui';
+  import {
+    VcsButton,
+    VcsToolButton,
+    VcsFormButton,
+    VcsActionButtonList,
+  } from '@vcmap/ui';
   import { ref } from 'vue';
   import {
     VCard,
@@ -206,6 +245,8 @@
     name: 'ButtonsExample',
     components: {
       VcsButton,
+      VcsToolButton,
+      VcsFormButton,
       VcsActionButtonList,
       VCard,
       VListItem,

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

@@ -7,9 +7,15 @@ import ButtonsExample from './ButtonsExample.vue';
  */
 export default async function buttonsExample() {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {
@@ -32,11 +38,7 @@ export default async function buttonsExample() {
         app.windowManager,
         packageJSON.name,
       );
-      app.navbarManager.add(
-        { action },
-        packageJSON.name,
-        ButtonLocation.TOOL,
-      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
       this._destroyAction = destroy;
     },
     destroy() {

package/plugins/@vcmap-show-case/category-tester/CategoriesExample.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <v-container class="pa-0">
+      <v-expansion-panels
+        accordion
+        multiple
+        v-if="componentIds.length > 0"
+        class="rounded-0"
+      >
+        <collection-component-provider
+          v-for="componentId in componentIds"
+          :component-id="componentId"
+          :key="componentId"
+        >
+          <collection-component-options />
+        </collection-component-provider>
+      </v-expansion-panels>
+    </v-container>
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton @click="newDialog = true" variant="filled"
+          >Request Category</VcsFormButton
+        >
+        <VcsFormButton @click="requestFoobar">Request Foobar</VcsFormButton>
+        <VcsFormButton @click="clear">Clear</VcsFormButton>
+      </div>
+    </div>
+    <v-dialog v-model="newDialog" width="200">
+      <v-card class="pa-2">
+        <v-form @submit.prevent="requestCategory">
+          <VcsTextField
+            v-model="categoryName"
+            :rules="[(value) => value !== '' || 'Please provide a name!']"
+          />
+          <VcsFormButton type="submit"> Request </VcsFormButton>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import { inject, provide, ref } from 'vue';
+  import {
+    VcsFormButton,
+    VcsTextField,
+    CollectionComponentProvider,
+  } from '@vcmap/ui';
+  import {
+    VContainer,
+    VExpansionPanels,
+    VCard,
+    VForm,
+    VDialog,
+  } from 'vuetify/lib';
+  import { name as owner } from './package.json';
+  import CollectionComponentOptions from './CollectionComponentOptions.vue';
+
+  const foobarMappingFunction = (item, c, listItem) => {
+    listItem.title = item.name;
+    listItem.actions = [{ name: 'foobar', callback: () => {} }];
+  };
+
+  export default {
+    name: 'CategoriesExample',
+    components: {
+      CollectionComponentProvider,
+      CollectionComponentOptions,
+      VcsFormButton,
+      VcsTextField,
+      VContainer,
+      VExpansionPanels,
+      VCard,
+      VForm,
+      VDialog,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      provide('collectionManager', app.categoryManager);
+      const componentIds = ref(app.categoryManager.componentIds);
+      const newDialog = ref(false);
+      const categoryName = ref('');
+
+      function requestCategory() {
+        app.categoryManager.requestCategory(
+          { name: categoryName.value },
+          owner,
+        );
+        newDialog.value = false;
+      }
+
+      function clear() {
+        app.categoryManager.clear();
+      }
+
+      async function requestFoobar() {
+        const { collectionComponent, category } =
+          await app.categoryManager.requestCategory(
+            {
+              name: 'foobar',
+              title: 'Foobar',
+            },
+            owner,
+            {
+              actions: [{ name: 'foobar', callback: () => {} }],
+              draggable: true,
+            },
+          );
+
+        app.categoryManager.addMappingFunction(
+          () => true,
+          foobarMappingFunction,
+          owner,
+          [collectionComponent.id],
+        );
+        for (let i = 0; i <= 12; i++) {
+          category.collection.add({
+            name: `foobar-${i}`,
+          });
+        }
+      }
+
+      return {
+        componentIds,
+        categoryName,
+        newDialog,
+        requestCategory,
+        requestFoobar,
+        clear,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>