@vcmap/ui 5.3.2 → 6.0.0-rc.1

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

@@ -21,15 +21,15 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col class="w-max-half">
-              <VcsLabel html-for="selectInput" :dense="dense">
+              <VcsLabel html-for="selectInput">
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
             <v-col class="w-max-half">
               <VcsSelect
                 id="selectInput"
+                loading="primary"
                 :items="selectOptions"
-                :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
               />
@@ -37,7 +37,7 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="conditionalInput" :dense="dense">
+              <VcsLabel html-for="conditionalInput">
                 ConditionalInput
               </VcsLabel>
             </v-col>
@@ -45,7 +45,6 @@
               <VcsTextField
                 id="conditionalInput"
                 clearable
-                :dense="dense"
                 :rules="[
                   conditionalTest(state.conditionalInput, state.selected),
                 ]"
@@ -56,9 +55,7 @@
           </v-row>
           <v-row no-gutters>
             <v-col class="w-max-half">
-              <VcsLabel html-for="arrayInput" :dense="dense">
-                Array Input
-              </VcsLabel>
+              <VcsLabel html-for="arrayInput"> Array Input </VcsLabel>
             </v-col>
           </v-row>
           <v-row no-gutters>
@@ -66,8 +63,7 @@
               <VcsChipArrayInput
                 id="arrayInput"
                 type="number"
-                :dense="dense"
-                v-model="state.arrayInput"
+                v-model="array"
                 :rules="[arrayTest]"
               />
             </v-col>
@@ -76,7 +72,6 @@
             <v-col>
               <VcsChipArrayInput
                 id="arrayInput"
-                :dense="dense"
                 v-model="state.arrayInputString"
                 column
               />
@@ -85,10 +80,13 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextField
-                :dense="dense"
                 v-model="state.initialTextInput"
                 :rules="[isValidText]"
-                :loading="state.initialTextInput === 'myInitialText'"
+                :loading="
+                  state.initialTextInput === 'myInitialText'
+                    ? 'primary'
+                    : undefined
+                "
                 :error-messages="
                   !state.checkboxInput
                     ? ['manual error message depending on checkbox']
@@ -103,38 +101,32 @@
                 :dense="dense"
                 :rules="[(v) => !!v || 'text area must not be empty']"
                 placeholder="This is a text area"
+                tooltip="This is a tooltip"
                 rows="2"
               />
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="emailInput" :dense="dense" required>
-                Email
-              </VcsLabel>
+              <VcsLabel html-for="emailInput" required> Email </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
                 id="emailInput"
-                :dense="dense"
                 type="email"
                 :rules="[isValidEmail]"
                 v-model="state.email"
-                color="blue"
                 placeholder="Email address"
               />
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="prependedInput" :dense="dense">
-                String With Icon
-              </VcsLabel>
+              <VcsLabel html-for="prependedInput"> String With Icon </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
                 id="prependedInput"
-                :dense="dense"
                 prepend-icon="mdi-map-marker"
                 v-model="state.prependedInput"
                 label="text"
@@ -143,23 +135,20 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="fileInput" :dense="dense">
-                File input
-              </VcsLabel>
+              <VcsLabel html-for="fileInput"> File input </VcsLabel>
             </v-col>
             <v-col>
-              <VcsTextField
+              <VcsFileInput
                 id="fileInput"
-                :dense="dense"
-                type="file"
                 multiple
+                tooltip="Click to select a file."
                 v-model="state.files"
               />
             </v-col>
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="dateInput" :dense="dense"> Date </VcsLabel>
+              <VcsLabel html-for="dateInput"> Date </VcsLabel>
             </v-col>
             <v-col>
               <VcsDatePicker id="dateInput" v-model="state.dateInput" />
@@ -176,14 +165,11 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="numberInput" :dense="dense">
-                NumberInput
-              </VcsLabel>
+              <VcsLabel html-for="numberInput"> NumberInput </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
                 id="numberInput"
