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

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" />
@@ -56,6 +54,50 @@
     </v-list-item>
     <v-divider />
     <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          <!-- eslint-disable-next-line -->
+          &ltVcsFormButton /&gt
+        </v-list-item-title>
+        <v-row>
+          <v-col>
+            <v-card>
+              <v-card-title>OUTLINED</v-card-title>
+              <v-card-actions>
+                <VcsFormButton
+                  @click="toggle"
+                  :disabled="disabled"
+                  :has-update="update"
+                  :loading="loading"
+                  tooltip="OUTLINED BUTTON"
+                >
+                  OUTLINED
+                </VcsFormButton>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+          <v-col>
+            <v-card>
+              <v-card-title>FILLED</v-card-title>
+              <v-card-actions>
+                <VcsFormButton
+                  @click="toggle"
+                  :disabled="disabled"
+                  :has-update="update"
+                  :loading="loading"
+                  tooltip="FILLED BUTTON"
+                  variant="filled"
+                >
+                  FILLED
+                </VcsFormButton>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-list-item-content>
+    </v-list-item>
+    <v-divider />
+    <!--<v-list-item>
       <v-list-item-content>
         <v-list-item-title class="font-weight-bold">
           &ltVcsButton standard/&gt (default)
@@ -100,10 +142,11 @@
         </v-row>
       </v-list-item-content>
     </v-list-item>
-    <v-divider />
+    <v-divider />-->
     <v-list-item>
       <v-list-item-content>
         <v-list-item-title class="font-weight-bold">
+          <!-- eslint-disable-next-line -->
           &ltVcsButton large/&gt (e.g. Navbar)
         </v-list-item-title>
         <v-row>
@@ -117,7 +160,8 @@
                   :disabled="disabled"
                   :background="background"
                   :has-update="update"
-                  :icon="loading ? '$vcsProgress' : '$vcs3d'"
+                  :loading="loading"
+                  icon="$vcs3d"
                   tooltip="ButtonClass large"
                   large
                 />
@@ -130,8 +174,17 @@
               <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,
+                    },
                   ]"
                   :overflow-count="0"
                   button-class="large"
@@ -146,6 +199,7 @@
     <v-list-item>
       <v-list-item-content>
         <v-list-item-title class="font-weight-bold">
+          <!-- eslint-disable-next-line -->
           &ltVcsButton small/&gt
         </v-list-item-title>
         <v-row>
@@ -158,7 +212,8 @@
                   :active="active"
                   :background="background"
                   :disabled="disabled"
-                  :icon="loading ? '$vcsProgress' : '$vcsColorSwatch'"
+                  :loading="loading"
+                  icon="$vcsColorSwatch"
                   tooltip="ACTION BUTTON"
                   small
                 />
@@ -171,8 +226,17 @@
               <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
@@ -186,7 +250,7 @@
   </v-card>
 </template>
 <script>
