@vcmap/ui 5.3.7 → 6.0.0-rc.10

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

@@ -81,7 +81,7 @@ export default function formInputsExample(config) {
   /**
    * @type {FormInputsExampleState}
    */
-  const pluginState = {
+  const defaultState = {
     selected: pluginConfig.selectOptions.value[0],
     selectedMultiple: [],
     arrayInput: [1, 2, 3],
@@ -93,11 +93,11 @@ export default function formInputsExample(config) {
     email: '',
     prependedInput: '',
     files: [],
-    dateInput: '',
+    dateInput: undefined,
   };
 
   /** @type {FormInputsExampleState} */
-  const defaultState = JSON.parse(JSON.stringify(pluginState));
+  const pluginState = reactive(structuredClone(defaultState));
 
   /**
    * watcher to update state, when specific config properties are changed
@@ -173,13 +173,12 @@ export default function formInputsExample(config) {
       return packageJSON.mapVersion;
     },
     config: pluginConfig,
-    state: reactive(pluginState),
-    resetState: () =>
-      Object.assign(pluginState, JSON.parse(JSON.stringify(defaultState))),
+    state: pluginState,
+    resetState: () => Object.assign(pluginState, structuredClone(defaultState)),
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
-      const { actions, dense } = createExampleActions();
+      const { actions, disabled } = createExampleActions();
 
       const { action, destroy } = createToggleAction(
         {
@@ -198,10 +197,10 @@ export default function formInputsExample(config) {
             headerActionsOverflow: 2,
             infoUrl: 'https://vc.systems',
           },
-          props: {
+          props: reactive({
             actions,
-            dense,
-          },
+            disabled,
+          }),
         },
         app.windowManager,
         packageJSON.name,

package/plugins/@vcmap-show-case/hello-world/src/helloWorld.vue

@@ -34,7 +34,7 @@
 <script>
   import { inject } from 'vue';
   import { VcsButton, getPluginAssetUrl } from '@vcmap/ui';
-  import { VSheet, VCard, VContainer, VRow, VImg } from 'vuetify/lib';
+  import { VSheet, VCard, VContainer, VRow, VImg } from 'vuetify/components';
   import { name } from '../package.json';
 
   export const windowId = 'hello_world_window_id';

package/plugins/@vcmap-show-case/icons-example/src/AllIconsComponent.vue

@@ -6,7 +6,7 @@
 
 <script>
   import { Icons, VcsList } from '@vcmap/ui';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import { computed } from 'vue';
 
   export default {

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

@@ -1,56 +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 v-model="draggable" label="Draggable" />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
           <v-col>
             <v-switch
-              dense
-              v-model="draggable"
-              label="Draggable"
+              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-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
@@ -66,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="{ on }">
-              <vcs-form-button v-on="on"> Add An item </vcs-form-button>
+            <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"
@@ -99,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>
@@ -154,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>
@@ -190,7 +145,17 @@
       v-model="selected"
       @item-moved="move"
       @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
-    />
+    >
+      <template #[`item.prepend`]="{ index }" v-if="prependIndex">
+        {{ index }}
+      </template>
+      <template #[`item.title`]="{ index }">
+        {{ index }}
+      </template>
+      <template #[`item.append`]="{ index }" v-if="appendIndex">
+        {{ index }}
+      </template>
+    </vcs-list>
   </v-sheet>
 </template>
 
@@ -201,7 +166,6 @@
     VcsTextField,
     Icons,
     VcsFormSection,
-    createListItemRenameAction,
   } from '@vcmap/ui';
   import {
     VSwitch,
@@ -212,8 +176,8 @@
     VContainer,
     VRow,
     VCol,
-  } from 'vuetify/lib';
-  import { computed, ref } from 'vue';
+  } from 'vuetify/components';
+  import { computed, reactive, ref } from 'vue';
 
   function getRandomIcon() {
     const keys = Object.keys(Icons);
@@ -272,6 +236,8 @@
       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([]);
@@ -284,7 +250,8 @@
         disabled: false,
         visible: true,
         icon: false,
-        renameAction: false,
+        renamable: false,
+        toggleRename: false,
         action: false,
         clicked: false,
         selected: false,
@@ -298,6 +265,8 @@
         selectSingle,
         selected,
         showSelection,
+        prependIndex,
+        appendIndex,
         showTitle,
         title,
         titleActionsArray,
@@ -310,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();
@@ -324,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) {
@@ -339,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) {
@@ -353,6 +329,13 @@
               }
             };
           }
+
+          if (newItem.value.renamable) {
+            item.titleChanged = (newTitle) => {
+              item.title = newTitle;
+            };
+          }
+
           items.value.push(item);
           newItem.value = {
             name: 'foo',
@@ -360,7 +343,7 @@
             disabled: false,
             visible: true,
             icon: false,
-            renameAction: false,
+            renamable: false,
             action: false,
             clicked: false,
             selected: false,

package/plugins/@vcmap-show-case/notifier-tester/src/NotifierTester.vue

@@ -6,9 +6,9 @@
     <v-list>
       <v-list-item v-for="type in types" :key="type">
         {{ type }}
-        <v-list-item-action @click="notify(type)">
-          <v-icon>mdi-plus</v-icon>
-        </v-list-item-action>
+        <template #append>
+          <v-icon @click="notify(type)">mdi-plus</v-icon>
+        </template>
       </v-list-item>
     </v-list>
     <v-divider />
@@ -23,12 +23,11 @@
     VSheet,
     VList,
     VListItem,
-    VListItemAction,
     VTextField,
     VIcon,
     VCard,
     VDivider,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { NotificationType, VcsCheckbox } from '@vcmap/ui';
   import { computed, inject, ref } from 'vue';
 
@@ -38,7 +37,6 @@
       VSheet,
       VList,
       VListItem,
-      VListItemAction,
       VTextField,
       VIcon,
       VCard,

package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue

@@ -20,8 +20,8 @@
 </template>
 <style></style>
 <script>
-  import { computed, inject, ref } from 'vue';
-  import { VDivider } from 'vuetify/lib';
+  import { computed, inject } from 'vue';
+  import { VDivider } from 'vuetify/components';
   import { VcsToolButton, PanelLocation } from '@vcmap/ui';
   import { name as owner } from '../package.json';
   import IframePanelExample from './IframePanelExample.vue';
@@ -34,7 +34,6 @@
     setup() {
       const app = inject('vcsApp');
       const panelLocations = Object.values(PanelLocation);
-      const componentIds = ref(app.panelManager.componentIds);
 
       const sampleIds = {
         [PanelLocation.LEFT]: 'panel-1',
@@ -117,7 +116,7 @@
         panelLocations,
         isActive(location) {
           return computed(() =>
-            componentIds.value.includes(
+            app.panelManager.componentIds.includes(
               app.panelManager.getLocation(location)?.id,
             ),
           );

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,33 +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="{ on, attrs }">
-            <v-icon
-              right
-              v-bind="{ ...$attrs, ...attrs }"
-              v-on="{ ...$listeners, ...on }"
-            >
-              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/lib';
+  import {
+    VChip,
+    VContainer,
+    VIcon,
+    VList,
+    VTooltip,
+  } from 'vuetify/components';
 
   export default {
     name: 'ModulesListComponent',
     components: {
-      VcsTooltip,
+      VTooltip,
       VContainer,
       VList,
       VChip,

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

@@ -11,19 +11,15 @@
         :loading="loading === project.name"
       >
         <v-list-item>
-          <v-list-item-content>
-            <v-list-item-title class="font-weight-bold">
-              {{ project.name }}
-            </v-list-item-title>
-            <v-list-item-subtitle>{{
-              project.description
-            }}</v-list-item-subtitle>
-            <ModulesListComponent
-              :modules="project.modules"
-              @toggle-module="toggleModule"
-              :toggleable="false"
-            />
-          </v-list-item-content>
+          <v-list-item-title class="font-weight-bold">
+            {{ project.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle>{{ project.description }}</v-list-item-subtitle>
+          <ModulesListComponent
+            :modules="project.modules"
+            @toggle-module="toggleModule"
+            :toggleable="false"
+          />
           <v-list-item-action>
             <v-avatar color="success" size="30" v-if="project.active">
               <v-icon>mdi-check</v-icon>
@@ -48,13 +44,12 @@
     VCard,
     VIcon,
     VListItem,
-    VListItemContent,
     VListItemTitle,
     VListItemSubtitle,
     VListItemAction,
     VAvatar,
     VDivider,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import ModulesListComponent from './ModulesListComponent.vue';
 
   export default {
@@ -66,7 +61,6 @@
       VCard,
       VIcon,
       VListItem,
-      VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
       VListItemAction,

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

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

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

@@ -0,0 +1,76 @@
+import { name, version, mapVersion } from '../package.json';
+import SearchImpl from './searchImpl.js';
+
+const defaultLines = [
+  'Dragonfruit',
+  'Cherry',
+  'Peach',
+  'Banana',
+  'Grape',
+  'Fig',
+  'Kiwi',
+  'Watermelon',
+  'Mango',
+  'Strawberry',
+  'Apple',
+  'Raspberry',
+  'Honeydew',
+  'Lemon',
+  'Cantaloupe',
+  'Orange',
+  'Papaya',
+  'Date',
+  'Blackberry',
+  'Grapefruit',
+  'Nectarine',
+  'Apricot',
+  'Blueberry',
+  'Clementine',
+  'Elderberry',
+  'Gooseberry',
+  'Pineapple',
+  'Plum',
+  'Lime',
+  'Pomegranate',
+  'Quince',
+  'Tangerine',
+  'Mulberry',
+  'Lychee',
+  'Passionfruit',
+  'Kumquat',
+  'Cranberry',
+  'Jackfruit',
+  'Olive',
+  'Ugli fruit',
+];
+
+export default function searchExample(config) {
+  let impl;
+
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    get mapVersion() {
+      return mapVersion;
+    },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} app
+     */
+    initialize(app) {
+      impl = new SearchImpl(
+        config.lines ?? defaultLines,
+        config.withIcon ?? true,
+        config.withPOI ?? true,
+        config.withActions ?? true,
+      );
+      app.search.add(impl, name);
+    },
+    destroy() {
+      impl?.destroy();
+    },
+  };
+}