@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/plugins/@vcmap-show-case/notifier-tester/src/NotifierTester.vue

@@ -6,9 +6,9 @@
     <v-list>
       <v-list-item v-for="type in types" :key="type">
         {{ type }}
-        <v-list-item-action @click="notify(type)">
-          <v-icon>mdi-plus</v-icon>
-        </v-list-item-action>
+        <template #append>
+          <v-icon @click="notify(type)">mdi-plus</v-icon>
+        </template>
       </v-list-item>
     </v-list>
     <v-divider />
@@ -23,12 +23,11 @@
     VSheet,
     VList,
     VListItem,
-    VListItemAction,
     VTextField,
     VIcon,
     VCard,
     VDivider,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { NotificationType, VcsCheckbox } from '@vcmap/ui';
   import { computed, inject, ref } from 'vue';
 
@@ -38,7 +37,6 @@
       VSheet,
       VList,
       VListItem,
-      VListItemAction,
       VTextField,
       VIcon,
       VCard,

package/plugins/@vcmap-show-case/panel-tester/src/PanelExample.vue

@@ -20,8 +20,8 @@
 </template>
 <style></style>
 <script>
-  import { computed, inject, ref } from 'vue';
-  import { VDivider } from 'vuetify/lib';
+  import { computed, inject } from 'vue';
+  import { VDivider } from 'vuetify/components';
   import { VcsToolButton, PanelLocation } from '@vcmap/ui';
   import { name as owner } from '../package.json';
   import IframePanelExample from './IframePanelExample.vue';