-  import { VcsButton, VcsActionButtonList } from '@vcmap/ui';
+  import { VcsButton, VcsFormButton, VcsActionButtonList } from '@vcmap/ui';
   import { ref } from 'vue';
   import {
     VCard,
@@ -206,6 +270,7 @@
     name: 'ButtonsExample',
     components: {
       VcsButton,
+      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/Categories.vue

@@ -1,31 +1,34 @@
 <template>
   <div>
-    <div
-      class="overflow-auto"
-    >
+    <div class="overflow-auto">
       <Category
         v-for="category in categories"
         :key="category"
         :category-name="category"
       />
     </div>
-    <hr>
-    <span>
-      <VcsButton icon="$vcsPlus" @click="newDialog = true" />
-      <VcsButton icon="$vcsExport" @click="uploadDialog = true" />
-      <VcsButton @click="addManagedCategories">Add Categories To Manager</VcsButton>
-      <VcsButton @click="addFoobar">Add Foobar</VcsButton>
-    </span>
-    <v-dialog
-      v-model="newDialog"
-    >
-      <v-card
-        class="pa-2"
-      >
-        <v-form
-          @submit.prevent="add"
+    <hr />
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2">
+        <VcsFormButton icon="$vcsPlus" @click="newDialog = true" />
+        <VcsFormButton icon="$vcsExport" @click="uploadDialog = true" />
+      </div>
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton @click="addManagedCategories" variant="filled"
+          >Add Categories</VcsFormButton
         >
-          <v-select v-model="newCategory.type" :items="['Category', 'AppBackedCategory']" />
+        <VcsFormButton @click="addFoobar" variant="filled"
+          >Add Foobar</VcsFormButton
+        >
+      </div>
+    </div>
+    <v-dialog v-model="newDialog">
+      <v-card class="pa-2">
+        <v-form @submit.prevent="add">
+          <v-select
+            v-model="newCategory.type"
+            :items="['Category', 'AppBackedCategory']"
+          />
           <v-select
             v-model="newCategory.collectionName"
             v-if="newCategory.type === 'category.AppBackedCategory'"
@@ -33,23 +36,15 @@
             placeholder="Collection Name"
           />
           <v-text-field v-model="newCategory.name" v-else />
-          <v-btn type="submit">
-            Add
-          </v-btn>
+          <v-btn type="submit"> Add </v-btn>
         </v-form>
       </v-card>
     </v-dialog>
-    <v-dialog
-      v-model="uploadDialog"
-    >
+    <v-dialog v-model="uploadDialog">
       <v-card>
-        <v-form
-          @submit.prevent="upload"
-        >
+        <v-form @submit.prevent="upload">
           <v-textarea v-model="uploadString" />
-          <v-btn type="submit">
-            Upload
-          </v-btn>
+          <v-btn type="submit"> Upload </v-btn>
         </v-form>
       </v-card>
     </v-dialog>
@@ -58,7 +53,7 @@
 
 <script>
   import { inject, ref, onUnmounted } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
+  import { VcsFormButton } from '@vcmap/ui';
   import { GeoJSONLayer } from '@vcmap/core';
   import {
     VDialog,
@@ -76,7 +71,7 @@
     name: 'CategoriesComponent',
     components: {
       Category,
-      VcsButton,
+      VcsFormButton,
       VDialog,
       VCard,
       VForm,
@@ -87,7 +82,7 @@
     },
     setup() {
       const app = inject('vcsApp');
-      const categories = ref([...app.categories].map(c => c.name));
+      const categories = ref([...app.categories].map((c) => c.name));
       const newDialog = ref(false);
       const uploadDialog = ref(false);
       const uploadString = ref('');
@@ -98,15 +93,17 @@
       });
       const listeners = [
         app.categories.added.addEventListener(() => {
-          categories.value = [...app.categories].map(c => c.name);
+          categories.value = [...app.categories].map((c) => c.name);
         }),
         app.categories.removed.addEventListener(() => {
-          categories.value = [...app.categories].map(c => c.name);
+          categories.value = [...app.categories].map((c) => c.name);
         }),
       ];
 
       onUnmounted(() => {
-        listeners.forEach((cb) => { cb(); });
+        listeners.forEach((cb) => {
+          cb();
+        });
       });
 
       return {
@@ -129,10 +126,18 @@
               type: 'Category',
               title: 'Foobar',
             });
-            app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
-            app.categoryManager.addMappingFunction(() => true, (item, c, listItem) => {
-              listItem.title = item.name;
-            }, [category.name], packageJSON.name);
+            app.categoryManager.add(
+              { categoryName: category.name, draggable: true },
+              packageJSON.name,
+            );
+            app.categoryManager.addMappingFunction(
+              () => true,
+              (item, c, listItem) => {
+                listItem.title = item.name;
+              },
+              [category.name],
+              packageJSON.name,
+            );
             for (let i = 0; i <= 12; i++) {
               category.collection.add({
                 name: `foobar-${i}`,
@@ -145,13 +150,18 @@
           if (newCategoryValue.type === 'AppBackedCategory') {
             newCategoryValue.name = newCategoryValue.collectionName;
           }
-          const category = await app.categories.requestCategory(newCategoryValue);
+          const category = await app.categories.requestCategory(
+            newCategoryValue,
+          );
           newCategory.value = {
             name: 'new',
             type: 'Category',
             collectionName: null,
           };
-          app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
+          app.categoryManager.add(
+            { categoryName: category.name },
+            packageJSON.name,
+          );
           newDialog.value = false;
         },
         async upload() {
@@ -161,11 +171,21 @@
               console.error('must provide name');
               return;
             }
-            const category = await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
+            const category = await app.categories.requestCategory({
+              name: jsonUpload.name,
+              type: 'Category',
+            });
             if (jsonUpload?.items?.length > 0) {
-              await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicModuleId);
+              await app.categories.parseCategoryItems(
+                jsonUpload.name,
+                jsonUpload.items,
+                app.dynamicModuleId,
+              );
             }
-            app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
+            app.categoryManager.add(
+              { categoryName: category.name },
+              packageJSON.name,
+            );
             uploadString.value = '';
             uploadDialog.value = false;
           } catch (e) {
@@ -180,76 +200,83 @@
               collectionName: 'layers',
               title: 'categories.layers',
             });
