@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.3

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

@@ -20,13 +20,18 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="selectInput">
+            <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"
@@ -37,12 +42,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="conditionalInput">
+              <VcsLabel :disabled="disabled" html-for="conditionalInput">
                 ConditionalInput
               </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="conditionalInput"
                 clearable
                 :rules="[
@@ -54,13 +60,21 @@
             </v-col>
           </v-row>
           <v-row no-gutters>
-            <v-col class="w-max-half">
-              <VcsLabel html-for="arrayInput"> Array Input </VcsLabel>
+            <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>
           </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 type="number"
                 v-model="array"
@@ -71,6 +85,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsChipArrayInput
+                :disabled="disabled"
                 id="arrayInput"
                 v-model="state.arrayInputString"
                 column
@@ -80,6 +95,7 @@
           <v-row no-gutters>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 v-model="state.initialTextInput"
                 :rules="[isValidText]"
                 :loading="
@@ -98,7 +114,7 @@
           <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"
@@ -108,10 +124,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="emailInput" required> Email </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="emailInput" required>
+                Email
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="emailInput"
                 type="email"
                 :rules="[isValidEmail]"
@@ -122,10 +141,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="prependedInput"> String With Icon </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="prependedInput">
+                String With Icon
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="prependedInput"
                 prepend-icon="mdi-map-marker"
                 v-model="state.prependedInput"
@@ -135,10 +157,13 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="fileInput"> File input </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="fileInput">
+                File input
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsFileInput
+                :disabled="disabled"
                 id="fileInput"
                 multiple
                 tooltip="Click to select a file."
@@ -148,10 +173,12 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="dateInput"> 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>
@@ -165,10 +192,13 @@
         <v-container class="py-0 px-1">
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="numberInput"> NumberInput </VcsLabel>
+              <VcsLabel :disabled="disabled" html-for="numberInput">
+                NumberInput
+              </VcsLabel>
             </v-col>
             <v-col>
               <VcsTextField
+                :disabled="disabled"
                 id="numberInput"
                 type="number"
                 step="1"
@@ -180,12 +210,14 @@
           </v-row>
           <v-row no-gutters class="align-center">
             <v-col>
-              <VcsLabel html-for="sliderInput"> Slider </VcsLabel>
+              <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"
@@ -194,53 +226,53 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel html-for="formattedNumber">
+              <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="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>
-          <VcsCoordinate v-model="array" />
+          <VcsCoordinate :disabled="disabled" v-model="array" />
         </v-container>
       </template>
     </VcsFormSection>
@@ -254,6 +286,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsRadio
+              :disabled="disabled"
               :items="[
                 ...selectOptions,
                 {
@@ -270,12 +303,13 @@
         </v-row>
         <v-row no-gutters>
           <v-col>
-            <VcsLabel> Radio with img label </VcsLabel>
+            <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' },
@@ -283,7 +317,6 @@
                 { 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
@@ -313,6 +346,7 @@
         <v-row no-gutters>
           <v-col>
             <VcsCheckbox
+              :disabled="disabled"
               id="checkboxInput"
               label="CheckboxInput"
               tooltip="This is a checkbox for terms of usage"
@@ -324,6 +358,7 @@
           </v-col>
           <v-col>
             <VcsFormButton
+              :disabled="disabled"
               :is-active="state.checkboxInput"
               @click="state.checkboxInput = !state.checkboxInput"
               tooltip="toggle button"
@@ -349,29 +384,35 @@
         <v-container class="py-0 px-1">
           <v-row>
             <v-col cols="1">
-              <VcsLabel html-for="textInput" class="text-caption"> 1 </VcsLabel>
+              <VcsLabel
+                :disabled="disabled"
+                html-for="textInput"
+                class="text-caption"
+              >
+                1
+              </VcsLabel>
             </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="[
@@ -404,16 +445,15 @@
       <template #default>
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col class="w-max-half">
+            <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="selectInput2"
                 :items="selectOptions"
-                :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
                 :disabled="true"
@@ -499,7 +539,7 @@
         type: Array,
         required: true,
       },
-      dense: {
+      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 };
 }

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

