@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/plugins/@vcmap-show-case/search-example/src/searchImpl.js

@@ -0,0 +1,129 @@
+import { wgs84ToMercatorTransformer } from '@vcmap/core';
+import {
+  Icons,
+  MarkdownBalloonFeatureInfoView,
+  featureInfoViewSymbol,
+} from '@vcmap/ui';
+import { Feature } from 'ol';
+import { getSize } from 'ol/extent';
+import { Point } from 'ol/geom';
+import { name } from '../package.json';
+
+const berlinExtend = [13.301518, 52.445959, 13.489982, 52.527032];
+const berlinSize = getSize(berlinExtend);
+
+const featureInfo = new MarkdownBalloonFeatureInfoView({
+  template: '# Search\n{{properties.title}}',
+});
+
+/**
+ * @param {string} title
+ * @returns {import("ol").Feature}
+ */
+function randomPOI(title) {
+  const feature = new Feature({
+    geometry: new Point(
+      wgs84ToMercatorTransformer([
+        berlinExtend[0] + Math.random() * berlinSize[0],
+        berlinExtend[1] + Math.random() * berlinSize[1],
+      ]),
+    ),
+    properties: {
+      title,
+    },
+  });
+  feature[featureInfoViewSymbol] = featureInfo;
+  return feature;
+}
+
+function getRandomIcon() {
+  const keys = Object.keys(Icons);
+  const index = Math.floor(keys.length * Math.random());
+  return `$${keys[index]}`;
+}
+
+/**
+ * @param {string} line
+ * @param {boolean} withIcon
+ * @param {boolean} withPOI
+ * @param {boolean} withActions
+ * @returns {import("@vcmap/ui").ResultItem}
+ */
+function lineToResultItem(line, withIcon, withPOI, withActions) {
+  let icon;
+  if (withIcon) {
+    icon = getRandomIcon();
+  }
+
+  let actions;
+  if (withActions) {
+    actions = [
+      {
+        name: 'action-1',
+        icon,
+        callback() {
+          console.log('Action 1');
+        },
+      },
+      {
+        name: 'action-2',
+        callback() {
+          console.log('Action 2');
+        },
+      },
+    ];
+  }
+
+  let clicked;
+  let feature;
+  if (withPOI) {
+    feature = randomPOI(line);
+  } else {
+    clicked = async () => {
+      console.log(line);
+    };
+  }
+
+  return {
+    title: line,
+    icon,
+    clicked,
+    feature,
+    actions,
+  };
+}
+
+/**
+ * @implements {import("@vcmap/ui").SearchImpl}
+ */
+export default class SearchImpl {
+  /**
+   * @param {string[]} lines
+   * @param {boolean} withIcon
+   * @param {boolean} withPOI
+   * @param {boolean} withActions
+   */
+  constructor(lines, withIcon, withPOI, withActions) {
+    this.name = name;
+    this.lines = lines;
+    this.withIcon = withIcon;
+    this.withPOI = withPOI;
+    this.withActions = withActions;
+  }
+
+  search(query) {
+    return Promise.resolve(
+      this.lines
+        .filter((l) => l.toLowerCase().includes(query.toLowerCase()))
+        .map((line) =>
+          lineToResultItem(line, this.withIcon, this.withPOI, this.withActions),
+        ),
+    );
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  abort() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  destroy() {}
+}

package/plugins/@vcmap-show-case/simple-graph/src/SimpleGraphComponent.vue

@@ -13,7 +13,7 @@
   />
 </template>
 <script>
-  import { VSparkline } from 'vuetify/lib';
+  import { VSparkline } from 'vuetify/components';
 
   export default {
     name: 'SimpleGraphComponent',

package/plugins/@vcmap-show-case/style-input-example/src/StyleExample.vue

@@ -1,27 +1,30 @@
 <template>
   <v-sheet>
-    <VcsFormSection heading="Style menus">
+    <VcsFormSection
+      heading="Style menus"
+      :header-actions="[resetExample, logStyle]"
+    >
       <VcsVectorStyleComponent
-        v-model="styleOptions"
+        v-model="styleOptions.style"
         :value-default="defaultStyleOptions"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Fill Selector">
-      <VcsFillSelector v-model="styleOptions.fill" />
+      <VcsFillSelector v-model="styleOptions.style.fill" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Stroke Selector">
-      <VcsStrokeSelector v-model="styleOptions.stroke" />
+      <VcsStrokeSelector v-model="styleOptions.style.stroke" />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Image Selector">
       <VcsImageSelector
-        v-model="styleOptions.image"
+        v-model="styleOptions.style.image"
         :value-default="defaultStyleOptions.image"
         :extended-shape-settings="true"
       />
     </VcsFormSection>
     <VcsFormSection :expandable="true" heading="Text Selector">
       <VcsTextSelector
-        v-model="styleOptions.text"
+        v-model="styleOptions.style.text"
         :value-default="defaultStyleOptions.text"
       />
     </VcsFormSection>
@@ -29,8 +32,8 @@
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
-  import { onMounted, ref, watchEffect } from 'vue';
+  import { VSheet } from 'vuetify/components';
+  import { reactive, toRaw } from 'vue';
   import {
     VcsFormSection,
     VcsFillSelector,
@@ -40,8 +43,8 @@
     VcsVectorStyleComponent,
     VectorStyleMenus,
   } from '@vcmap/ui';
-  import { parseColor } from '@vcmap/core';
-  import { Fill, Icon, RegularShape, Stroke, Style, Text } from 'ol/style.js';
+  import { getStyleOptions } from '@vcmap/core';
+  import { Fill, RegularShape, Stroke, Style, Text } from 'ol/style.js';
 
   export default {
     name: 'StyleExample',
@@ -97,93 +100,29 @@
         },
       };
 
-      const styleOptions = ref({
-        fill: undefined,
-        stroke: undefined,
-        image: undefined,
-        text: undefined,
-      });
-
-      const fill = exampleStyle.getFill();
-      const stroke = exampleStyle.getStroke();
-      const image = exampleStyle.getImage();
-      const text = exampleStyle.getText();
-
-      // TODO: Replace with new getStyleOptions from @vcmap/core as soon as available
-      if (fill) {
-        styleOptions.value.fill = {
-          color: parseColor(fill.getColor()),
-        };
-      }
-      if (stroke) {
-        styleOptions.value.stroke = {
-          color: parseColor(stroke.getColor()),
-          width: exampleStyle.getStroke().getWidth(),
-        };
-      }
-      if (image) {
-        if (image instanceof RegularShape) {
-          styleOptions.value.image = {
-            points: image.getPoints(),
-            radius: image.getRadius(),
-            radius2: image.getRadius2(),
-            angle: image.getAngle(),
-            fill: {
-              color: parseColor(image.getFill().getColor()),
-            },
-            stroke: {
-              color: parseColor(image.getStroke().getColor()),
-              width: image.getStroke().getWidth(),
-            },
-          };
-        } else if (image instanceof Icon) {
-          styleOptions.value.image = {
-            src: image.getSrc(),
-            scale: image.getScale(),
-            opacity: image.getOpacity(),
-          };
-        }
-      }
-      if (text) {
-        styleOptions.value.text = {
-          font: text.getFont(),
-          fill: {
-            color: parseColor(text.getFill()?.getColor()),
-          },
-          stroke: {
-            color: parseColor(text.getStroke()?.getColor()),
-            width: text.getStroke().getWidth(),
-          },
-          textBaseline: text.getTextBaseline(),
-          offsetY: text.getOffsetY(),
-          offsetX: text.getOffsetX(),
-          text: text.getText(),
-        };
-      }
-
-      onMounted(() => {
-        watchEffect(() => {
-          const newFill = styleOptions.value.fill;
-          const newStroke = styleOptions.value.stroke;
-          const newImage = styleOptions.value.image;
-          // const newText = styleOptions.value.text;
-          // TODO: Replace with new getStyleFromOptions from @vcmap/core as soon as available
-          exampleStyle.setFill(newFill ? new Fill(newFill) : null);
-          exampleStyle.setStroke(newStroke ? new Stroke(newStroke) : null);
-          if (newImage?.points) {
-            // exampleStyle.setImage(new RegularShape(newImage));
-          } else if (newImage?.src) {
-            exampleStyle.setImage(new Icon(newImage));
-          } else {
-            exampleStyle.setImage(null);
-          }
-        });
+      // use reactive wrapper object to ensure updates
+      const styleOptions = reactive({
+        style: getStyleOptions(exampleStyle),
       });
 
       return {
         styleOptions,
         defaultStyleOptions,
         VectorStyleMenus,
+        resetExample: {
+          name: 'resetExample',
+          icon: 'mdi-sync',
+          callback() {
+            styleOptions.style = getStyleOptions(exampleStyle);
+          },
+        },
+        logStyle: {
+          name: 'logStyle',
+          icon: 'mdi-console',
+          callback() {
+            console.log(toRaw(styleOptions.style));
+          },
+        },
       };
     },
   };

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

@@ -1,17 +1,28 @@
 <template>
   <v-sheet>
     <v-sheet class="px-2 d-grid">
-      <v-switch v-model="selectable" label="Selectable" class="ma-0" />
+      <v-switch
+        v-model="selectable"
+        label="Selectable"
+        density="compact"
+        class="mx-1"
+      />
       <v-switch
         :disabled="!selectable"
         v-model="selectSingle"
         label=" Single Select"
-        class="ma-0"
+        density="compact"
+        class="mx-1"
+      />
+      <v-switch
+        v-model="searchable"
+        label="Searchable"
+        density="compact"
+        class="mx-1"
       />
-      <v-switch v-model="searchable" label="Searchable" class="ma-0" />
       <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">
@@ -37,10 +48,10 @@
 
     <vcs-data-table
       :items="items"
-      item-key="id"
       :headers="headers"
       :show-select="selectable"
-      :single-select="selectSingle"
+      :select-strategy="selectSingle ? 'single' : 'page'"
+      :items-per-page="2"
       :show-searchbar="searchable"
       v-model="selected"
     >
@@ -49,7 +60,6 @@
         <VcsActionButtonList
           v-if="item.actions"
           :actions="item.actions"
-          :block-overflow="true"
           :overflow-count="2"
         />
       </template>
@@ -65,24 +75,24 @@
     VcsCheckbox,
     VcsActionButtonList,
   } from '@vcmap/ui';
