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

package/plugins/@vcmap/simple-graph/index.js

@@ -2,13 +2,13 @@ import SimpleGraphView from './simpleGraphView.js';
 /**
  * @returns {VcsPlugin}
  */
-export default async function () {
+export default async function simpleGraph() {
   return {
     name: '@vcmap/simpleGraph',
     onVcsAppMounted(app) {
       /** Example for registering custom component on FeatureInfo */
       app.featureInfo.classRegistry.registerClass(
-        app.dynamicContextId,
+        app.dynamicModuleId,
         SimpleGraphView.className,
         SimpleGraphView,
       );

package/plugins/@vcmap/simple-graph/simpleGraphView.js

@@ -20,7 +20,9 @@ class SimpleGraphView extends AbstractFeatureInfoView {
   /**
    * @type {string}
    */
-  static get className() { return 'SimpleGraphView'; }
+  static get className() {
+    return 'SimpleGraphView';
+  }
 
   /**
    * @param {SimpleGraphFeatureInfoViewOptions} options

package/plugins/@vcmap/theme-changer/README.md

@@ -2,6 +2,7 @@
 
 This is a plugin to manage themes of the VC Map.
 This plugin provides 4 themes:
+
 - VCS Theme (defined by `@vcmap/ui`)
 - Theme 1
 - Theme 2
@@ -14,8 +15,9 @@ Per config custom themes can be added.
 You can override the themes array by defining your own themes. A theme must provide:
 
 ### VcMapTheme
-| Property | Type | Description            |
-|----------|------|------------------------|
-| name     | string | name of the theme      |
+
+| Property | Type         | Description            |
+| -------- | ------------ | ---------------------- |
+| name     | string       | name of the theme      |
 | dark     | VuetifyTheme | dark theme definition  |
 | light    | VuetifyTheme | light theme definition |

package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue

@@ -38,29 +38,25 @@
           </v-list-item-action>
         </v-list-item>
         <v-card class="my-1 ma-1 py-1 white">
-          <h2>
-            light
-          </h2>
+          <h2>light</h2>
           <v-chip
             class="mx-1"
             label
             :color="theme.light[key]?.base || theme.light[key]"
-            v-for="(key, index) in Object.keys(theme.light)"
-            :key="index"
+            v-for="(key, lightIdx) in Object.keys(theme.light)"
+            :key="lightIdx"
           >
             {{ key }}
           </v-chip>
         </v-card>
         <v-card class="my-1 ma-1 py-1 black">
-          <h2 class="white--text">
-            dark
-          </h2>
+          <h2 class="white--text">dark</h2>
           <v-chip
             class="mx-1"
             label
             :color="theme.dark[key]?.base || theme.dark[key]"
-            v-for="(key, index) in Object.keys(theme.dark)"
-            :key="index"
+            v-for="(key, darkIdx) in Object.keys(theme.dark)"
+            :key="darkIdx"
           >
             {{ key }}
           </v-chip>

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/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() {