@@ -178,7 +178,7 @@ export default function formInputsExample(config) {
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
-      const { actions, dense } = createExampleActions();
+      const { actions, disabled } = createExampleActions();
 
       const { action, destroy } = createToggleAction(
         {
@@ -199,7 +199,7 @@ export default function formInputsExample(config) {
           },
           props: reactive({
             actions,
-            dense,
+            disabled,
           }),
         },
         app.windowManager,

package/plugins/@vcmap-show-case/list-example/src/ListExample.vue

@@ -1,74 +1,46 @@
 <template>
   <v-sheet>
     <VcsFormSection heading="Settings">
-      <v-container class="py-0 px-1">
+      <v-container class="py-0 px-4">
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              v-model="selectable"
-              label="Selectable"
-              class="ma-0"
-              dense
-            />
+            <v-switch v-model="selectable" label="Selectable" />
           </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-switch v-model="searchable" label="Searchable" />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="draggable"
-              label="Draggable"
-              class="ma-0"
-            />
+            <v-switch v-model="draggable" label="Draggable" />
           </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-switch v-model="appendIndex" label="Append Index" />
           </v-col>
         </v-row>
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Title">
-      <v-container class="py-0 px-1">
+      <v-container class="py-0 px-4">
         <v-row no-gutters>
           <v-col>
-            <v-switch
-              dense
-              v-model="showTitle"
-              label="Show Title"
-              class="ma-0"
-            />
+            <v-switch v-model="showTitle" label="Show Title" />
           </v-col>
           <v-col>
             <vcs-text-field
@@ -84,28 +56,22 @@
               v-model="titleActions"
               label="Title Actions"
               class="ma-0"
-              dense
             />
           </v-col>
           <v-col>
-            <v-switch
-              dense
-              v-model="titleIcon"
-              label="Title Icon"
-              class="ma-0"
-            />
+            <v-switch 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-container class="py-2 px-4">
         <v-row no-gutters>
           <v-dialog v-model="dialog" width="400">
             <template #activator="{ props }">
               <vcs-form-button v-bind="props"> Add An item </vcs-form-button>
             </template>
-            <v-card class="pa-2">
+            <v-card class="py-2 px-4">
               <v-form @submit.prevent="add">
                 <vcs-text-field
                   v-model="newItem.name"
@@ -117,52 +83,23 @@
                   label="Title"
                   :rules="required"
                 />
+                <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="hasUpdate" v-model="newItem.hasUpdate" />
+                <v-switch label="rename action" v-model="newItem.renamable" />
                 <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="rename action"
-                  v-model="newItem.renameAction"
-                  class="ma-0"
-                />
-                <v-switch
-                  dense
-                  label="console.log action"
-                  v-model="newItem.action"
-                  class="ma-0"
+                  label="toggle rename action"
+                  v-model="newItem.toggleRename"
                 />
+                <v-switch label="console.log action" v-model="newItem.action" />
                 <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>
@@ -172,7 +109,7 @@
       </v-container>
     </VcsFormSection>
     <VcsFormSection heading="Selection">
-      <v-container class="py-1 px-1">
+      <v-container class="py-2 px-4">
         <v-row no-gutters>
           <template v-if="selectable">
             <v-col>
@@ -226,7 +163,6 @@
     VcsTextField,
     Icons,
     VcsFormSection,
-    createListItemRenameAction,
   } from '@vcmap/ui';
   import {
     VSwitch,
@@ -238,7 +174,7 @@
     VRow,
     VCol,
   } from 'vuetify/components';
-  import { computed, ref } from 'vue';
+  import { computed, reactive, ref } from 'vue';
 
   function getRandomIcon() {
     const keys = Object.keys(Icons);
@@ -311,7 +247,8 @@
         disabled: false,
         visible: true,
         icon: false,
-        renameAction: false,
+        renamable: false,
+        toggleRename: false,
         action: false,
         clicked: false,
         selected: false,
@@ -339,13 +276,14 @@
           (v) => v.length > 0 || 'Input must have a length',
         ],
         add() {
-          const item = {
+          const item = reactive({
             name: newItem.value.name,
             title: newItem.value.title,
             disabled: newItem.value.disabled,
             visible: newItem.value.visible,
             hasUpdate: newItem.value.hasUpdate,
-          };
+            renamable: newItem.value.renamable,
+          });
 
           if (newItem.value.icon) {
             item.icon = getRandomIcon();
@@ -353,9 +291,13 @@
 
           item.actions = [];
 
-          if (newItem.value.renameAction) {
-            item.rename = false;
-            item.actions.push(createListItemRenameAction(item));
+          if (newItem.value.toggleRename) {
+            item.actions.push({
+              name: 'toggle rename',
+              callback() {
+                item.renamable = !item.renamable;
+              },
+            });
           }
 
           if (newItem.value.action) {
@@ -368,9 +310,11 @@
           }
 
           if (newItem.value.clicked) {
-            item.clicked = () => {
-              console.log(`${item.name} just got clicked`);
-            };
+            item.clickedCallbacks = [
+              () => {
+                console.log(`${item.name} just got clicked`);
+              },
+            ];
           }
 
           if (newItem.value.selected) {
@@ -382,6 +326,13 @@
               }
             };
           }
+
+          if (newItem.value.renamable) {
+            item.titleChanged = (newTitle) => {
+              item.title = newTitle;
+            };
+          }
+
           items.value.push(item);
           newItem.value = {
             name: 'foo',
@@ -389,7 +340,7 @@
             disabled: false,
             visible: true,
             icon: false,
-            renameAction: false,
+            renamable: false,
             action: false,
             clicked: false,
             selected: false,