-                :dense="dense"
                 type="number"
                 step="1"
                 unit="cm"
@@ -194,9 +180,7 @@
           </v-row>
           <v-row no-gutters class="align-center">
             <v-col>
-              <VcsLabel html-for="sliderInput" :dense="dense">
-                Slider
-              </VcsLabel>
+              <VcsLabel html-for="sliderInput"> Slider </VcsLabel>
             </v-col>
             <v-col>
               <VcsSlider
@@ -210,7 +194,7 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="formattedNumber" :dense="dense">
+              <VcsLabel html-for="formattedNumber">
                 VcsFormattedNumber
               </VcsLabel>
             </v-col>
@@ -224,7 +208,7 @@
               />
             </v-col>
           </v-row>
-          <v-row no-gutters class="gap-2">
+          <v-row no-gutters class="gc-2">
             <v-col>
               <VcsFormattedNumber
                 id="formattedNumber"
@@ -256,41 +240,7 @@
               />
             </v-col>
           </v-row>
-          <v-row no-gutters class="gap-2">
-            <v-col>
-              <VcsTextField
-                id="coordinateX"
-                :dense="dense"
-                type="number"
-                step="10"
-                prefix="X"
-                unit="cm"
-                v-model.number="state.numberInput"
-              />
-            </v-col>
-            <v-col>
-              <VcsTextField
-                id="coordinateY"
-                :dense="dense"
-                type="number"
-                step="10"
-                prefix="Y"
-                unit="cm"
-                v-model.number="state.numberInput"
-              />
-            </v-col>
-            <v-col>
-              <VcsTextField
-                id="coordinateZ"
-                :dense="dense"
-                type="number"
-                step="10"
-                unit="cm"
-                prefix="Z"
-                v-model.number="state.numberInput"
-              />
-            </v-col>
-          </v-row>
+          <VcsCoordinate v-model="array" />
         </v-container>
       </template>
     </VcsFormSection>
@@ -300,59 +250,93 @@
       start-open
       :disabled="!state.checkboxInput"
     >
