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

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

@@ -1,5 +1,5 @@
 <template>
-  <v-form v-model="isValid">
+  <v-form v-model="isValid" ref="form">
     <VcsFormSection
       heading="VcsFormSection Select & Text Inputs"
       :header-actions="actions"
@@ -16,9 +16,8 @@
         </ol>
       </template>
       <template #default v-if="showSection">
-        <v-container class="pa-2">
+        <v-container class="py-0 px-1">
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -32,13 +31,13 @@
                 id="selectInput"
                 :items="selectOptions"
                 :dense="dense"
-                :rules="[conditionalTest(state.conditionalInput, state.selected)]"
+                :rules="[v => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
+                color="purple"
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -54,44 +53,38 @@
                 :dense="dense"
                 :rules="[conditionalTest(state.conditionalInput, state.selected)]"
                 v-model="state.conditionalInput"
+                placeholder="conditional"
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
             <v-col>
               <VcsTextField
                 :dense="dense"
-                v-model="initialTextInput"
+                v-model="state.initialTextInput"
+                :rules="[isValidText]"
+                :loading="state.initialTextInput === 'myInitialText'"
+                :error-messages="!state.checkboxInput ? ['manual error message depending on checkbox'] : undefined"
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
             <v-col>
-              <VcsLabel html-for="initialTextInput" :dense="dense">
-                InitialTextInput
-              </VcsLabel>
-            </v-col>
-            <v-col>
-              <VcsTextField
-                id="initialTextInput"
+              <VcsTextArea
                 :dense="dense"
-                :rules="[isValidText]"
-                :loading="state.initialTextInput === 'myInitialText'"
-                v-model="state.initialTextInput"
-                :error-messages="!state.checkboxInput ? ['manual error message depending on checkbox'] : undefined"
+                :rules="[v => !!v || 'text area must not be empty']"
+                placeholder="This is a text area"
+                rows="2"
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -107,11 +100,12 @@
                 type="email"
                 :rules="[isValidEmail]"
                 v-model="state.email"
+                color="blue"
+                placeholder="Email address"
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -126,17 +120,17 @@
                 :dense="dense"
                 prepend-icon="mdi-map-marker"
                 v-model="state.prependedInput"
+                label="text"
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
             <v-col>
               <VcsLabel html-for="fileInput" :dense="dense">
-                Email
+                File input
               </VcsLabel>
             </v-col>
             <v-col>
@@ -149,6 +143,19 @@
               />
             </v-col>
           </v-row>
+          <v-row
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="dateInput" :dense="dense">
+                Date
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsDatePicker id="dateInput" v-model="state.dateInput" />
+            </v-col>
+          </v-row>
         </v-container>
       </template>
     </VcsFormSection>
@@ -157,9 +164,8 @@
       help-text="form-inputs-example.help"
     >
       <template #default>
-        <v-container>
+        <v-container class="py-0 px-1">
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -173,14 +179,14 @@
                 id="numberInput"
                 :dense="dense"
                 type="number"
-                step="10"
-                suffix="cm"
+                step="1"
+                unit="cm"
                 v-model.number="state.numberInput"
+                show-spin-buttons
               />
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -200,52 +206,39 @@
             </v-col>
           </v-row>
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
-            <v-col cols="1" class="px-1">
-              <VcsLabel html-for="coordinateX" :dense="dense">
-                X
-              </VcsLabel>
-            </v-col>
             <v-col>
               <VcsTextField
                 id="coordinateX"
                 :dense="dense"
                 type="number"
                 step="10"
-                suffix="m"
+                prefix="X"
+                unit="m"
                 v-model.number="state.numberInput"
               />
             </v-col>
-            <v-col cols="1" class="px-1">
-              <VcsLabel html-for="coordinateY" :dense="dense">
-                Y
-              </VcsLabel>
-            </v-col>
-            <v-col>
+            <v-col class="px-2">
               <VcsTextField
                 id="coordinateY"
                 :dense="dense"
                 type="number"
                 step="10"
-                suffix="m"
+                prefix="Y"
+                unit="m"
                 v-model.number="state.numberInput"
               />
             </v-col>
-            <v-col cols="1" class="px-1">
-              <VcsLabel html-for="coordinateZ" :dense="dense">
-                Z
-              </VcsLabel>
-            </v-col>
             <v-col>
               <VcsTextField
                 id="coordinateZ"
                 :dense="dense"
                 type="number"
                 step="10"
-                suffix="m"
+                unit="m"
+                prefix="Z"
                 v-model.number="state.numberInput"
               />
             </v-col>
@@ -257,9 +250,8 @@
       heading="VcsFormSection Radio & Checkbox"
     >
       <template #default>