@@ -34,7 +34,6 @@
     setup() {
       const app = inject('vcsApp');
       const panelLocations = Object.values(PanelLocation);
-      const componentIds = ref(app.panelManager.componentIds);
 
       const sampleIds = {
         [PanelLocation.LEFT]: 'panel-1',
@@ -117,7 +116,7 @@
         panelLocations,
         isActive(location) {
           return computed(() =>
-            componentIds.value.includes(
+            app.panelManager.componentIds.includes(
               app.panelManager.getLocation(location)?.id,
             ),
           );

package/plugins/@vcmap-show-case/project-selector/src/ModulesListComponent.vue

@@ -14,12 +14,8 @@
           v-if="module.description && toggleable"
           :tooltip="module.description"
         >
-          <template #activator="{ on, attrs }">
-            <v-icon
-              right
-              v-bind="{ ...$attrs, ...attrs }"
-              v-on="{ ...$listeners, ...on }"
-            >
+          <template #activator="{ props }">
+            <v-icon right v-bind="{ ...$attrs, ...props }">
               mdi-help-circle
             </v-icon>
           </template>
@@ -31,7 +27,7 @@
 
 <script>
   import { VcsTooltip } from '@vcmap/ui';
-  import { VChip, VContainer, VIcon, VList } from 'vuetify/lib';
+  import { VChip, VContainer, VIcon, VList } from 'vuetify/components';
 
   export default {
     name: 'ModulesListComponent',

package/plugins/@vcmap-show-case/project-selector/src/ProjectSelectorComponent.vue

@@ -11,19 +11,15 @@
         :loading="loading === project.name"
       >
         <v-list-item>
-          <v-list-item-content>
-            <v-list-item-title class="font-weight-bold">
-              {{ project.name }}
-            </v-list-item-title>
-            <v-list-item-subtitle>{{
-              project.description
-            }}</v-list-item-subtitle>
-            <ModulesListComponent
-              :modules="project.modules"
-              @toggle-module="toggleModule"
-              :toggleable="false"
-            />
-          </v-list-item-content>
+          <v-list-item-title class="font-weight-bold">
+            {{ project.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle>{{ project.description }}</v-list-item-subtitle>
+          <ModulesListComponent
+            :modules="project.modules"
+            @toggle-module="toggleModule"
+            :toggleable="false"
+          />
           <v-list-item-action>
             <v-avatar color="success" size="30" v-if="project.active">
               <v-icon>mdi-check</v-icon>
@@ -48,13 +44,12 @@
     VCard,
     VIcon,
     VListItem,
-    VListItemContent,
     VListItemTitle,
     VListItemSubtitle,
     VListItemAction,
     VAvatar,
     VDivider,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import ModulesListComponent from './ModulesListComponent.vue';
 
   export default {
@@ -66,7 +61,6 @@
       VCard,
       VIcon,
       VListItem,
-      VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
       VListItemAction,

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

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

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

@@ -0,0 +1,75 @@
+import { name, version, mapVersion } from '../package.json';
+import SearchImpl from './searchImpl.js';
+
+const defaultLines = [
+  'Dragonfruit',
+  'Cherry',
+  'Peach',
+  'Banana',
+  'Grape',
+  'Fig',
+  'Kiwi',
+  'Watermelon',
+  'Mango',
+  'Strawberry',
+  'Apple',
+  'Raspberry',
+  'Honeydew',
+  'Lemon',
+  'Cantaloupe',
+  'Orange',
+  'Papaya',
+  'Date',
+  'Blackberry',
+  'Grapefruit',
+  'Nectarine',
+  'Apricot',
+  'Blueberry',
+  'Clementine',
+  'Elderberry',
+  'Gooseberry',
+  'Pineapple',
+  'Plum',
+  'Lime',
+  'Pomegranate',
+  'Quince',
+  'Tangerine',
+  'Mulberry',
+  'Lychee',
+  'Passionfruit',
+  'Kumquat',
+  'Cranberry',
+  'Jackfruit',
+  'Olive',
+  'Ugli fruit',
+];
+
+export default function searchExample(config) {
+  let impl;
+
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    get mapVersion() {
+      return mapVersion;
+    },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} app
+     */
+    initialize(app) {
+      impl = new SearchImpl(
+        config.lines ?? defaultLines,
+        config.withIcon ?? true,
+        config.withPOI ?? true,
+      );
+      app.search.add(impl, name);
+    },
+    destroy() {
+      impl?.destroy();
+    },
+  };
+}

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

@@ -0,0 +1,99 @@
+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;
+}
+
+/**
+ * @param {string} line
+ * @param {boolean} withIcon
+ * @param {boolean} withPOI
+ * @returns {import("@vcmap/ui").ResultItem}
+ */
+function lineToResultItem(line, withIcon, withPOI) {
+  let icon;
+  if (withIcon) {
+    const icons = Object.keys(Icons);
+    icon = icons[Math.floor(Math.random() * icons.length)];
+  }
+
+  let clicked;
+  let feature;
+  if (withPOI) {
+    feature = randomPOI(line);
+  } else {
+    clicked = async () => {
+      console.log(line);
+    };
+  }
+
+  return {
+    title: line,
+    icon,
+    clicked,
+    feature,
+  };
+}
+
+/**
+ * @implements {import("@vcmap/ui").SearchImpl}
+ */
+export default class SearchImpl {
+  /**
+   * @param {string[]} lines
+   * @param {boolean} withIcon
+   * @param {boolean} withPOI
+   */
+  constructor(lines, withIcon, withPOI) {
+    this.name = name;
+    this.lines = lines;
+    this.withIcon = withIcon;
+    this.withPOI = withPOI;
+  }
+
+  search(query) {
+    return Promise.resolve(
+      this.lines
+        .filter((l) => l.toLowerCase().includes(query.toLowerCase()))
+        .map((line) => lineToResultItem(line, this.withIcon, this.withPOI)),
+    );
+  }
+
+  // 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

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import { onMounted, ref, watchEffect } from 'vue';
   import {
     VcsFormSection,

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/theme-changer/src/ThemeChangerComponent.vue

@@ -72,14 +72,14 @@
     VCardText,
     VChip,
     VListItem,
-    VListItemContent,
+    // VListItemContent,
     VListItemTitle,
     VListItemAction,
     VAvatar,
     VIcon,
     VDivider,
     VSwitch,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
 
   export default {
     name: 'ThemeChanger',
@@ -88,7 +88,7 @@
       VCardText,
       VChip,
       VListItem,
-      VListItemContent,
+      // VListItemContent,
       VListItemTitle,
       VListItemAction,
       VAvatar,

package/plugins/@vcmap-show-case/theme-changer/src/index.js

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import { check } from '@vcsuite/check';
-import { ButtonLocation, createToggleAction, vuetify } from '@vcmap/ui';
+import { ButtonLocation, createToggleAction, createVcsThemes } from '@vcmap/ui';
 import ThemeChangerComponent from './ThemeChangerComponent.vue';
 import packageJSON from '../package.json';
 import defaultConfig from '../config.json';
@@ -31,7 +31,7 @@ export default async function themeChanger(config) {
   /** @type {VcMapTheme} */
   const vcsTheme = {
     name: 'VCS Theme',
-    ...vuetify.userPreset.theme.themes,
+    ...createVcsThemes(),
   };
   const customThemes = config.themes || defaultConfig.themes;
   const availableThemes = [vcsTheme, ...customThemes];

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/vector-properties-example/src/VectorPropertiesExample.vue

@@ -50,7 +50,7 @@
     VcsList,
     VcsCheckbox,
   } from '@vcmap/ui';
-  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
   import { Feature } from 'ol';
   import { Polygon } from 'ol/geom.js';
 

package/plugins/@vcmap-show-case/viewpoint-component-example/src/ViewpointExample.vue

@@ -1,11 +1,11 @@
 <template>
   <v-sheet>
     <VcsViewpointComponent v-model="viewpointOptions" />
-    <div class="d-flex gap-2 px-2 pt-2 pb-1">
-      <div class="d-flex gap-2 w-full justify-start">
+    <div class="d-flex gc-2 px-2 pt-2 pb-1">
+      <div class="d-flex gc-2 w-full justify-start">
         <VcsFormButton icon="$vcsReturn" @click="reset" />
       </div>
-      <div class="d-flex gap-2 w-full justify-end">
+      <div class="d-flex gc-2 w-full justify-end">
         <VcsFormButton type="submit" variant="filled" @click="log">
           Log ViewpointOptions
         </VcsFormButton>
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import { inject, ref } from 'vue';
   import { VcsViewpointComponent, VcsFormButton } from '@vcmap/ui';
   import { Viewpoint } from '@vcmap/core';

package/plugins/@vcmap-show-case/window-tester/src/BrokenWindow.vue

@@ -0,0 +1,17 @@
+<script setup>
+  import { ref } from 'vue';
+  import { VSheet, VCard } from 'vuetify/components';
+
+  const prefix = undefined;
+  const model = ref('foo');
+</script>
+
+<template>
+  <v-sheet>
+    <v-card class="pa-2" elevation="2">
+      <input v-model="model" type="text" :prefix="prefix" />
+    </v-card>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>

package/plugins/@vcmap-show-case/window-tester/src/EmptyComponent.vue

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

package/plugins/@vcmap-show-case/window-tester/src/WindowExample.vue

@@ -25,6 +25,7 @@
   import MyCustomHeader from './MyCustomHeader.vue';
   import EmptyComponent from './EmptyComponent.vue';
   import { name as owner } from '../package.json';
+  import Broken from './BrokenWindow.vue';
 
   const showTestClass = ref(false);
 
@@ -177,6 +178,15 @@
           component: WindowExampleContent,
           slot: WindowSlot.DYNAMIC_CHILD,
         },
+        {
+          id: 'broken',
+          state: {
+            headerTitle: 'This window is broken',
+            headerIcon: 'mdi-human-child',
+          },
+          component: Broken,
+          slot: WindowSlot.DETACHED,
+        },
       ];
 
       onUnmounted(() => {

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleContent.vue

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

package/plugins/@vcmap-show-case/window-tester/src/WindowExampleToggleChild.vue

@@ -8,7 +8,7 @@
 
 <style scoped></style>
 <script>
-  import { VContainer } from 'vuetify/lib';
+  import { VContainer } from 'vuetify/components';
   import { VcsFormButton, WindowSlot } from '@vcmap/ui';
   import { inject } from 'vue';
   import WindowExampleContent from './WindowExampleContent.vue';

package/plugins/@vcmap-show-case/wizard-example/src/WizardExample.vue

@@ -72,7 +72,7 @@
     VcsFormButton,
     VcsSelect,
   } from '@vcmap/ui';
-  import { VForm, VContainer } from 'vuetify/lib';
+  import { VForm, VContainer } from 'vuetify/components';
   import { ref } from 'vue';
 
   /** Component to showcase the VcsWizard and VcsWizardStep. */