-      <template #default>
-        <v-container class="py-0 px-1">
-          <v-row no-gutters>
-            <v-col>
-              <VcsRadio
-                :dense="dense"
-                :items="[
-                  ...selectOptions,
-                  {
-                    label: 'Radio Option E colored',
-                    color: 'primary',
-                    value: 'E',
-                  },
-                ]"
-                v-model="state.selected"
-                :rules="[(v) => v !== 'D' || 'D is not allowed']"
-                row
-              />
-            </v-col>
-          </v-row>
-          <v-row no-gutters>
-            <v-col>
-              <VcsLabel :dense="dense"> Text </VcsLabel>
-            </v-col>
-          </v-row>
-          <v-row no-gutters>
-            <v-col>
-              <VcsCheckbox
-                id="checkboxInput"
-                label="CheckboxInput"
-                :dense="dense"
-                :rules="[
-                  () => state.checkboxInput || 'Please accept our terms of use',
-                ]"
-                v-model="state.checkboxInput"
-              />
-            </v-col>
-            <v-col>
-              <VcsFormButton
-                :is-active="state.checkboxInput"
-                @click="state.checkboxInput = !state.checkboxInput"
-                tooltip="toggle button"
-                color="warning"
-                tooltip-position="right"
-                class="pt-1"
-              >
-                <span v-if="state.checkboxInput">Active-true</span>
-                <span v-else>Active-false</span>
-              </VcsFormButton>
-            </v-col>
-          </v-row>
-        </v-container>
-      </template>
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <VcsRadio
+              :items="[
+                ...selectOptions,
+                {
+                  label: 'Radio Option E colored',
+                  color: 'primary',
+                  value: 'E',
+                },
+              ]"
+              v-model="state.selected"
+              :rules="[(v) => v !== 'D' || 'D is not allowed']"
+              inline
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <VcsLabel> Radio with img label </VcsLabel>
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <VcsRadio
+              v-model="state.selected"
+              :items="[
+                { value: 'AAAAAAAA', src: 'mdi-circle-outline' },
+                { value: 'B', src: 'mdi-close' },
+                { value: 'C', src: 'mdi-triangle-outline' },
+                { value: 'D', src: 'mdi-square-outline' },
+              ]"
+              :dense="dense"
+              :rules="[(v) => v !== 'D' || 'Square is not allowed']"
+              tooltip="This is a radio grid"
+              inline
+              label-position="top"
+              class="d-flex justify-center"
+            >
+              <template #label="{ item, error }">
+                <figure>
+                  <v-icon
+                    size="24"
+                    class="d-flex justify-center mx-auto"
+                    :class="{ 'text-error': error }"
+                  >
+                    {{ item.src }}
+                  </v-icon>
+                  <figcaption
+                    class="d-flex justify-center"
+                    :class="{ 'text-error': error }"
+                  >
+                    {{ item.value }}
+                  </figcaption>
+                </figure>
+              </template>
+            </VcsRadio>
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <VcsCheckbox
+              id="checkboxInput"
+              label="CheckboxInput"
+              tooltip="This is a checkbox for terms of usage"
+              :rules="[
+                () => state.checkboxInput || 'Please accept our terms of use',
+              ]"
+              v-model="state.checkboxInput"
+            />
+          </v-col>
+          <v-col>
+            <VcsFormButton
+              :is-active="state.checkboxInput"
+              @click="state.checkboxInput = !state.checkboxInput"
+              tooltip="toggle button"
+              color="warning"
+              tooltip-position="right"
+              class="pt-1"
+            >
+              <span v-if="state.checkboxInput">Active-true</span>
+              <span v-else>Active-false</span>
+            </VcsFormButton>
+          </v-col>
+        </v-row>
+      </v-container>
     </VcsFormSection>
     <VcsFormSection heading="VcsFormSection Mixed Inputs">
       <template #header="{ heading }">
@@ -365,13 +349,7 @@
         <v-container class="py-0 px-1">
           <v-row>
             <v-col cols="1">
-              <VcsLabel
-                html-for="textInput"
-                :dense="dense"
-                class="text-caption"
-              >
-                1
-              </VcsLabel>
+              <VcsLabel html-for="textInput" class="text-caption"> 1 </VcsLabel>
             </v-col>
             <v-col>
               <VcsSelect
@@ -402,33 +380,6 @@
               />
             </v-col>
           </v-row>
-          <v-row no-gutters>
-            <v-col>
-              <VcsRadioGrid
-                v-model="state.selected"
-                :items="[
-                  { value: 'AAAAAAAA', src: 'mdi-circle-outline' },
-                  { value: 'B', src: 'mdi-close' },
-                  { value: 'C', src: 'mdi-triangle-outline' },
-                  { value: 'D', src: 'mdi-square-outline' },
-                ]"
-                :dense="dense"
-                :rules="[(v) => v !== 'D' || 'Square is not allowed']"
-              >
-                <!-- if label slot is not used, src is forwarded to img src -->
-                <template #label="{ src, value }">
-                  <figure>
-                    <v-icon size="24" class="d-flex justify-center">{{
-                      src
-                    }}</v-icon>
-                    <figcaption class="d-flex justify-center">
-                      {{ value }}
-                    </figcaption>
-                  </figure>
-                </template>
-              </VcsRadioGrid>
-            </v-col>
-          </v-row>
         </v-container>
       </template>
     </VcsFormSection>
@@ -454,13 +405,13 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col class="w-max-half">
-              <VcsLabel html-for="selectInput" :dense="dense" :disabled="true">
+              <VcsLabel html-for="selectInput2" disabled>
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
             <v-col class="w-max-half">
               <VcsSelect
