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

package/plugins/@vcmap-show-case/form-inputs-example/FormInputsExample.vue

@@ -17,30 +17,23 @@
       </template>
       <template #default v-if="showSection">
         <v-container class="py-0 px-1">
-          <v-row
-            no-gutters
-            align="center"
-          >
-            <v-col>
+          <v-row no-gutters>
+            <v-col class="w-max-half">
               <VcsLabel html-for="selectInput" :dense="dense">
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col>
+            <v-col class="w-max-half">
               <VcsSelect
                 id="selectInput"
                 :items="selectOptions"
                 :dense="dense"
-                :rules="[v => v !== 'D' || 'D is not allowed']"
+                :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
-                color="purple"
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="conditionalInput" :dense="dense">
                 ConditionalInput
@@ -51,47 +44,42 @@
                 id="conditionalInput"
                 clearable
                 :dense="dense"
-                :rules="[conditionalTest(state.conditionalInput, state.selected)]"
+                :rules="[
+                  conditionalTest(state.conditionalInput, state.selected),
+                ]"
                 v-model="state.conditionalInput"
                 placeholder="conditional"
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsTextField
                 :dense="dense"
                 v-model="state.initialTextInput"
                 :rules="[isValidText]"
                 :loading="state.initialTextInput === 'myInitialText'"
-                :error-messages="!state.checkboxInput ? ['manual error message depending on checkbox'] : undefined"
+                :error-messages="
+                  !state.checkboxInput
+                    ? ['manual error message depending on checkbox']
+                    : undefined
+                "
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsTextArea
                 :dense="dense"
-                :rules="[v => !!v || 'text area must not be empty']"
+                :rules="[(v) => !!v || 'text area must not be empty']"
                 placeholder="This is a text area"
                 rows="2"
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="emailInput" :dense="dense">
-                Email
-              </VcsLabel>
+              <VcsLabel html-for="emailInput" :dense="dense"> Email </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
@@ -105,10 +93,7 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="prependedInput" :dense="dense">
                 String With Icon
@@ -124,10 +109,7 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="fileInput" :dense="dense">
                 File input
@@ -143,14 +125,9 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="dateInput" :dense="dense">
-                Date
-              </VcsLabel>
+              <VcsLabel html-for="dateInput" :dense="dense"> Date </VcsLabel>
             </v-col>
             <v-col>
               <VcsDatePicker id="dateInput" v-model="state.dateInput" />
@@ -165,10 +142,7 @@
     >
       <template #default>
         <v-container class="py-0 px-1">
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="numberInput" :dense="dense">
                 NumberInput
@@ -186,10 +160,23 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters class="align-center">
+            <v-col>
+              <VcsLabel html-for="sliderInput" :dense="dense">
+                Slider
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsSlider
+                id="sliderInput"
+                :dense="dense"
+                type="number"
+                step="1"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="formattedNumber" :dense="dense">
                 VcsFormattedNumber
@@ -205,10 +192,7 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsTextField
                 id="coordinateX"
@@ -246,65 +230,62 @@
         </v-container>
       </template>
     </VcsFormSection>
-    <VcsFormSection
-      heading="VcsFormSection Radio & Checkbox"
-    >
+    <VcsFormSection heading="VcsFormSection Radio & Checkbox">
       <template #default>
         <v-container class="py-0 px-1">
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsRadio
                 :dense="dense"
-                :items="[...selectOptions, { label: 'Radio Option E colored', color: 'primary', value: 'E' }]"
+                :items="[
+                  ...selectOptions,
+                  {
+                    label: 'Radio Option E colored',
+                    color: 'primary',
+                    value: 'E',
+                  },
+                ]"
                 v-model="state.selected"
-                :rules="[v => v !== 'D' || 'D is not allowed']"
+                :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 row
               />
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel :dense="dense">
-                Text
-              </VcsLabel>
+              <VcsLabel :dense="dense"> Text </VcsLabel>
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsCheckbox
                 id="checkboxInput"
                 label="CheckboxInput"
                 :dense="dense"
-                :rules="[() => state.checkboxInput || 'Please accept our terms of use']"
+                :rules="[
+                  () => state.checkboxInput || 'Please accept our terms of use',
+                ]"
                 v-model="state.checkboxInput"
               />
             </v-col>
             <v-col>
-              <VcsButton
+              <VcsFormButton
                 :is-active="state.checkboxInput"
                 @click="state.checkboxInput = !state.checkboxInput"
                 tooltip="toggle button"
                 color="warning"
                 tooltip-position="right"
-                small
+                class="pt-1"
               >
                 <span v-if="state.checkboxInput">Active-true</span>
                 <span v-else>Active-false</span>
-              </VcsButton>
+              </VcsFormButton>
             </v-col>
           </v-row>
         </v-container>
       </template>
-    </vcsformsection>
-    <VcsFormSection
-      heading="VcsFormSection Mixed Inputs"
-    >
+    </VcsFormSection>
+    <VcsFormSection heading="VcsFormSection Mixed Inputs">
       <template #header="{ heading }">
         <article class="pa-2 text--primary">
           {{ heading }}
@@ -313,21 +294,24 @@
       </template>
       <template #default>
         <v-container class="py-0 px-1">
-          <v-row
-            align="center"
-          >
+          <v-row>
             <v-col cols="1">
-              <VcsLabel html-for="textInput" :dense="dense" class="text-caption">
+              <VcsLabel
+                html-for="textInput"
+                :dense="dense"
+                class="text-caption"
+              >
                 1
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsSelect
                 :items="[
