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

package/plugins/@vcmap-show-case/category-tester/Category.vue

@@ -66,14 +66,12 @@
     VCard,
     VForm,
     VTextarea,
-    VBtn,
   } from 'vuetify/lib';
 
   export default {
     name: 'CategoryComponent',
     components: {
       VcsButton,
-      VSheet,
       VVirtualScroll,
       VListItem,
       VListItemContent,
@@ -84,7 +82,6 @@
       VForm,
       VTextarea,
       VSheet,
-      VBtn,
     },
     props: {
       categoryName: {
@@ -129,7 +126,7 @@
           dialog.value = false;
         },
         download() {
-          const stringObject = JSON.stringify(categoryObject.serializeForContext(app.dynamicContextId), null, 2);
+          const stringObject = JSON.stringify(categoryObject.serializeModule(app.dynamicModuleId), null, 2);
           downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
           if (downloadLink.value) {
             nextTick(() => {

package/plugins/@vcmap-show-case/config-editor/editor.vue

@@ -8,10 +8,10 @@
       v-else
     />
 
-    <VcsButton @click="replaceContext">
+    <VcsButton @click="replaceModule">
       Apply
     </VcsButton>
-    <VcsButton @click="removeContext">
+    <VcsButton @click="removeModule">
       Remove
     </VcsButton>
   </div>
@@ -20,10 +20,10 @@
 <script>
   import { ref, inject } from 'vue';
   import { VcsButton } from '@vcmap/ui';
-  import { Context } from '@vcmap/core';
+  import { VcsModule } from '@vcmap/core';
   import { VProgressCircular, VTextarea } from 'vuetify/lib';
 
-  const contextId = 'foo';
+  const moduleId = 'foo';
 
   export default {
     name: 'Editor',
@@ -35,25 +35,25 @@
     setup() {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const context = app.getContextById(contextId);
-      const configString = ref(JSON.stringify(context ? context.config : {}, null, 2));
+      const module = app.getModuleById(moduleId);
+      const configString = ref(JSON.stringify(module ? module.config : {}, null, 2));
       const loading = ref(false);
 
       return {
         configString,
         loading,
-        async replaceContext() {
+        async replaceModule() {
           loading.value = true;
           const config = JSON.parse(configString.value);
-          config.id = contextId;
-          const newContext = new Context(config);
-          await this.removeContext();
-          await app.addContext(newContext);
+          config.id = moduleId;
+          const newModule = new VcsModule(config);
+          await this.removeModule();
+          await app.addModule(newModule);
           loading.value = false;
         },
-        async removeContext() {
-          if (app.getContextById(contextId)) {
-            await app.removeContext(contextId);
+        async removeModule() {
+          if (app.getModuleById(moduleId)) {
+            await app.removeModule(moduleId);
           }
         },
       };

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

@@ -143,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>
@@ -254,7 +267,9 @@
           </v-row>
           <v-row no-gutters>
             <v-col>
-              <VcsLabel :dense="dense">Text</VcsLabel>
+              <VcsLabel :dense="dense">
+                Text
+              </VcsLabel>
             </v-col>
           </v-row>
           <v-row
@@ -370,6 +385,7 @@
     VcsFormSection,
     VcsLabel,
     VcsTextArea,
+    VcsDatePicker,
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow } from 'vuetify/lib';
   import packageJSON from './package.json';
@@ -391,6 +407,7 @@
       VRow,
       VCol,
       VContainer,
+      VcsDatePicker,
     },
     props: {
       actions: {

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

@@ -84,6 +84,7 @@ export default function (config) {
     email: '',
     prependedInput: '',
     files: [],
+    dateInput: '',
   };
 
   /** @type {FormInputsExampleState} */

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).

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

@@ -0,0 +1,47 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
+import DataTableExample from './DataTableExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function iconsExample() {
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Table Example',
+          title: 'Table Example Plugin',
+        },
+        {
+          id: 'table-example',
+          component: DataTableExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Table Example',
+          },
+          position: {
+            width: 500,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/table-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/table-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/src/actions/actionHelper.js

@@ -203,29 +203,18 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(owner, [String, vcsAppSymbol]);
 
   const id = uuid();
+  const { position: windowPositionOptions, ...component } = modalComponent;
+  let modalActivator = null;
 
-  const addModal = (zIndex) => {
-    const child = document.getElementById(id);
-    if (!child) {
-      const elem = document.createElement('div');
-      elem.id = id;
-      Object.assign(elem.style, {
-        position: 'absolute',
-        zIndex,
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      });
-      elem.onclick = () => { app.windowManager.remove(id); };
-      document.body.appendChild(elem);
-    }
-  };
-
-  const removeModal = () => {
-    const child = document.getElementById(id);
-    if (child) {
-      child.parentElement.removeChild(child);
+  /**
+   * Closes the modal at mousedown on an app element
+   * Requires mousedown event bubbling on app elements (same behaviour as v-menu).
+   * @param {MouseEvent} e
+   */
+  const handleMouseDown = (e) => {
+    const div = document.getElementById(`window-component--${id}`);
+    if (!div?.contains(e.target) && !modalActivator?.contains(e.target)) {
+      app.windowManager.remove(id);
     }
   };
 
@@ -236,10 +225,11 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
       if (!this.active) {
         this.active = true;
         const { left, top, width } = event.currentTarget.getBoundingClientRect();
-        const position = getWindowPositionOptions(left + width, top, app.maps.target);
+        modalActivator = event.currentTarget;
+        const position = { ...getWindowPositionOptions(left + width, top, app.maps.target), ...windowPositionOptions };
         const state = { ...modalComponent?.state, hideHeader: true };
-        app.windowManager.add({ position, ...modalComponent, id, state }, owner);
-        addModal(app.windowManager.componentIds.length - 2);
+        app.windowManager.add({ position, ...component, id, state }, owner);
+        document.addEventListener('mousedown', handleMouseDown);
       } else {
         this.active = false;
         app.windowManager.remove(id);
@@ -252,10 +242,9 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     app.windowManager.removed.addEventListener(({ id: windowId }) => {
       if (windowId === id) {
         action.active = false;
-        removeModal();
+        document.removeEventListener('mousedown', handleMouseDown);
       }
     }),
-    removeModal,
   ];
 
   const destroy = () => { listeners.forEach((cb) => { cb(); }); };

package/src/actions/styleSelector.vue

@@ -1,6 +1,16 @@
 <template>
-  <v-sheet v-if="items" class="pa-2">
-    <VcsSelect :items="items" v-model="currentStyle" />
+  <v-sheet v-if="items" class="pt-1 pb-0 px-0">
+    <v-list>
+      <v-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        @click.stop="select(item.value)"
+      >
+        <v-list-item-title :class="{ 'primary--text': item.value === currentStyleName }">
+          {{ item.text }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
     <v-list v-if="currentStyleLegend.length > 0">
       <v-list-item
         v-for="(entry, index) in currentStyleLegend"
@@ -21,18 +31,17 @@
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
   import {
-    VChip, VList, VListItem, VListItemContent, VListItemIcon, VSheet,
+    VChip, VList, VListItem, VListItemContent, VListItemIcon, VListItemTitle, VSheet,
   } from 'vuetify/lib';
-  import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {
     name: 'StyleSelector',
     components: {
-      VcsSelect,
       VSheet,
       VList,
       VListItem,
       VListItemIcon,
+      VListItemTitle,
       VChip,
       VListItemContent,
     },
@@ -46,8 +55,8 @@
         required: true,
       },
     },
-    setup({ layerName, availableStyles }) {
-      /** @type {VcsApp} */
+    setup({ layerName, availableStyles }, { attrs }) {
+      /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       /** @type {import("@vcmap/core").FeatureLayer} */
       const layer = app.layers.getByKey(layerName);
@@ -68,16 +77,6 @@
         styleChangedListener();
       });
 
-      const currentStyle = computed({
-        get() { return currentStyleName.value; },
-        set(styleName) {
-          const style = styleName === defaultStyle ?
-            layer.defaultStyle :
-            app.styles.getByKey(styleName);
-          layer.setStyle(style);
-        },
-      });
-
       const items = computed(() => {
         return [
           { text: 'Default', value: defaultStyle },
@@ -85,15 +84,23 @@
         ];
       });
 
+      function select(styleName) {
+        const style = styleName === defaultStyle ?
+          layer.defaultStyle :
+          app.styles.getByKey(styleName);
+        layer.setStyle(style);
+        app.windowManager.remove(attrs['window-state'].id);
+      }
+
       return {
-        currentStyle,
+        currentStyleName,
         currentStyleLegend,
         items,
+        select,
       };
     },
   };
 </script>
 
 <style scoped>
-
 </style>

package/src/components/form-inputs-controls/VcsDatePicker.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-menu
+    v-model="menuOpen"
+    :close-on-content-click="false"
+    transition="scale-transition"
+    offset-y
+    max-width="290px"
+    min-width="290px"
+  >
+    <template #activator="{ on, attrs }">
+      <v-text-field
+        v-model="formattedDate"
+        :placeholder="formatDate(new Date().toISOString())"
+        v-bind="{...$attrs, ...attrs}"
+        v-on="{...$listeners, ...on}"
+        :prepend-icon="icon"
+        readonly
+        hide-details
+        class="ma-0 py-1"
+      />
+    </template>
+    <v-date-picker v-model="date" no-title @input="menuOpen = false" :locale="locale" color="primary">
+      <v-btn color="primary" @click="goToToday">
+        {{ $t('datePicker.today') }}
+      </v-btn>
+    </v-date-picker>
+  </v-menu>
+</template>
+<style lang="scss" scoped>
+::v-deep {
+  .v-input__control{
+    padding: 0 8px;
+  }
+}
+</style>
+<script>
+  import {
+    computed, ref, watch, inject, onUnmounted, onBeforeMount,
+  } from 'vue';
+  import {
+    VMenu, VTextField, VDatePicker, VBtn,
+  } from 'vuetify/lib';
+  /**
+   * @description stylized wrapper around {@link https://v15.vuetifyjs.com/en/components/date-pickers/#month-pickers-in-dialog-and-menu}.
+   * @vue-prop {string} value - value of the date picker in {@link https://tc39.es/ecma262/#sec-date-time-string-format | Date Time String Format}
+   * @vue-prop {string} icon - specify optional prepend icon, defaults to mdi-calendar
+   * @vue-event {string} input - raised when calendar date is selected
+   */
+  export default {
+    name: 'VcsDatePicker',
+    props: {
+      value: {
+        type: String,
+        required: true,
+      },
+      icon: {
+        type: String,
+        default: 'mdi-calendar',
+      },
+    },
+    components: {
+      VMenu,
+      VTextField,
+      VDatePicker,
+      VBtn,
+    },
+    setup(props, context) {
+      /**
+       * @type {import("@vcmap/ui").VcsUiApp}
+       */
+      const app = /** @type {import("@vcmap/ui").VcsUiApp} */ (inject('vcsApp'));
+      const localValue = ref(props.value);
+      const menuOpen = ref(false);
+      const locale = ref(app.locale);
+
+      const isValid = date => !Number.isNaN(Date.parse(date));
+      const setFromValue = () => {
+        if (isValid(localValue.value)) {
+          localValue.value = props.value;
+        } else {
+          // eslint-disable-next-line no-console
+          console.error('Invalid date provided: ', props.value);
+        }
+      };
+      onBeforeMount(() => setFromValue());
+      const destroyLocaleChanged = app.localeChanged.addEventListener(() => { locale.value = app.locale; });
+      onUnmounted(() => destroyLocaleChanged());
+
+      const formatDate = (date) => {
+        if (date) {
+          return new Intl.DateTimeFormat(locale.value, { dateStyle: 'short' }).format(Date.parse(date));
+        }
+        return '';
+      };
+      const goToToday = () => {
+        localValue.value = new Date(Date.now()).toISOString().substring(0, 10);
+        menuOpen.value = false;
+      };
+      watch(() => props.value, () => setFromValue());
+      const formattedDate = computed({
+        get: () => { return formatDate(localValue.value); },
+        set: () => {},
+      });
+      const date = computed({ get: () => localValue.value, set: (nv) => { localValue.value = nv; context.emit('input', localValue.value); } });
+
+      return {
+        formattedDate, date, menuOpen, formatDate, locale, goToToday,
+      };
+    },
+  };
+</script>