-                id="selectInput"
+                id="selectInput2"
                 :items="selectOptions"
                 :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
@@ -472,15 +423,14 @@
         </v-container>
       </template>
     </VcsFormSection>
-
-    <div class="d-flex gap-2 px-2 pt-2 pb-1">
-      <div class="d-flex gap-2">
+    <div class="d-flex gc-2 px-2 pt-2 pb-1">
+      <div class="d-flex gc-2">
         <VcsFormButton @click="validate()"> Val </VcsFormButton>
         <VcsFormButton @click="resetState()" icon="$vcsReturn">
           Reset
         </VcsFormButton>
       </div>
-      <div class="d-flex gap-2 w-full justify-end">
+      <div class="d-flex gc-2 w-full justify-end">
         <VcsFormButton
           variant="filled"
           @click="logState(state)"
@@ -502,6 +452,7 @@
     VcsRadio,
     VcsFormButton,
     VcsTextField,
+    VcsFileInput,
     VcsChipArrayInput,
     VcsFormattedNumber,
     VcsFormSection,
@@ -509,9 +460,9 @@
     VcsTextArea,
     VcsDatePicker,
     VcsSlider,
-    VcsRadioGrid,
+    VcsCoordinate,
   } from '@vcmap/ui';
-  import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/lib';
+  import { VCol, VContainer, VForm, VRow, VIcon } from 'vuetify/components';
   import packageJSON from '../package.json';
   import {
     isValidText,
@@ -526,6 +477,7 @@
       VcsFormButton,
       VcsSelect,
       VcsTextField,
+      VcsFileInput,
       VcsCheckbox,
       VcsRadio,
       VcsFormattedNumber,
@@ -533,13 +485,13 @@
       VcsLabel,
       VcsTextArea,
       VcsChipArrayInput,
+      VcsCoordinate,
       VForm,
       VRow,
       VCol,
       VContainer,
       VcsDatePicker,
       VcsSlider,
-      VcsRadioGrid,
       VIcon,
     },
     props: {
@@ -548,7 +500,7 @@
         required: true,
       },
       dense: {
-        type: Object,
+        type: Boolean,
         required: true,
       },
     },
@@ -564,6 +516,7 @@
       return {
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,
+        array: ref([1, 2, 3]),
         // do not put the whole config here, since it would become reactive
         selectOptions: plugin.config.selectOptions,
         form,

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,9 +173,8 @@ 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) {
@@ -198,10 +197,10 @@ export default function formInputsExample(config) {
             headerActionsOverflow: 2,
             infoUrl: 'https://vc.systems',
           },
-          props: {
+          props: reactive({
             actions,
             dense,
-          },
+          }),
         },
         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

@@ -39,6 +39,24 @@
             />
           </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-col>
+        </v-row>
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Title">
@@ -84,8 +102,8 @@
       <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 #activator="{ props }">
+              <vcs-form-button v-bind="props"> Add An item </vcs-form-button>
             </template>
             <v-card class="pa-2">
               <v-form @submit.prevent="add">
@@ -190,7 +208,14 @@
       v-model="selected"
       @item-moved="move"
       @item-renamed="({ item, newTitle }) => (item.title = newTitle)"
-    />
+    >
+      <template #[`item.prepend-title`]="{ index }" v-if="prependIndex">
+        {{ index }}
+      </template>
+      <template #[`item.append-title`]="{ index }" v-if="appendIndex">
+        {{ index }}
+      </template>
+    </vcs-list>
   </v-sheet>
 </template>
 
@@ -212,7 +237,7 @@
     VContainer,
     VRow,
     VCol,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { computed, ref } from 'vue';
 
   function getRandomIcon() {
@@ -272,6 +297,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([]);
@@ -298,6 +325,8 @@
         selectSingle,
         selected,
         showSelection,
+        prependIndex,
+        appendIndex,
         showTitle,
         title,
         titleActionsArray,