-            const actions = [{
-              name: 'mySuperAction',
-              icon: 'mdi-plus',
-              callback: () => {
-                layersCat.collection.add(new GeoJSONLayer({
-                  features: [
-                    {
-                      type: 'Feature',
-                      properties: {},
-                      geometry: {
-                        type: 'Polygon',
-                        coordinates: [
-                          [
-                            [
-                              13.376044753386196,
-                              52.51700747314845,
-                              34.434221826595746,
-                            ],
-                            [
-                              13.375890137534464,
-                              52.51683412207231,
-                              34.43535288837092,
-                            ],
-                            [
-                              13.376141126603242,
-                              52.51641627693124,
-                              34.66410424636929,
-                            ],
-                            [
-                              13.376773170085109,
-                              52.516279904694215,
-                              34.73478984011562,
-                            ],
-                            [
-                              13.376887028670879,
-                              52.51695485856382,
-                              34.72412287410914,
-                            ],
-                            [
-                              13.376044753386196,
-                              52.51700747314845,
-                              34.434221826595746,
-                            ],
-                          ],
-                        ],
-                      },
-                    }],
-                }));
-              },
-            }];
-            app.categoryManager.add({ categoryName: layersCat.name, actions }, packageJSON.name);
-            app.categoryManager.addMappingFunction(() => true, (item, category, treeViewItem) => {
-              // eslint-disable-next-line no-console
-              const action = {
+            const actions = [
+              {
                 name: 'mySuperAction',
-                icon: '$vcsSimpleCircleFilled',
+                icon: 'mdi-plus',
                 callback: () => {
-                  console.log(item, category, treeViewItem);
-                },
-              };
-              treeViewItem.actions.push(action);
-              const action2 = {
-                name: 'mySuperAction3',
-                icon: 'mdi-minus',
-                callback: () => {
-                  category.collection.remove(item);
+                  layersCat.collection.add(
+                    new GeoJSONLayer({
+                      features: [
+                        {
+                          type: 'Feature',
+                          properties: {},
+                          geometry: {
+                            type: 'Polygon',
+                            coordinates: [
+                              [
+                                [
+                                  13.376044753386196, 52.51700747314845,
+                                  34.434221826595746,
+                                ],
+                                [
+                                  13.375890137534464, 52.51683412207231,
+                                  34.43535288837092,
+                                ],
+                                [
+                                  13.376141126603242, 52.51641627693124,
+                                  34.66410424636929,
+                                ],
+                                [
+                                  13.376773170085109, 52.516279904694215,
+                                  34.73478984011562,
+                                ],
+                                [
+                                  13.376887028670879, 52.51695485856382,
+                                  34.72412287410914,
+                                ],
+                                [
+                                  13.376044753386196, 52.51700747314845,
+                                  34.434221826595746,
+                                ],
+                              ],
+                            ],
+                          },
+                        },
+                      ],
+                    }),
+                  );
                 },
-              };
-              treeViewItem.actions.push(action2);
-            }, ['layers'], packageJSON.name);
+              },
+            ];
+            app.categoryManager.add(
+              { categoryName: layersCat.name, actions, draggable: true },
+              packageJSON.name,
+            );
+            app.categoryManager.addMappingFunction(
+              () => true,
+              (item, category, treeViewItem) => {
+                // eslint-disable-next-line no-console
+                const action = {
+                  name: 'mySuperAction',
+                  icon: '$vcsSimpleCircleFilled',
+                  callback: () => {
+                    console.log(item, category, treeViewItem);
+                  },
+                };
+                treeViewItem.actions.push(action);
+                const action2 = {
+                  name: 'mySuperAction3',
+                  icon: 'mdi-minus',
+                  callback: () => {
+                    category.collection.remove(item);
+                  },
+                };
+                treeViewItem.actions.push(action2);
+              },
+              ['layers'],
+              packageJSON.name,
+            );
           }
         },
       };