-                  {value: 'one', i18n: 'form-inputs-example.numbers.one'},
-                  {value: 'two', i18n: 'form-inputs-example.numbers.two'},
-                  {value: 'three', i18n: 'form-inputs-example.numbers.three'}]"
-                :item-text="item => item.i18n"
+                  { value: 'one', i18n: 'form-inputs-example.numbers.one' },
+                  { value: 'two', i18n: 'form-inputs-example.numbers.two' },
+                  { value: 'three', i18n: 'form-inputs-example.numbers.three' },
+                ]"
+                :item-text="(item) => item.i18n"
                 :dense="dense"
                 placeholder="Numbers"
               />
@@ -335,41 +319,41 @@
             <v-col>
               <VcsSelect
                 :items="[
-                  {value: 'Anna', fullName: 'Annabella'},
-                  {value: 'Bella', fullName: 'Belladonna'},
-                  {value: 'Claudi', fullName: 'Claudine'}]"
-                :item-text="item => item.fullName"
+                  { value: 'Anna', fullName: 'Annabella' },
+                  { value: 'Bella', fullName: 'Belladonna' },
+                  { value: 'Claudi', fullName: 'Claudine' },
+                ]"
+                :item-text="(item) => item.fullName"
                 :dense="dense"
                 multiple
                 v-model="state.selectedMultiple"
-                :rules="[v => !!v.length || 'Please select at least one option.']"
+                :rules="[
+                  (v) => !!v.length || 'Please select at least one option.',
+                ]"
               />
             </v-col>
           </v-row>
         </v-container>
       </template>
     </VcsFormSection>
-    <div class="d-flex justify-space-between px-2">
-      <VcsButton
-        @click="logState(state)"
-        :disabled="!isValid"
-        :tooltip="'Log current state in console'"
-        :has-update="isValid && newUpdate"
-        class="mx-2 mb-2"
-      >
-        Log State
-      </VcsButton>
-      <VcsButton
-        @click="validate();"
-      >
-        Val
-      </VcsButton>
-      <VcsButton
-        @click="resetState();"
-        icon="$vcsReturn"
-      >
-        Reset
-      </VcsButton>
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2">
+        <VcsFormButton @click="validate()"> Val </VcsFormButton>
+        <VcsFormButton @click="resetState()" icon="$vcsReturn">
+          Reset
+        </VcsFormButton>
+      </div>
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton
+          variant="filled"
+          @click="logState(state)"
+          :disabled="!isValid"
+          :tooltip="'Log current state in console'"
+          :has-update="isValid && newUpdate"
+        >
+          Log State
+        </VcsFormButton>
+      </div>
     </div>
   </v-form>
 </template>
@@ -379,13 +363,14 @@
     VcsSelect,
     VcsCheckbox,
     VcsRadio,
-    VcsButton,
+    VcsFormButton,
     VcsTextField,
     VcsFormattedNumber,
     VcsFormSection,
     VcsLabel,
     VcsTextArea,
     VcsDatePicker,
+    VcsSlider,
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow } from 'vuetify/lib';
   import packageJSON from './package.json';
@@ -394,7 +379,7 @@
   export default {
     name: 'FormInputsExample',
     components: {
-      VcsButton,
+      VcsFormButton,
       VcsSelect,
       VcsTextField,
       VcsCheckbox,
@@ -408,6 +393,7 @@
       VCol,
       VContainer,
       VcsDatePicker,
+      VcsSlider,
     },
     props: {
       actions: {
@@ -427,7 +413,9 @@
       const app = inject('vcsApp');
       const plugin = app.plugins.getByKey(packageJSON.name);
       const newUpdate = ref(true);
-      watch(plugin.state, () => { newUpdate.value = true; });
+      watch(plugin.state, () => {
+        newUpdate.value = true;
+      });
       const form = ref();
 
       return {
@@ -458,7 +446,7 @@
   };
 </script>
 <style lang="scss" scoped>
-label{
-  font-size: 12px;
-}
+  label {
+    font-size: 12px;
+  }
 </style>

package/plugins/@vcmap-show-case/form-inputs-example/config.json

@@ -1,5 +1,5 @@
 {
-    "name": "form-inputs-example",
-    "selectOptions": ["A", "B", "C", "D"],
-    "initialTextInput": "myInitialText"
+  "name": "form-inputs-example",
+  "selectOptions": ["A", "B", "C", "D"],
+  "initialTextInput": "myInitialText"
 }

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

@@ -8,13 +8,21 @@ export default function createExampleActions() {
     reactive({
       name: 'denseSelection',
       title: 'change row height',
-      icon: dense.value ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical',
+      icon: dense.value
+        ? 'mdi-arrow-split-horizontal'
+        : 'mdi-arrow-collapse-vertical',
       callback() {
         dense.value = !dense.value;
-        this.icon = dense.value ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical';
+        this.icon = dense.value
+          ? 'mdi-arrow-split-horizontal'
+          : 'mdi-arrow-collapse-vertical';
       },
     }),
-    { name: 'noIcon', title: 'another action without icon', callback: () => {} },
+    {
+      name: 'noIcon',
+      title: 'another action without icon',
+      callback: () => {},
+    },
     reactive({
       name: 'toggleSection',
       title: 'toggle section',
@@ -37,7 +45,9 @@ export default function createExampleActions() {
     {
       name: 'alert',
       icon: 'mdi-message-text',
-      callback() { alert('alert'); },
+      callback() {
+        alert('alert');
+      },
     },
   ];
 

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>