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

package/plugins/@vcmap-show-case/config-editor/{editor.vue → ConfigEditor.vue}

@@ -1,42 +1,40 @@
 <template>
-  <div>
-    <v-textarea
-      v-model="configString"
-      v-if="!loading"
-    />
-    <v-progress-circular
-      v-else
-    />
+  <v-container class="py-0 px-1">
+    <VcsTextArea v-model="configString" v-if="!loading" />
+    <v-progress-circular v-else />
 
-    <VcsButton @click="replaceModule">
-      Apply
-    </VcsButton>
-    <VcsButton @click="removeModule">
-      Remove
-    </VcsButton>
-  </div>
+    <div class="d-flex gap-2 px-1 pt-2 pb-1 justify-end">
+      <VcsFormButton variant="filled" @click="replaceModule">
+        Apply
+      </VcsFormButton>
+      <VcsFormButton @click="removeModule"> Remove </VcsFormButton>
+    </div>
+  </v-container>
 </template>
 
 <script>
   import { ref, inject } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
+  import { VcsTextArea, VcsFormButton } from '@vcmap/ui';
   import { VcsModule } from '@vcmap/core';
-  import { VProgressCircular, VTextarea } from 'vuetify/lib';
+  import { VContainer, VProgressCircular } from 'vuetify/lib';
 
   const moduleId = 'foo';
 
   export default {
-    name: 'Editor',
+    name: 'ConfigEditor',
     components: {
-      VcsButton,
-      VTextarea,
+      VcsFormButton,
+      VcsTextArea,
+      VContainer,
       VProgressCircular,
     },
     setup() {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       const module = app.getModuleById(moduleId);
-      const configString = ref(JSON.stringify(module ? module.config : {}, null, 2));
+      const configString = ref(
+        JSON.stringify(module ? module.config : {}, null, 2),
+      );
       const loading = ref(false);
 
       return {
@@ -61,6 +59,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/plugins/@vcmap-show-case/config-editor/index.js

@@ -1,19 +1,21 @@
-import {
-  ButtonLocation,
-  createToggleAction,
-  WindowSlot,
-} from '@vcmap/ui';
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from './package.json';
-import editor from './editor.vue';
+import ConfigEditor from './ConfigEditor.vue';
 
 /**
  * @returns {VcsPlugin}
  */
-export default async function () {
+export default async function configEditor() {
   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(
         {
@@ -24,7 +26,7 @@ export default async function () {
           state: {
             headerTitle: 'Config Editor',
           },
-          component: editor,
+          component: ConfigEditor,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         app.windowManager,

package/plugins/@vcmap-show-case/context-menu-tester/index.js

@@ -2,19 +2,27 @@ import packageJSON from './package.json';
 
 export default () => {
   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;
+    },
     initialize(vcsApp) {
       vcsApp.contextMenuManager.addEventHandler(async (event) => {
-        const actions = [{
-          id: 'foo2',
-          name: 'Log Position',
-          icon: '$vcsInfo',
-          callback() {
-            console.log(event.positionOrPixel);
+        const actions = [
+          {
+            id: 'foo2',
+            name: 'Log Position',
+            icon: '$vcsInfo',
+            callback() {
+              console.log(event.positionOrPixel);
+            },
           },
-        }];
+        ];
         if (event.feature) {
           actions.push({
             id: 'foo',

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

@@ -17,10 +17,7 @@
       </template>
       <template #default v-if="showSection">
         <v-container class="py-0 px-1">
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="selectInput" :dense="dense">
                 {{ $t('form-inputs-example.select') }}
@@ -31,16 +28,13 @@
                 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 +45,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 +94,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 +110,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 +126,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 +143,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 +161,7 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="formattedNumber" :dense="dense">
                 VcsFormattedNumber
@@ -205,10 +177,7 @@
               />
             </v-col>
           </v-row>
-          <v-row
-            no-gutters
-            align="center"
-          >
+          <v-row no-gutters>
             <v-col>
               <VcsTextField
                 id="coordinateX"
@@ -246,65 +215,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 +279,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 +304,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,7 +348,7 @@
     VcsSelect,
     VcsCheckbox,
     VcsRadio,
-    VcsButton,
+    VcsFormButton,
     VcsTextField,
     VcsFormattedNumber,
     VcsFormSection,
@@ -394,7 +363,7 @@
   export default {
     name: 'FormInputsExample',
     components: {
-      VcsButton,
+      VcsFormButton,
       VcsSelect,
       VcsTextField,
       VcsCheckbox,
@@ -427,7 +396,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 +429,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');
+      },
     },
   ];