-        <v-container>
+        <v-container class="py-0 px-1">
           <v-row
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -268,12 +260,19 @@
                 :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
-            :dense="dense"
             no-gutters
             align="center"
           >
@@ -307,15 +306,14 @@
       heading="VcsFormSection Mixed Inputs"
     >
       <template #header="{ heading }">
-        <article class="pa-2 secondary text--primary">
+        <article class="pa-2 text--primary">
           {{ heading }}
           <h3>This is a custom header using header slot</h3>
         </article>
       </template>
       <template #default>
-        <v-container>
+        <v-container class="py-0 px-1">
           <v-row
-            :dense="dense"
             align="center"
           >
             <v-col cols="1">
@@ -323,7 +321,7 @@
                 1
               </VcsLabel>
             </v-col>
-            <v-col cols="3">
+            <v-col>
               <VcsSelect
                 :items="[
                   {value: 'one', i18n: 'form-inputs-example.numbers.one'},
@@ -331,9 +329,10 @@
                   {value: 'three', i18n: 'form-inputs-example.numbers.three'}]"
                 :item-text="item => item.i18n"
                 :dense="dense"
+                placeholder="Numbers"
               />
             </v-col>
-            <v-col cols="3">
+            <v-col>
               <VcsSelect
                 :items="[
                   {value: 'Anna', fullName: 'Annabella'},
@@ -343,35 +342,35 @@
                 :dense="dense"
                 multiple
                 v-model="state.selectedMultiple"
-              />
-            </v-col>
-            <v-col cols="5">
-              <VcsTextField
-                id="textInput"
-                clearable
-                :dense="dense"
-                v-model="state.conditionalInput"
+                :rules="[v => !!v.length || 'Please select at least one option.']"
               />
             </v-col>
           </v-row>
         </v-container>
       </template>
     </VcsFormSection>
-    <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
-      type="reset"
-      icon="$vcsReturn"
-    >
-      Reset
-    </VcsButton>
+    <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>
   </v-form>
 </template>
 <script>
@@ -385,6 +384,8 @@
     VcsFormattedNumber,
     VcsFormSection,
     VcsLabel,
+    VcsTextArea,
+    VcsDatePicker,
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow } from 'vuetify/lib';
   import packageJSON from './package.json';
@@ -401,10 +402,12 @@
       VcsFormattedNumber,
       VcsFormSection,
       VcsLabel,
+      VcsTextArea,
       VForm,
       VRow,
       VCol,
       VContainer,
