@vcmap/ui 5.3.7 → 6.0.0-rc.10

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

@@ -20,32 +20,37 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="selectInput" :dense="dense">
+            <v-col>
+              <VcsLabel
+                :disabled="disabled"
+                html-for="selectInput"
+                tooltip="labelTooltip"
+              >
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsSelect
+                :disabled="disabled"
                 id="selectInput"
+                loading="primary"
                 :items="selectOptions"
-                :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
               />
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col>
-              <VcsLabel html-for="conditionalInput" :dense="dense">
-                ConditionalInput
+            <v-col cols="6">
+              <VcsLabel :disabled="disabled" html-for="conditionalInput">
+                Conditional Input with long label
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="conditionalInput"
                 clearable
-                :dense="dense"
                 :rules="[
                   conditionalTest(state.conditionalInput, state.selected),
                 ]"
@@ -55,8 +60,13 @@
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="arrayInput" :dense="dense">
+            <v-col>
+              <VcsCheckbox :disabled="disabled" label="Checkbox"></VcsCheckbox>
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel :disabled="disabled" html-for="arrayInput">
                 Array Input
               </VcsLabel>
             </v-col>
@@ -64,9 +74,9 @@
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 type="number"
-                :dense="dense"
                 v-model="state.arrayInput"
                 :rules="[arrayTest]"
               />
@@ -75,8 +85,8 @@
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
-                :dense="dense"
                 v-model="state.arrayInputString"
                 column
               />
@@ -85,10 +95,14 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextField
-                :dense="dense"
+                :disabled="disabled"
                 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']
@@ -100,41 +114,41 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextArea
-                :dense="dense"
+                :disabled="disabled"
                 :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>
+              <VcsLabel :disabled="disabled" html-for="emailInput" required>
                 Email
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 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">
+              <VcsLabel :disabled="disabled" html-for="prependedInput">
                 String With Icon
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="prependedInput"
-                :dense="dense"
                 prepend-icon="mdi-map-marker"
                 v-model="state.prependedInput"
                 label="text"
@@ -143,26 +157,28 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="fileInput" :dense="dense">
+              <VcsLabel :disabled="disabled" html-for="fileInput">
                 File input
               </VcsLabel>
             </v-col>
             <v-col>
-              <VcsTextField
+              <VcsFileInput
+                :disabled="disabled"
                 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 :disabled="disabled" html-for="dateInput">
+                Date
+              </VcsLabel>
             </v-col>
             <v-col>
-              <VcsDatePicker id="dateInput" v-model="state.dateInput" />
+              <VcsDatePicker :disabled="disabled" id="dateInput" />
             </v-col>
           </v-row>
         </v-container>
@@ -176,14 +192,14 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="numberInput" :dense="dense">
+              <VcsLabel :disabled="disabled" html-for="numberInput">
                 NumberInput
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="numberInput"
-                :dense="dense"
                 type="number"
                 step="1"
                 unit="cm"
@@ -194,14 +210,14 @@
           </v-row>
           <v-row no-gutters class="align-center">
             <v-col>
-              <VcsLabel html-for="sliderInput" :dense="dense">
+              <VcsLabel :disabled="disabled" html-for="sliderInput">
                 Slider
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsSlider
+                :disabled="disabled"
                 id="sliderInput"
-                :dense="dense"
                 type="number"
                 step="1"
                 v-model.number="state.numberInput"
@@ -210,87 +226,53 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="formattedNumber" :dense="dense">
+              <VcsLabel :disabled="disabled" html-for="formattedNumber">
                 VcsFormattedNumber
               </VcsLabel>
             </v-col>
             <v-col class="d-flex justify-end">
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
           </v-row>
-          <v-row no-gutters class="gap-2">
+          <v-row no-gutters class="gc-2">
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="X"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="Y"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
               />
             </v-col>
             <v-col>
               <VcsFormattedNumber
+                :disabled="disabled"
                 id="formattedNumber"
                 :value="state.numberInput"
                 prefix="Z"
                 unit="cm"
                 :fraction-digits="1"
-                :dense="dense"
-              />
-            </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 :disabled="disabled" v-model="state.arrayInput" />
         </v-container>
       </template>
     </VcsFormSection>
@@ -300,59 +282,96 @@
       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
+              :disabled="disabled"
+              :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 :disabled="disabled"> Radio with img label </VcsLabel>
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <VcsRadio
+              :disabled="disabled"
+              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' },
+              ]"
+              :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
+              :disabled="disabled"
+              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
+              :disabled="disabled"
+              :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 }">
@@ -366,8 +385,8 @@
           <v-row>
             <v-col cols="1">
               <VcsLabel
+                :disabled="disabled"
                 html-for="textInput"
-                :dense="dense"
                 class="text-caption"
               >
                 1
@@ -375,25 +394,25 @@
             </v-col>
             <v-col>
               <VcsSelect
+                :disabled="disabled"
                 :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"
-                :dense="dense"
                 placeholder="Numbers"
               />
             </v-col>
             <v-col>
               <VcsSelect
+                :disabled="disabled"
                 :items="[
                   { 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="[
@@ -402,33 +421,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>
@@ -453,16 +445,15 @@
       <template #default>
         <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">
+            <v-col>
+              <VcsLabel html-for="selectInput2" disabled>
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col class="w-max-half">
+            <v-col>
               <VcsSelect
-                id="selectInput"
+                id="selectInput2"
                 :items="selectOptions"
-                :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
                 :disabled="true"
@@ -472,15 +463,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 +492,7 @@
     VcsRadio,
     VcsFormButton,
     VcsTextField,
+    VcsFileInput,
     VcsChipArrayInput,
     VcsFormattedNumber,
     VcsFormSection,
@@ -509,9 +500,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 +517,7 @@
       VcsFormButton,
       VcsSelect,
       VcsTextField,
+      VcsFileInput,
       VcsCheckbox,
       VcsRadio,
       VcsFormattedNumber,
@@ -533,13 +525,13 @@
       VcsLabel,
       VcsTextArea,
       VcsChipArrayInput,
+      VcsCoordinate,
       VForm,
       VRow,
       VCol,
       VContainer,
       VcsDatePicker,
       VcsSlider,
-      VcsRadioGrid,
       VIcon,
     },
     props: {
@@ -547,8 +539,8 @@
         type: Array,
         required: true,
       },
-      dense: {
-        type: Object,
+      disabled: {
+        type: Boolean,
         required: true,
       },
     },

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

@@ -1,21 +1,17 @@
 import { reactive, ref } from 'vue';
 
 export default function createExampleActions() {
-  const dense = ref(false);
+  const disabled = ref(false);
   const showSection = ref(true);
 
   const actions = [
     reactive({
-      name: 'denseSelection',
-      title: 'change row height',
-      icon: dense.value
-        ? 'mdi-arrow-split-horizontal'
-        : 'mdi-arrow-collapse-vertical',
+      name: 'disabledSelection',
+      title: 'Changed Disabled',
+      icon: disabled.value ? 'mdi-airplane' : 'mdi-airplane-off',
       callback() {
-        dense.value = !dense.value;
-        this.icon = dense.value
-          ? 'mdi-arrow-split-horizontal'
-          : 'mdi-arrow-collapse-vertical';
+        disabled.value = !disabled.value;
+        this.icon = disabled.value ? 'mdi-airplane' : 'mdi-airplane-off';
       },
     }),
     {
@@ -32,5 +28,5 @@ export default function createExampleActions() {
     },
   ];
 
-  return { actions, dense, showSection };
+  return { actions, disabled, showSection };
 }