@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

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

@@ -1,74 +1,46 @@
 <template>
   <v-sheet>
     <VcsFormSection heading="Settings">
-      <v-container class="py-0 px-1">
+      <v-container class="py-0 px-4">
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              v-model="selectable"
-              label="Selectable"
-              class="ma-0"
-              dense
-            />
+            <v-switch v-model="selectable" label="Selectable" />
           </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-switch v-model="searchable" label="Searchable" />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="draggable"
-              label="Draggable"
-              class="ma-0"
-            />
+            <v-switch v-model="draggable" label="Draggable" />
           </v-col>
         </v-row>
         <v-row no-gutters>
           <v-col>
             <v-switch
-              dense
               v-model="prependIndex"
               label="Prepend Index"
               class="ma-0"
             />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="appendIndex"
-              label="Append Index"
-              class="ma-0"
-            />
+            <v-switch v-model="appendIndex" label="Append Index" />
           </v-col>
         </v-row>
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Title">
-      <v-container class="py-0 px-1">
+      <v-container class="py-0 px-4">
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              dense
-              v-model="showTitle"
-              label="Show Title"
-              class="ma-0"
-            />
+            <v-switch v-model="showTitle" label="Show Title" />
           </v-col>
           <v-col>
             <vcs-text-field
@@ -84,28 +56,22 @@
               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-switch 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-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="pa-2">
+            <v-card class="py-2 px-4">
               <v-form @submit.prevent="add">
                 <vcs-text-field
                   v-model="newItem.name"
@@ -117,52 +83,23 @@
                   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
-                  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="rename action"
-                  v-model="newItem.renameAction"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
-                  label="console.log action"
-                  v-model="newItem.action"
-                  class="ma-0"
+                  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"
-                  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>
@@ -172,7 +109,7 @@
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Selection">
-      <v-container class="py-1 px-1">
+      <v-container class="py-2 px-4">
         <v-row no-gutters>
           <template v-if="selectable">
             <v-col>
@@ -209,10 +146,13 @@
       @item-moved="move"
       @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
     >
-      <template #[`item.prepend-title`]="{ index }" v-if="prependIndex">
+      <template #[`item.prepend`]="{ index }" v-if="prependIndex">
         {{ index }}
       </template>
-      <template #[`item.append-title`]="{ index }" v-if="appendIndex">
+      <template #[`item.title`]="{ index }">
+        {{ index }}
+      </template>
+      <template #[`item.append`]="{ index }" v-if="appendIndex">
         {{ index }}
       </template>
     </vcs-list>
@@ -226,7 +166,6 @@
     VcsTextField,
     Icons,
     VcsFormSection,