+      VcsDatePicker,
     },
     props: {
       actions: {
@@ -425,18 +428,26 @@
       const plugin = app.plugins.getByKey(packageJSON.name);
       const newUpdate = ref(true);
       watch(plugin.state, () => { newUpdate.value = true; });
+      const form = ref();
 
       return {
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,
         // do not put the whole config here, since it would become reactive
         selectOptions: plugin.config.selectOptions,
-        initialTextInput: plugin.config.initialTextInput,
-        isValid: false,
+        form,
+        isValid: ref(true),
         isValidText,
         conditionalTest,
         isValidEmail,
         newUpdate,
+        resetState() {
+          plugin.resetState();
+          form.value.resetValidation();
+        },
+        validate() {
+          form.value.validate();
+        },
         logState() {
           // eslint-disable-next-line no-console
           console.log(plugin.getSerializedState());

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

@@ -74,7 +74,7 @@ export default function (config) {
   /**
    * @type {FormInputsExampleState}
    */
-  const pluginState = reactive({
+  const pluginState = {
     selected: pluginConfig.selectOptions.value[0],
     selectedMultiple: [],
     conditionalInput: '',
@@ -84,7 +84,11 @@ export default function (config) {
     email: '',
     prependedInput: '',
     files: [],
-  });
+    dateInput: '',
+  };
+
+  /** @type {FormInputsExampleState} */
+  const defaultState = JSON.parse(JSON.stringify(pluginState));
 
 
   /**
@@ -149,7 +153,8 @@ export default function (config) {
     get version() { return packageJSON.version; },
     get vcMapVersion() { return packageJSON.vcMapVersion; },
     config: pluginConfig,
-    state: pluginState,
+    state: reactive(pluginState),
+    resetState: () => Object.assign(pluginState, JSON.parse(JSON.stringify(defaultState))),
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {

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

@@ -13,7 +13,7 @@ export function isValidText(value) {
  * @returns {boolean|string}
  */
 export function conditionalTest(value, condition) {
-  if (condition === 'Option A') {
+  if (condition === 'B') {
     return value === 'test' || `input ${value} must be "test"`;
   } else {
     return true;

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

@@ -1,6 +1,6 @@
 <template>
   <v-sheet>
-    <v-sheet class="pa-2">
+    <v-sheet class="px-2 d-grid">
       <v-switch
         v-model="selectable"
         label="Selectable"
@@ -286,5 +286,8 @@
 </script>
 
 <style lang="scss" scoped>
-
+.d-grid{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
 </style>

package/plugins/@vcmap-show-case/table-example/DataTableExample.vue

@@ -0,0 +1,202 @@
+<template>
+  <v-sheet>
+    <v-sheet class="px-2 d-grid">
+      <v-switch
+        v-model="selectable"
+        label="Selectable"
+      />
+      <v-switch
+        :disabled="!selectable"
+        v-model="selectSingle"
+        label=" Single Select"
+      />
+      <v-switch
+        v-model="searchable"
+        label="Searchable"
+      />
+      <v-dialog
+        v-model="dialog"
+        width="400"
+      >
+        <template #activator="{ on }">
+          <vcs-button v-on="on">
+            Add An item
+          </vcs-button>
+        </template>
+        <v-card class="pa-2">
+          <v-form
+            @submit.prevent="add"
+          >
+            <vcs-text-field
+              v-model="newItem.name"
+              label="Name"
+              :rules="required"
+            />
+            <vcs-text-field
+              v-model="newItem.type"
+              label="type"
+              :rules="required"
+            />
+            <vcs-text-field
+              v-model="newItem.date"
+              type="date"
+              label="date"
+            />
+            <vcs-button
+              type="submit"
+            >
+              Add
+            </vcs-button>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-sheet>
+
+    <vcs-data-table
+      :items="items"
+      item-key="id"
+      :headers="headers"
+      :show-select="selectable"
+      :single-select="selectSingle"
+      :show-searchbar="searchable"
+      v-model="selected"
+    >
+      <!-- eslint-disable-next-line -->
+      <template v-slot:item.actions="{ item }">
+        <VcsActionButtonList
+          v-if="item.actions"
+          :actions="item.actions"
+          :block-overflow="true"
+          :overflow-count="2"
+          small
+        />
+      </template>
+    </vcs-data-table>
+  </v-sheet>
+</template>
+
+<script>
+  import { VcsDataTable, VcsButton, VcsTextField, VcsActionButtonList } from '@vcmap/ui';
+  import {
+    VSwitch,
+    VSheet,
+    VDialog,
+    VCard,
+    VForm,
+  } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  const defaultHeaders = [
+    {
+      text: 'Name',
+      value: 'name',
+    },
+    {
+      text: 'Type',
+      value: 'type',
+    },
+    {
+      text: 'Datum',
+      value: 'date',
+      sort: (a, b) => new Date(b) - new Date(a),
+    },
+    { text: 'Actions', value: 'actions', sortable: false },
+  ];
+
+  const defaultItems = [
+    {
+      id: 0,
+      name: 'foo',
+      type: 'Foo',
+      date: '8/3/2023 9:24',
+      actions: [
+        {
+          name: 'console.log',
+          icon: 'mdi-printer',
+          callback() {
+            console.log('foo action');
+          },
+        },
+      ],
+    },
+    {
+      id: 1,
+      name: 'bar',
+      type: 'Bar',
+      date: '1/8/2022 19:54',
+    },
+    {
+      id: 2,
+      name: 'baz',
+      type: 'Baz',
+      date: '11/2/2012 14:03',
+    },
+  ];
+
+  export default {
+    name: 'DataTableExample',
+    components: {
+      VcsDataTable,
+      VcsButton,
+      VcsTextField,
+      VcsActionButtonList,
+      VSwitch,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const selectable = ref(true);
+      const searchable = ref(true);
+      const selectSingle = ref(false);
+      const selected = ref([]);
+      const items = ref(defaultItems);
+      const headers = ref(defaultHeaders);
+      const newItem = ref({
+        id: items.value.length,
+        name: 'foo',
+        type: 'foo',
+        date: new Date(),
+      });
+      const dialog = ref(false);
+
+      return {
+        selectable,
+        searchable,
+        selectSingle,
+        selected,
+        items,
+        headers,
+        newItem,
+        dialog,
+        required: [
+          v => !!v || 'Input may not be null',
+          v => v.length > 0 || 'Input must have a length',
+        ],
+        add() {
+          const item = {
+            name: newItem.value.name,
+            type: newItem.value.type,
+            date: newItem.value.date,
+          };
+
+          items.value.push(item);
+          newItem.value = {
+            name: 'foo',
+            type: 'foo',
+            date: new Date(),
+          };
+          dialog.value = false;
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.d-grid{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+</style>

package/plugins/@vcmap-show-case/table-example/README.md

@@ -0,0 +1,3 @@
+# List Example
+
+This is a show-case plugin demonstrating the usage of [VcsDataTable](../../../src/components/tables/VcsDataTable.vue).