-  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/lib';
+  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/components';
   import { ref } from 'vue';
 
   const defaultHeaders = [
     {
-      text: 'Name',
-      value: 'name',
+      title: 'Name',
+      key: 'name',
     },
     {
-      text: 'Type',
-      value: 'type',
+      title: 'Type',
+      key: 'type',
     },
     {
-      text: 'Datum',
-      value: 'date',
+      title: 'Datum',
+      key: 'date',
       sort: (a, b) => new Date(b) - new Date(a),
     },
-    { text: 'Actions', value: 'actions', sortable: false },
+    { title: 'Actions', key: 'actions', sortable: false },
   ];
 
   const defaultItems = [
@@ -113,6 +123,12 @@
       type: 'Baz',
       date: '11/2/2012 14:03',
     },
+    {
+      id: 3,
+      name: 'foo-bar',
+      type: 'Foo Bar',
+      date: '18/4/1992 21:53',
+    },
   ];
 
   export default {

package/plugins/@vcmap-show-case/textfields-example/src/TextfieldsExample.vue

@@ -85,7 +85,13 @@
   </v-sheet>
 </template>
 <script>
-  import { VSheet, VContainer, VRow, VCol, VTextField } from 'vuetify/lib';
+  import {
+    VSheet,
+    VContainer,
+    VRow,
+    VCol,
+    VTextField,
+  } from 'vuetify/components';
 
   export default {
     name: 'TextfieldsExample',

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

@@ -0,0 +1,3 @@
+# Theming Example
+
+This is a show-case plugin demonstrating the different Theming options.

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

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/theming-example",
+  "version": "1.0.0",
+  "mapVersion": "^6.0.0"
+}

package/plugins/@vcmap-show-case/theming-example/src/ThemingExample.vue

@@ -0,0 +1,116 @@
+<template>
+  <VCard>
+    <VcsFormSection heading="Colors" expandable start-open>
+      <v-container class="px-1 py-0">
+        <v-row
+          v-for="key in Object.keys(currentTheme.colors)"
+          :key="key"
+          no-gutters
+        >
+          <v-col>
+            <VcsLabel>{{ key }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField
+              v-model="currentTheme.colors[key]"
+              :bg-color="currentTheme.colors[key]"
+            ></VcsTextField>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Variables" expandable start-open>
+      <v-container class="px-1 py-0">
+        <v-row
+          no-gutters
+          v-for="key in Object.keys(currentTheme.variables)"
+          :key="key"
+        >
+          <v-col>
+            <VcsLabel>{{ key }}</VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsTextField v-model="currentTheme.variables[key]"></VcsTextField>
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <v-container class="px-1 py-0">
+      <VcsFormButton @click="reset"> Reset default </VcsFormButton>
+    </v-container>
+  </VCard>
+</template>
+
+<script>
+  import {
+    createVcsThemes,
+    VcsTextField,
+    VcsLabel,
+    VcsFormSection,
+    VcsFormButton,
+    isDark,
+  } from '@vcmap/ui';
+  import {
+    watch,
+    inject,
+    ref,
+    computed,
+    toRaw,
+    onMounted,
+    onUnmounted,
+  } from 'vue';
+  import { VCard, VCol, VRow, VContainer } from 'vuetify/components';
+
+  export default {
+    name: 'ThemingExample',
+    components: {
+      VcsLabel,
+      VcsFormSection,
+      VcsFormButton,
+      VcsTextField,
+      VContainer,
+      VCard,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const theming = ref(createVcsThemes());
+      const currentTheme = computed(() => {
+        if (isDark(app)) {
+          return theming.value.dark;
+        } else {
+          return theming.value.light;
+        }
+      });
+      onMounted(() => {
+        app.uiConfig.override({
+          name: 'vuetifyTheme',
+          value: toRaw(theming.value),
+        });
+      });
+      onUnmounted(() => {
+        app.uiConfig.remove(app.uiConfig.getByKey('vuetifyTheme'));
+      });
+      watch(
+        () => theming.value,
+        () => {
+          app.uiConfig.replace({
+            name: 'vuetifyTheme',
+            value: toRaw(theming.value),
+          });
+        },
+        { deep: true },
+      );
+      return {
+        reset: () => {
+          theming.value = createVcsThemes();
+        },
+        theming,
+        currentTheme,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,53 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import packageJSON from '../package.json';
+import ThemingExample from './ThemingExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async () => {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Theming Example',
+          icon: '$vcsWand',
+          title: 'Theming Example Plugin',
+        },
+        {
+          id: 'theming-example',
+          component: ThemingExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Theming Example',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'theming-example', action },
+        packageJSON.name,
+        ButtonLocation.MENU,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};

package/plugins/@vcmap-show-case/toolbox-example/src/TriStateExampleWindow.vue

@@ -9,7 +9,7 @@
 
 <style scoped></style>
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
 
   export default {
     name: 'WindowExampleContent',

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

@@ -227,7 +227,8 @@ export default async function toolboxExample() {
       this._stopWatching = watch(
         () => disabled.value,
         () => {
-          selectToolboxAction.disabled = disabled.value;
+          app.toolboxManager.get(selectToolboxComponent.id).action.disabled =
+            disabled.value;
           app.toolboxManager.get(
             groupToolboxComponentExampleOptions.id,
           ).disabled = disabled.value;