-    createListItemRenameAction,
   } from '@vcmap/ui';
   import {
     VSwitch,
@@ -238,7 +177,7 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, ref } from 'vue';
+  import { computed, reactive, ref } from 'vue';
 
   function getRandomIcon() {
     const keys = Object.keys(Icons);
@@ -311,7 +250,8 @@
         disabled: false,
         visible: true,
         icon: false,
-        renameAction: false,
+        renamable: false,
+        toggleRename: false,
         action: false,
         clicked: false,
         selected: false,
@@ -339,13 +279,14 @@
           (v) => v.length > 0 || 'Input must have a length',
         ],
         add() {
-          const item = {
+          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();
@@ -353,9 +294,13 @@
 
           item.actions = [];
 
-          if (newItem.value.renameAction) {
-            item.rename = false;
-            item.actions.push(createListItemRenameAction(item));
+          if (newItem.value.toggleRename) {
+            item.actions.push({
+              name: 'toggle rename',
+              callback() {
+                item.renamable = !item.renamable;
+              },
+            });
           }
 
           if (newItem.value.action) {
@@ -368,9 +313,11 @@
           }
 
           if (newItem.value.clicked) {
-            item.clicked = () => {
-              console.log(`${item.name} just got clicked`);
-            };
+            item.clickedCallbacks = [
+              () => {
+                console.log(`${item.name} just got clicked`);
+              },
+            ];
           }
 
           if (newItem.value.selected) {
@@ -382,6 +329,13 @@
               }
             };
           }
+
+          if (newItem.value.renamable) {
+            item.titleChanged = (newTitle) => {
+              item.title = newTitle;
+            };
+          }
+
           items.value.push(item);
           newItem.value = {
             name: 'foo',
@@ -389,7 +343,7 @@
             disabled: false,
             visible: true,
             icon: false,
-            renameAction: false,
+            renamable: false,
             action: false,
             clicked: false,
             selected: false,

package/plugins/@vcmap-show-case/plugin-editors/src/PluginEditors.vue

@@ -1,15 +1,21 @@
 <template>
-  <VcsList :items="plugins" :show-title="false" />
+  <div>
+    <VcsHelp
+      text="Below all config editors provided by plugins are listed. Important Note: Changes made in editors are not applied!"
+    ></VcsHelp>
+    <VcsList :items="plugins" :show-title="false" />
+  </div>
 </template>
 
 <script>
   import { inject, onUnmounted, ref } from 'vue';
-  import { VcsList, createToggleAction, WindowSlot } from '@vcmap/ui';
+  import { VcsList, createToggleAction, WindowSlot, VcsHelp } from '@vcmap/ui';
   import { name } from '../package.json';
 
   export default {
     name: 'PluginEditors',
     components: {
+      VcsHelp,
       VcsList,
     },
     setup() {
@@ -33,20 +39,17 @@
                   parentId: name,
                   slot: WindowSlot.DYNAMIC_CHILD,
                   props: {
-                    getConfig: () =>
-                      Promise.resolve(
-                        vcsApp.plugins.getSerializedByKey(plugin.name),
-                      ),
+                    getConfig: () => {
+                      return vcsApp.plugins.getSerializedByKey(plugin.name);
+                    },
                     setConfig(config) {
                       if (config) {
                         vcsApp.notifier.add({
                           type: 'info',
-                          message: `${plugin.name}: ${JSON.stringify(
-                            config,
-                            null,
-                            2,
-                          )}`,
+                          title: plugin.name,
+                          message: JSON.stringify(config, null, 2),
                         });
+                        console.log(config);
                       } else {
                         vcsApp.notifier.add({
                           type: 'warning',

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -10,29 +10,36 @@
         @click="toggle(module)"
       >
         {{ module.name || module.configUrl }}
-        <VcsTooltip
+        <v-icon
           v-if="module.description && toggleable"
-          :tooltip="module.description"
+          right
+          v-bind="{ ...$attrs, ...$props }"
         >
-          <template #activator="{ props }">
-            <v-icon right v-bind="{ ...$attrs, ...props }">
-              mdi-help-circle
-            </v-icon>
-          </template>
-        </VcsTooltip>
+          mdi-help-circle
+        </v-icon>
+        <v-tooltip
+          v-if="module.description && toggleable"
+          :text="module.description"
+          activator="parent"
+        />
       </v-chip>
     </v-list>
   </v-container>
 </template>
 
 <script>
-  import { VcsTooltip } from '@vcmap/ui';
-  import { VChip, VContainer, VIcon, VList } from 'vuetify/components';
+  import {
+    VChip,
+    VContainer,
+    VIcon,
+    VList,
+    VTooltip,
+  } from 'vuetify/components';
 
   export default {
     name: 'ModulesListComponent',
     components: {
-      VcsTooltip,
+      VTooltip,
       VContainer,
       VList,
       VChip,

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

@@ -65,6 +65,7 @@ export default function searchExample(config) {
         config.lines ?? defaultLines,
         config.withIcon ?? true,
         config.withPOI ?? true,
+        config.withActions ?? true,
       );
       app.search.add(impl, name);
     },

package/plugins/@vcmap-show-case/search-example/src/searchImpl.js

@@ -36,17 +36,42 @@ function randomPOI(title) {
   return feature;
 }
 
+function getRandomIcon() {
+  const keys = Object.keys(Icons);
+  const index = Math.floor(keys.length * Math.random());
+  return `$${keys[index]}`;
+}
+
 /**
  * @param {string} line
  * @param {boolean} withIcon
  * @param {boolean} withPOI
+ * @param {boolean} withActions
  * @returns {import("@vcmap/ui").ResultItem}
  */
-function lineToResultItem(line, withIcon, withPOI) {
+function lineToResultItem(line, withIcon, withPOI, withActions) {
   let icon;
   if (withIcon) {
-    const icons = Object.keys(Icons);
-    icon = icons[Math.floor(Math.random() * icons.length)];
+    icon = getRandomIcon();
+  }
+
+  let actions;
+  if (withActions) {
+    actions = [
+      {
+        name: 'action-1',
+        icon,
+        callback() {
+          console.log('Action 1');
+        },
+      },
+      {
+        name: 'action-2',
+        callback() {
+          console.log('Action 2');
+        },
+      },
+    ];
   }
 
   let clicked;
@@ -64,6 +89,7 @@ function lineToResultItem(line, withIcon, withPOI) {
     icon,
     clicked,
     feature,
+    actions,
   };
 }
 
@@ -75,19 +101,23 @@ export default class SearchImpl {
    * @param {string[]} lines
    * @param {boolean} withIcon
    * @param {boolean} withPOI
+   * @param {boolean} withActions
    */
-  constructor(lines, withIcon, withPOI) {
+  constructor(lines, withIcon, withPOI, withActions) {
     this.name = name;
     this.lines = lines;
     this.withIcon = withIcon;
     this.withPOI = withPOI;
+    this.withActions = withActions;
   }
 
   search(query) {
     return Promise.resolve(
       this.lines
         .filter((l) => l.toLowerCase().includes(query.toLowerCase()))
-        .map((line) => lineToResultItem(line, this.withIcon, this.withPOI)),
+        .map((line) =>
+          lineToResultItem(line, this.withIcon, this.withPOI, this.withActions),
+        ),
     );
   }
 

package/plugins/@vcmap-show-case/style-input-example/src/StyleExample.vue

@@ -1,27 +1,30 @@
 <template>
   <v-sheet>
-    <VcsFormSection heading="Style menus">
+    <VcsFormSection
+      heading="Style menus"
+      :header-actions="[resetExample, logStyle]"
+    >
       <VcsVectorStyleComponent
-        v-model="styleOptions"
+        v-model="styleOptions.style"
         :value-default="defaultStyleOptions"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Fill Selector">
-      <VcsFillSelector v-model="styleOptions.fill" />
+      <VcsFillSelector v-model="styleOptions.style.fill" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Stroke Selector">
-      <VcsStrokeSelector v-model="styleOptions.stroke" />
+      <VcsStrokeSelector v-model="styleOptions.style.stroke" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Image Selector">
       <VcsImageSelector
-        v-model="styleOptions.image"
+        v-model="styleOptions.style.image"
         :value-default="defaultStyleOptions.image"
         :extended-shape-settings="true"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Text Selector">
       <VcsTextSelector
-        v-model="styleOptions.text"
+        v-model="styleOptions.style.text"
         :value-default="defaultStyleOptions.text"
       />
     </VcsFormSection>
@@ -30,7 +33,7 @@
 
 <script>
   import { VSheet } from 'vuetify/components';
-  import { onMounted, ref, watchEffect } from 'vue';
+  import { reactive, toRaw } from 'vue';
   import {
     VcsFormSection,
     VcsFillSelector,
@@ -40,8 +43,8 @@
     VcsVectorStyleComponent,
     VectorStyleMenus,
   } from '@vcmap/ui';
-  import { parseColor } from '@vcmap/core';
-  import { Fill, Icon, RegularShape, Stroke, Style, Text } from 'ol/style.js';
+  import { getStyleOptions } from '@vcmap/core';
+  import { Fill, RegularShape, Stroke, Style, Text } from 'ol/style.js';
 
   export default {
     name: 'StyleExample',
@@ -97,93 +100,29 @@
         },
       };
 
-      const styleOptions = ref({
-        fill: undefined,
-        stroke: undefined,
-        image: undefined,
-        text: undefined,
-      });
-
-      const fill = exampleStyle.getFill();
-      const stroke = exampleStyle.getStroke();
-      const image = exampleStyle.getImage();
-      const text = exampleStyle.getText();
-
-      // TODO: Replace with new getStyleOptions from @vcmap/core as soon as available
-      if (fill) {
-        styleOptions.value.fill = {
-          color: parseColor(fill.getColor()),
-        };
-      }
-      if (stroke) {
-        styleOptions.value.stroke = {
-          color: parseColor(stroke.getColor()),
-          width: exampleStyle.getStroke().getWidth(),
-        };
-      }
-      if (image) {
-        if (image instanceof RegularShape) {
-          styleOptions.value.image = {
-            points: image.getPoints(),
-            radius: image.getRadius(),
-            radius2: image.getRadius2(),
-            angle: image.getAngle(),
-            fill: {
-              color: parseColor(image.getFill().getColor()),
-            },
-            stroke: {
-              color: parseColor(image.getStroke().getColor()),
-              width: image.getStroke().getWidth(),
-            },
-          };
-        } else if (image instanceof Icon) {
-          styleOptions.value.image = {
-            src: image.getSrc(),
-            scale: image.getScale(),
-            opacity: image.getOpacity(),
-          };
-        }
-      }
-      if (text) {
-        styleOptions.value.text = {
-          font: text.getFont(),
-          fill: {
-            color: parseColor(text.getFill()?.getColor()),
-          },
-          stroke: {
-            color: parseColor(text.getStroke()?.getColor()),
-            width: text.getStroke().getWidth(),
-          },
-          textBaseline: text.getTextBaseline(),
-          offsetY: text.getOffsetY(),
-          offsetX: text.getOffsetX(),
-          text: text.getText(),
-        };
-      }
-
-      onMounted(() => {
-        watchEffect(() => {
-          const newFill = styleOptions.value.fill;
-          const newStroke = styleOptions.value.stroke;
-          const newImage = styleOptions.value.image;
-          // const newText = styleOptions.value.text;
-          // TODO: Replace with new getStyleFromOptions from @vcmap/core as soon as available
-          exampleStyle.setFill(newFill ? new Fill(newFill) : null);
-          exampleStyle.setStroke(newStroke ? new Stroke(newStroke) : null);
-          if (newImage?.points) {
-            // exampleStyle.setImage(new RegularShape(newImage));
-          } else if (newImage?.src) {
-            exampleStyle.setImage(new Icon(newImage));
-          } else {
-            exampleStyle.setImage(null);
-          }
-        });
+      // use reactive wrapper object to ensure updates
+      const styleOptions = reactive({
+        style: getStyleOptions(exampleStyle),
       });
 
       return {
         styleOptions,
         defaultStyleOptions,
         VectorStyleMenus,
+        resetExample: {
+          name: 'resetExample',
+          icon: 'mdi-sync',
+          callback() {
+            styleOptions.style = getStyleOptions(exampleStyle);
+          },
+        },
+        logStyle: {
+          name: 'logStyle',
+          icon: 'mdi-console',
+          callback() {
+            console.log(toRaw(styleOptions.style));
+          },
+        },
       };
     },
   };

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

@@ -0,0 +1,3 @@
+# Theming Example
+
+This is a show-case plugin demonstrating the different Theming options.

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

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