@@ -258,7 +285,7 @@
 </script>
 
 <style scoped>
-.max-height {
-  max-height: 50%;
-}
+  .max-height {
+    max-height: 50%;
+  }
 </style>

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

@@ -5,13 +5,27 @@
         {{ categoryName }}
       </span>
       <span class="float-right">
-        <vcs-button icon="$vcsPlus" @click="dialog = true" />
-        <vcs-button icon="mdi-download" @click="download" />
-        <a :href="downloadLink" target="_blank" ref="link" download="category.json" />
+        <vcs-button
+          small
+          icon="$vcsPlus"
+          @click.stop="dialog = true"
+          class="ma-1"
+        />
+        <vcs-button
+          small
+          icon="mdi-download"
+          @click.stop="download"
+          class="ma-1"
+        />
+        <a
+          :href="downloadLink"
+          target="_blank"
+          ref="link"
+          download="category.json"
+        />
       </span>
     </span>
 
-
     <v-virtual-scroll
       item-height="44px"
       v-if="open"
@@ -20,11 +34,8 @@
       :bench="6"
       width="100%"
     >
-      <template #default="{item}">
-        <v-list-item
-          :key="item.name"
-          class="mb-1"
-        >
+      <template #default="{ item }">
+        <v-list-item :key="item.name" class="mb-1">
           <v-list-item-content>
             <v-list-item-title class="subtitle-1">
               {{ item.name }}
@@ -34,17 +45,11 @@
         </v-list-item>
       </template>
     </v-virtual-scroll>
-    <v-dialog
-      v-model="dialog"
-    >
+    <v-dialog v-model="dialog">
       <v-card>
-        <v-form
-          @submit.prevent="addItem"
-        >
+        <v-form @submit.prevent="addItem">
           <v-textarea v-model="jsonString" />
-          <vcs-button type="submit">
-            Add
-          </vcs-button>
+          <vcs-button type="submit"> Add </vcs-button>
         </v-form>
       </v-card>
     </v-dialog>
@@ -99,7 +104,10 @@
       const open = ref(true);
       const link = ref(null);
       if (categoryObject) {
-        category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
+        category.value = [...categoryObject.collection].map((c) => ({
+          name: c.name,
+          type: c.className || 'Object',
+        }));
       }
 
       return {
@@ -113,11 +121,19 @@
           try {
             const config = JSON.parse(jsonString.value);
             if (categoryObject.classRegistryName) {
-              categoryObject.collection.add(getObjectFromClassRegistry(app[categoryObject.classRegistryName], config));
+              categoryObject.collection.add(
+                getObjectFromClassRegistry(
+                  app[categoryObject.classRegistryName],
+                  config,
+                ),
+              );
             } else {
               categoryObject.collection.add(config);
             }
-            category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
+            category.value = [...categoryObject.collection].map((c) => ({
+              name: c.name,
+              type: c.className || 'Object',
+            }));
             jsonString.value = '{\n}';
           } catch (e) {
             // eslint-disable-next-line no-console
@@ -126,8 +142,14 @@
           dialog.value = false;
         },
         download() {
-          const stringObject = JSON.stringify(categoryObject.serializeModule(app.dynamicModuleId), null, 2);
-          downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
+          const stringObject = JSON.stringify(
+            categoryObject.serializeModule(app.dynamicModuleId),
+            null,
+            2,
+          );
+          downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(
+            stringObject,
+          )}`;
           if (downloadLink.value) {
             nextTick(() => {
               link.value.click();
@@ -139,6 +161,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -7,9 +7,15 @@ import Categories from './Categories.vue';
  */
 export default async function categoryTest() {
   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;
+    },
     initialize(app) {
       const { action, destroy } = createToggleAction(
         {