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

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

@@ -1,7 +1,6 @@
 import { ref, reactive, watch } from 'vue';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 
-
 import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from './package.json';
 import defaultConfig from './config.json';
@@ -46,7 +45,7 @@ export function getDefaultConfig() {
  * @param {FormInputsExampleConfig} config
  * @returns {VcsPlugin}
  */
-export default function (config) {
+export default function formInputsExample(config) {
   /**
    * @type {FormInputsExampleConfig}
    */
@@ -54,7 +53,9 @@ export default function (config) {
     // not reactive can be put without using reactive or ref
     nonReactiveProp: 'nonReactive',
     // no validation, ref to track config changes; use reactive on nested arrays or objects
-    selectOptions: ref([...config.selectOptions] || [...defaultConfig.selectOptions]),
+    selectOptions: ref(
+      [...config.selectOptions] || [...defaultConfig.selectOptions],
+    ),
     // ref prop with getter setter --> validation
     _initialTextInput: ref(defaultConfig.initialTextInput),
     set initialTextInput(value) {
@@ -62,10 +63,15 @@ export default function (config) {
       if (validation === true) {
         this._initialTextInput.value = value;
       } else {
-        getLogger().error('Error setting initialTextInput on plugin config:', validation);
+        getLogger().error(
+          'Error setting initialTextInput on plugin config:',
+          validation,
+        );
       }
     },
-    get initialTextInput() { return this._initialTextInput; },
+    get initialTextInput() {
+      return this._initialTextInput;
+    },
   };
   if (config.initialTextInput) {
     pluginConfig.initialTextInput = config.initialTextInput;
@@ -90,7 +96,6 @@ export default function (config) {
   /** @type {FormInputsExampleState} */
   const defaultState = JSON.parse(JSON.stringify(pluginState));
 
-
   /**
    * watcher to update state, when specific config properties are changed
    * @see https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-multiple-sources
@@ -100,7 +105,7 @@ export default function (config) {
    * - if reactive objects or arrays shall be watched, you'll need to add option `{ deep: true }`
    *   @see https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects
    *   in this case you may need a separate watcher, since watching multiple sources seems only to work for refs
-   * @returns {WatchStopHandle}
+   * @returns {import("vue").WatchStopHandle}
    */
   const stopWatching = watch(
     [pluginConfig.selectOptions, pluginConfig.initialTextInput],
@@ -133,14 +138,20 @@ export default function (config) {
      * @type {Object<string, true|string>}
      */
     const validation = {
-      conditionalInput: conditionalTest(stateObject.conditionalInput, stateObject.selected),
+      conditionalInput: conditionalTest(
+        stateObject.conditionalInput,
+        stateObject.selected,
+      ),
       initialTextInput: isValidText(stateObject.initialTextInput),
       email: isValidEmail(stateObject.email),
     };
     Object.keys(validation).forEach((key) => {
       if (validation[key] !== true) {
         // XXX warning or error???
-        getLogger().warning(`Validation failed for state property "${key}":`, validation[key]);
+        getLogger().warning(
+          `Validation failed for state property "${key}":`,
+          validation[key],
+        );
         // XXX should invalid props be assigned or not?
         delete stateObject[key];
       }
@@ -149,12 +160,19 @@ export default function (config) {
   }
 
   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: reactive(pluginState),
-    resetState: () => Object.assign(pluginState, JSON.parse(JSON.stringify(defaultState))),
+    resetState: () =>
+      Object.assign(pluginState, JSON.parse(JSON.stringify(defaultState))),
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
@@ -209,9 +227,11 @@ export default function (config) {
           tooltip: 'Form Inputs Beispiel Plugin',
           help: 'Geben Sie eine Zahl in das Feld NumberInput ein. VcsFormattedNumber rundet auf eine Dezimalstelle.',
           help1: 'Wählen Sie eine Option',
-          help1desc: 'Wenn \'Option A\' gewählt ist, muss der bedingte Input \'test\' sein.',
-          help2: 'Ändern Sie den Wert von \'myInitialText\'',
-          help2desc: 'InitialTextInput bleibt solange im Lade-Status, bis sich der Wert \'myInitialText\' ändert.',
+          help1desc:
+            "Wenn 'Option A' gewählt ist, muss der bedingte Input 'test' sein.",
+          help2: "Ändern Sie den Wert von 'myInitialText'",
+          help2desc:
+            "InitialTextInput bleibt solange im Lade-Status, bis sich der Wert 'myInitialText' ändert.",
           help3: 'Geben Sie eine Email Adresse ein',
           help3desc: 'Email Adressen werden validiert.',
           numbers: {
@@ -228,9 +248,11 @@ export default function (config) {
           tooltip: 'Form Inputs Example Plugin',
           help: 'Enter a number to the NumberInput field. VcsFormattedNumber rounds to one decimal digit.',
           help1: 'Select an option',
-          help1desc: 'If \'Option A\' is chosen, conditional input must be \'test\'.',
-          help2: 'Change \'myInitialText\' to some other value',
-          help2desc: 'InitialTextInput text field stays in loading state, as long as \'myInitialText\' is not changed.',
+          help1desc:
+            "If 'Option A' is chosen, conditional input must be 'test'.",
+          help2: "Change 'myInitialText' to some other value",
+          help2desc:
+            "InitialTextInput text field stays in loading state, as long as 'myInitialText' is not changed.",
           help3: 'Enter an email address.',
           help3desc: 'Emails get validated.',
           numbers: {

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

@@ -25,6 +25,7 @@ export function conditionalTest(value, condition) {
  * @returns {boolean|string}
  */
 export function isValidEmail(value) {
-  const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  const pattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return pattern.test(value) || 'Invalid e-mail.';
 }

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

@@ -1,5 +1,5 @@
 # Icons Example
 
-This is a show-case plugin demonstrating the usage of icons. 
+This is a show-case plugin demonstrating the usage of icons.
 Lists all available VCS icons.
 See [icons](../../../src/components/icons) for the used components.

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

@@ -1,10 +1,6 @@
 <template>
   <v-sheet class="overflow-auto icons-window">
-    <vcs-list
-      :items="icons"
-      :searchable="true"
-      :show-title="false"
-    />
+    <vcs-list :items="icons" :searchable="true" :show-title="false" />
   </v-sheet>
 </template>
 
@@ -31,21 +27,25 @@
               name: 'copy-icon-to-clipboard',
               icon: 'mdi-content-copy',
               title: `Copy ${key}`,
-              callback: async () => { await navigator.clipboard.writeText(key); },
+              callback: async () => {
+                await navigator.clipboard.writeText(key);
+              },
             },
           ],
         };
       };
 
       return {
-        icons: computed(() => Object.keys(Icons).map(icon => createListItem(icon))),
+        icons: computed(() =>
+          Object.keys(Icons).map((icon) => createListItem(icon)),
+        ),
       };
     },
   };
 </script>
 
 <style scoped>
-.icons-window {
-  max-height: 600px;
-}
+  .icons-window {
+    max-height: 600px;
+  }
 </style>

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

@@ -7,9 +7,15 @@ import AllIconsComponent from './allIconsComponent.vue';
  */
 export default async function iconsExample() {
   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(
         {
@@ -27,11 +33,7 @@ export default async function iconsExample() {
         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/list-example/ListExample.vue

@@ -1,92 +1,182 @@
 <template>
   <v-sheet>
-    <v-sheet class="px-2 d-grid">
-      <v-switch
-        v-model="selectable"
-        label="Selectable"
-      />
-      <v-switch
-        :disabled="!selectable"
-        v-model="selectSingle"
-        label=" Single Select"
-      />
-      <v-switch
-        v-model="searchable"
-        label="Searchable"
-      />
-      <v-dialog
-        v-model="dialog"
-        width="400"
-      >
-        <template #activator="{ on }">
-          <vcs-button v-on="on">
-            Add An item
-          </vcs-button>
-        </template>
-        <v-card class="pa-2">
-          <v-form
-            @submit.prevent="add"
-          >
-            <vcs-text-field
-              v-model="newItem.name"
-              label="Name"
-              :rules="required"
+    <VcsFormSection heading="Settings">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              v-model="selectable"
+              label="Selectable"
+              class="ma-0"
+              dense
+            />
+          </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-col>
+          <v-col>
+            <v-switch
+              dense
+              v-model="draggable"
+              label="Draggable"
+              class="ma-0"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Title">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              dense
+              v-model="showTitle"
+              label="Show Title"
+              class="ma-0"
+            />
+          </v-col>
+          <v-col>
             <vcs-text-field
-              v-model="newItem.title"
-              label="Title"
-              :rules="required"
+              v-model="title"
+              placeholder="Title"
+              :disabled="!showTitle"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              v-model="titleActions"
+              label="Title Actions"
+              class="ma-0"
+              dense
             />
-            <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="console.log action" v-model="newItem.action" />
-            <v-switch label="console.log on clicked" v-model="newItem.clicked" />
-            <v-switch label="console.log selected state" v-model="newItem.selected" />
-            <vcs-button
-              type="submit"
-            >
-              Add
-            </vcs-button>
-          </v-form>
-        </v-card>
-      </v-dialog>
-      <v-divider class="ma-2" />
-      <v-switch
-        v-model="showTitle"
-        label="Show Title"
-      />
-      <vcs-text-field v-model="title" placeholder="Title" />
-      <v-switch
-        v-model="titleActions"
-        label="Title Actions"
-      />
-      <v-switch
-        v-model="titleIcon"
-        label="Title Icon"
-      />
-      <v-divider class="ma-2" />
-      <template v-if="selectable">
-        <vcs-button
-          @click="selected = []"
-        >
-          Clear Selection
-        </vcs-button>
-        <v-switch v-model="showSelection" label="Show Selection" />
-        <ul v-if="showSelection">
-          <li
-            v-for="(i, index) in selected"
-            :key="`item-${index}`"
-          >
-            {{ i.title }}
-          </li>
-        </ul>
-      </template>
-      <v-divider class="ma-2" />
-    </v-sheet>
+          </v-col>
+          <v-col>
+            <v-switch
+              dense
+              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-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>
+            <v-card class="pa-2">
+              <v-form @submit.prevent="add">
+                <vcs-text-field
+                  v-model="newItem.name"
+                  label="Name"
+                  :rules="required"
+                />
+                <vcs-text-field
+                  v-model="newItem.title"
+                  label="Title"
+                  :rules="required"
+                />
+                <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="console.log action"
+                  v-model="newItem.action"
+                  class="ma-0"
+                />
+                <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>
+            </v-card>
+          </v-dialog>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Selection">
+      <v-container class="py-1 px-1">
+        <v-row no-gutters>
+          <template v-if="selectable">
+            <v-col>
+              <vcs-form-button @click="selected = []"> Clear </vcs-form-button>
+            </v-col>
+            <v-col>
+              <v-switch
+                v-model="showSelection"
+                label="Show Selection"
+                dense
+                class="ma-0"
+              />
+            </v-col>
+          </template>
+        </v-row>
+        <v-row no-gutters>
+          <ul v-if="showSelection" class="mx-2">
+            <li v-for="(i, index) in selected" :key="`item-${index}`">
+              {{ i.title }}
+            </li>
+          </ul>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
 
     <vcs-list
       :items="items"
+      :draggable="draggable"
       :selectable="selectable"
       :single-select="selectSingle"
       :searchable="searchable"
@@ -95,19 +185,28 @@
       :actions="titleActionsArray"
       :title="title"
       v-model="selected"
+      @item-moved="move"
     />
   </v-sheet>
 </template>
 
 <script>
-  import { VcsList, VcsButton, VcsTextField, Icons } from '@vcmap/ui';
+  import {
+    VcsList,
+    VcsFormButton,
+    VcsTextField,
+    Icons,
+    VcsFormSection,
+  } from '@vcmap/ui';
   import {
     VSwitch,
-    VDivider,
     VSheet,
     VDialog,
     VCard,
     VForm,
+    VContainer,
+    VRow,
+    VCol,
   } from 'vuetify/lib';
   import { computed, ref } from 'vue';
 
@@ -123,12 +222,11 @@
       title: 'Foo',
       tooltip: 'this is the foo',
       icon: 'mdi-pen',
-      selectionChanged: value => console.log('changed cb foo', value),
+      selectionChanged: (value) => console.log('changed cb foo', value),
     },
     {
       name: 'bar',
       title: 'Bar',
-      tooltip: 'just a bar',
       actions: [
         {
           name: 'console.log',
@@ -137,13 +235,13 @@
           },
         },
       ],
-      selectionChanged: value => console.log('changed cb bar', value),
+      selectionChanged: (value) => console.log('changed cb bar', value),
     },
     {
       name: 'baz',
       title: 'Baz',
       tooltip: 'special baz',
-      selectionChanged: value => console.log('bchanged cb baz', value),
+      selectionChanged: (value) => console.log('bchanged cb baz', value),
     },
   ];
 
@@ -151,16 +249,20 @@
     name: 'ListExample',
     components: {
       VcsList,
-      VcsButton,
+      VcsFormButton,
       VcsTextField,
+      VcsFormSection,
       VSwitch,
-      VDivider,
       VSheet,
       VDialog,
       VCard,
       VForm,
+      VContainer,
+      VRow,
+      VCol,
     },
     setup() {
+      const draggable = ref(true);
       const selectable = ref(true);
       const searchable = ref(true);
       const selectSingle = ref(false);
@@ -184,6 +286,7 @@
       const dialog = ref(false);
 
       return {
+        draggable,
         selectable,
         searchable,
         selectSingle,
@@ -197,8 +300,8 @@
         newItem,
         dialog,
         required: [
-          v => !!v || 'Input may not be null',
-          v => v.length > 0 || 'Input must have a length',
+          (v) => !!v || 'Input may not be null',
+          (v) => v.length > 0 || 'Input must have a length',
         ],
         add() {
           const item = {
@@ -206,6 +309,7 @@
             title: newItem.value.title,
             disabled: newItem.value.disabled,
             visible: newItem.value.visible,
+            hasUpdate: newItem.value.hasUpdate,
           };
 
           if (newItem.value.icon) {
@@ -217,7 +321,7 @@
               {
                 name: 'console.log',
                 callback() {
-                  console.log('hi, i\'m: ', item.name);
+                  console.log("hi, i'm: ", item.name);
                 },
               },
             ];
@@ -230,8 +334,8 @@
           }
 
           if (newItem.value.selected) {
-            item.selectionChanged = (selected) => {
-              if (selected) {
+            item.selectionChanged = (selectedValue) => {
+              if (selectedValue) {
                 console.log(`${item.name} is selected`);
               } else {
                 console.log(`${item.name} is no longer selected`);
@@ -248,6 +352,7 @@
             action: false,
             clicked: false,
             selected: false,
+            hasUpdate: false,
           };
           dialog.value = false;
         },
@@ -257,12 +362,14 @@
           },
           set(value) {
             if (value) {
-              titleActionsArray.value = [{
-                name: 'console.log foo',
-                callback() {
-                  console.log('foo');
+              titleActionsArray.value = [
+                {
+                  name: 'console.log foo',
+                  callback() {
+                    console.log('foo');
+                  },
                 },
-              }];
+              ];
             } else {
               titleActionsArray.value = [];
             }
@@ -280,14 +387,25 @@
             }
           },
         }),
+        move({ item, targetIndex }) {
+          let target = targetIndex;
+          target = target >= 0 ? target : 0;
+          target =
+            target < items.value.length ? target : items.value.length - 1;
+          const from = items.value.indexOf(item);
+          if (from !== target) {
+            items.value.splice(from, 1);
+            items.value.splice(target, 0, item);
+          }
+        },
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-.d-grid{
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
+  .d-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
 </style>