@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/notifier/notifier.js

@@ -16,7 +16,8 @@ import { v4 as uuidv4 } from 'uuid';
  * @property {NotificationType} type
  * @property {string} [title]
  * @property {number} timeout
- * @property {import("vue").Ref<boolean>} open
+ * @property {import("vue").Ref<boolean>} openRef
+ * @property {open} open
  * @property {function():void} close
  */
 
@@ -57,7 +58,7 @@ function createNotification(options, notifier) {
       return timeout ?? 5000;
     },
     get open() {
-      return open;
+      return open.value;
     },
     set open(value) {
       open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
@@ -65,6 +66,9 @@ function createNotification(options, notifier) {
         this.close();
       }
     },
+    get openRef() {
+      return open;
+    },
     close() {
       open.value = false;
       setTimeout(() => {

package/src/search/ResultItem.vue

@@ -1,26 +1,27 @@
 <template>
-  <div class="ma-2 d-flex flex-row align-center" v-if="item">
-    <v-list-item-icon v-if="item.icon" class="px-1">
+  <v-list-item class="ma-2 d-flex flex-row align-center" v-if="item">
+    <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}
       </v-icon>
-    </v-list-item-icon>
+    </template>
     <div class="px-2 d-flex align-center" :title="$t('search.select')">
       <span v-html="marked" />
     </div>
-    <VcsActionButtonList
-      v-if="hasActions"
-      :actions="item.actions"
-      :block-overflow="true"
-      :overflow-count="2"
-      right
-    />
-  </div>
+    <template #append>
+      <VcsActionButtonList
+        v-if="hasActions"
+        :actions="item.actions"
+        :overflow-count="2"
+        right
+      />
+    </template>
+  </v-list-item>
 </template>
 
 <script>
   import { computed } from 'vue';
-  import { VIcon, VListItemIcon } from 'vuetify/lib';
+  import { VIcon, VListItem } from 'vuetify/components';
   import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
 
   /**
@@ -55,8 +56,8 @@
     name: 'ResultItem',
     components: {
       VcsActionButtonList,
-      VListItemIcon,
       VIcon,
+      VListItem,
     },
     props: {
       query: {

package/src/search/ResultItem.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     hasActions: import("vue").ComputedRef<boolean>;
     marked: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;
         default: string;
@@ -21,5 +21,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     query: string;
-}>;
+}, {}>;
 export default _default;

package/src/search/ResultsComponent.vue

@@ -1,29 +1,22 @@
 <template>
-  <v-list dense class="ma-0 overflow-y-auto vcs-search-results">
-    <v-list-item-group v-model="highlighted">
-      <v-list-item v-for="(item, index) in results" :key="index" class="px-0">
-        <v-list-item-content>
-          <ResultItem :item="item" :query="query" class="cursor-pointer" />
-          <v-divider
-            v-if="index < results.length - 1"
-            :key="index"
-            class="base lighten-3"
-          />
-        </v-list-item-content>
-      </v-list-item>
-    </v-list-item-group>
+  <v-list
+    density="compact"
+    class="ma-0 overflow-y-auto vcs-search-results"
+    v-model="highlighted"
+  >
+    <ResultItem
+      :item="item"
+      :query="query"
+      class="cursor-pointer px-0"
+      v-for="(item, index) in results"
+      :key="index"
+    />
   </v-list>
 </template>
 
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
-  import {
-    VDivider,
-    VList,
-    VListItem,
-    VListItemContent,
-    VListItemGroup,
-  } from 'vuetify/lib';
+  import { VList } from 'vuetify/components';
   import ResultItem from './ResultItem.vue';
 
   /**
@@ -37,10 +30,6 @@
     components: {
       ResultItem,
       VList,
-      VListItemGroup,
-      VListItem,
-      VListItemContent,
-      VDivider,
     },
     props: {
       query: {

package/src/search/ResultsComponent.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     highlighted: import("vue").WritableComputedRef<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: StringConstructor;
         default: string;
@@ -20,5 +20,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     query: string;
-}>;
+}, {}>;
 export default _default;

package/src/search/SearchComponent.vue

@@ -3,7 +3,7 @@
     <span class="d-flex justify-space-between align-center mt-1 ml-2">
       <v-icon class="pa-1"> $vcsSearch </v-icon>
       <VcsTextField
-        class="d-inline-block user-select-none w-full mx-1"
+        class="d-inline-block user-select-none w-100 mx-1"
         autofocus
         :loading="searching"
         clearable
@@ -14,7 +14,7 @@
         @input="reset"
       />
     </span>
-    <v-divider class="mt-1 base darken-1" v-if="!!results.length" />
+    <v-divider class="mt-1 base-darken-1" v-if="!!results.length" />
     <ResultsComponent :query="query" :results="results" />
     <v-divider v-if="!!results.length" />
     <div v-if="!!results.length" class="d-flex px-2 pt-2 pb-1 justify-end">
@@ -26,27 +26,28 @@
 </template>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .v-input {
-      fieldset {
-        padding: 0 !important;
-      }
-      fieldset,
-      input {
-        border-color: transparent !important;
-      }
+  :deep(.v-input) {
+    fieldset {
+      padding: 0 !important;
     }
-    .v-icon .v-icon__component {
-      width: 16px;
-      height: 16px;
+    fieldset,
+    input {
+      border-color: transparent !important;
     }
   }
+  :deep(.v-icon .v-icon__component) {
+    width: 16px;
+    height: 16px;
+  }
+  .user-select-none {
+    user-select: none;
+  }
 </style>
 
 <script>
   import { inject, onUnmounted, ref } from 'vue';
   import { getLogger } from '@vcsuite/logger';
-  import { VSheet, VDivider, VIcon } from 'vuetify/lib';
+  import { VSheet, VDivider, VIcon } from 'vuetify/components';
   import VcsTextField from '../components/form-inputs-controls/VcsTextField.vue';
   import ResultsComponent from './ResultsComponent.vue';
   import VcsFormButton from '../components/buttons/VcsFormButton.vue';

package/src/search/SearchComponent.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{}, {
     query: import("vue").Ref<null>;
     searching: import("vue").Ref<boolean>;
-    results: import("vue").Ref<import("./search.js").ResultItem[]>;
+    results: import("vue").Ref<import("./search.js", { with: { "resolution-mode": "import" } }).ResultItem[]>;
     reset: () => void;
     clear: () => void;
     search: () => Promise<void>;
     zoomToAll: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/search/search.d.ts

@@ -15,13 +15,13 @@ export type ResultItem = {
      */
     clicked?: (() => Promise<void>) | undefined;
     /**
-     * If a feature is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
+     * If a feature (in web mercator) is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
      */
     feature?: import("ol").Feature | undefined;
 };
 export type SearchImpl = {
     /**
-     * Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
+     * Name of the implementation. Must be unique, best practice is to prefix with your plugin name to ensure uniqueness or use a uuid.
      */
     name: string;
     search: (arg0: string) => Promise<Array<ResultItem>>;

package/src/search/search.js

@@ -28,12 +28,12 @@ import { getViewpointFromFeature } from '../actions/actionHelper.js';
  * @property {string} [icon] An optional icon
  * @property {Array<import("../actions/actionHelper.js").VcsAction>} [actions]
  * @property {function():Promise<void>} [clicked] Obligatory, if no feature is provided. Can overwrite default zoom to feature behaviour.
- * @property {import("ol").Feature|undefined} [feature] If a feature is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
+ * @property {import("ol").Feature|undefined} [feature] If a feature (in web mercator) is provided, the feature is added to the result layer and search zooms to the layer's extent. Default clicked handler is zoom to feature, highlight feature and select feature, if feature has a FeatureInfoView.
  */
 
 /**
  * @typedef {Object} SearchImpl
- * @property {string} name Name of the implementation. Must be the name of the plugin the SearchImpl is owned by
+ * @property {string} name Name of the implementation. Must be unique, best practice is to prefix with your plugin name to ensure uniqueness or use a uuid.
  * @property {function(string):Promise<Array<ResultItem>>} search
  * @property {function(string):Promise<Array<string>>} [suggest] // XXX currently not implemented in UI at Beta state
  * @property{function():void} abort - should abort any ongoing requests to search or suggest without throwing an error
@@ -75,19 +75,19 @@ function setupSearchResultLayer(app) {
   app.layers.add(resultLayer);
 
   const style = new VectorStyleItem({
-    image: getPointResultIcon(getDefaultPrimaryColor()),
+    image: getPointResultIcon(getDefaultPrimaryColor(app)),
     fill: {
       color: 'rgba(237, 237, 237, 0.1)',
     },
     stroke: {
-      color: getDefaultPrimaryColor(),
+      color: getDefaultPrimaryColor(app),
       width: 5,
     },
   });
   resultLayer.setStyle(style);
 
   function setResultColor() {
-    const color = getColorByKey('primary');
+    const color = getColorByKey(app, 'primary');
     style.stroke?.setColor(color);
     style.image = new Icon(getPointResultIcon(color));
     resultLayer.forceRedraw();
@@ -185,11 +185,7 @@ class Search extends IndexedCollection {
   add(item, owner, index) {
     check(owner, [String, vcsAppSymbol]);
     check(item.search, Function);
-    if (item.name !== owner) {
-      getLogger('Search').warning(
-        'SearchImplementations must be named as the plugin they are owned by.',
-      );
-    }
+
     item[searchImplOwnerSymbol] = owner;
     super.add(item, index);
   }

package/src/setup.js

@@ -1,9 +1,9 @@
-import Vue from 'vue';
+// import Vue from 'vue';
 
 // eslint-disable-next-line no-unused-vars
 import * as core from '@vcmap/core';
 // pull in entire core for vcsClassRegistry
 
-Vue.config.productionTip = false;
+// Vue.config.productionTip = false;
 
 window.CESIUM_BASE_URL = '/node_modules/@vcmap-cesium/engine/Build/';

package/src/styles/_typography.scss

@@ -1,6 +1,7 @@
 @import 'vcsFont.scss';
 
-.v-application {
+.v-application,
+.v-overlay-container {
   h1,
   h2,
   h3,
@@ -11,21 +12,22 @@
   span,
   button,
   input,
+  textarea,
   .caption,
   .tooltip,
+  label,
   p {
-    font-size: $vcs-font-size;
+    font-size: var(--v-vcs-font-size);
     &:not(.v-icon) {
-      font-family: 'Titillium Web', sans-serif !important;
+      font-family: var(--v-vcs-font-family), sans-serif !important;
     }
   }
-
   h1 {
-    font-size: 16px;
+    font-size: calc(var(--v-vcs-font-size) + 3px);
   }
 
   h2 {
-    font-size: 14px;
+    font-size: calc(var(--v-vcs-font-size) + 1px);
   }
 
   h3 {
@@ -33,7 +35,10 @@
   }
 
   h4 {
-    font-size: 12px;
+    font-size: calc(var(--v-vcs-font-size) - 1px);
     font-weight: normal;
   }
+  .v-tooltip > .v-overlay__content {
+    font-size: var(--v-vcs-font-size);
+  }
 }

package/src/styles/main.scss

@@ -1,11 +1,9 @@
-@import './utils/all';
-
-@import './theming';
 @import './typography';
 @import './shades';
 @import './variables';
 @import './vcsFont';
 @import './vcsGrid';
+@import './vcsList';
 
 /* latin-ext */
 @font-face {
@@ -19,3 +17,8 @@ html.vcs-ui {
   overflow-x: hidden !important;
   overflow-y: hidden !important;
 }
+
+svg {
+  height: inherit;
+  width: inherit;
+}

package/src/styles/settings.scss

@@ -0,0 +1,6 @@
+// @use 'vuetify';
+@use 'vuetify/settings' with (
+  // $font-size-root: 13px,
+  // $icon-size: 20px,
+  /** Footer **/ // $footer-padding: 0px 0px, // 6px 16px !default;
+);

package/src/styles/variables.scss

@@ -14,10 +14,11 @@ $material-dark: (
   ),
   'input-bottom-line': var(--v-base-base),
   'dividers': var(--v-base-lighten2),
-  'toolbar': rgba(map-get($shades, 'black'), 0.8),
-  'table': (
-    'hover': var(--v-base-lighten4),
-  ),
+  //'toolbar': rgba(map-get($shades, 'black'), 0.8),
+  'table':
+    (
+      'hover': var(--v-base-lighten4),
+    ),
 );
 $material-light: (
   'text-fields': (
@@ -33,10 +34,11 @@ $material-light: (
     'disabled': rgba(map-get($shades, 'black'), 0.5),
   ),
   'dividers': var(--v-base-lighten2),
-  'toolbar': rgba(map-get($shades, 'white'), 0.8),
-  'table': (
-    'hover': var(--v-base-lighten4),
-  ),
+  //'toolbar': rgba(map-get($shades, 'white'), 0.8),
+  'table':
+    (
+      'hover': var(--v-base-lighten4),
+    ),
 );
 
 // input font and icon

package/src/styles/vcsGrid.scss

@@ -1,13 +1,3 @@
 // fonts
 $line-height-base: 40px; // header lines
 $line-height-dense: 32px; // rows in form field
-
-.gap-1 {
-  gap: 4px;
-}
-.gap-2 {
-  gap: 8px;
-}
-.gap-3 {
-  gap: 12px;
-}

package/src/styles/vcsList.scss

@@ -0,0 +1,8 @@
+// Default global List overrides
+// `vcsList` class is set per default to VList Elements
+
+.vcsList {
+  .v-list-item--density-compact.v-list-item--one-line {
+    min-height: var(--v-vcs-item-height);
+  }
+}

package/src/vcsUiApp.d.ts

@@ -11,19 +11,23 @@ export type PluginConfig = {
     /**
      * - path to the plugin's index.js
      */
-    entry: string | undefined;
+    entry?: string | undefined;
     /**
      * - version or version range
      */
-    version: string | undefined;
+    version?: string | undefined;
+};
+export type PluginConfigEditorComponent<Config extends Object> = import("vue").Component<{
+    getConfig(): Promise<Config>;
+    setConfig(config: Config): Promise<void>;
+}> & {
+    title?: string;
 };
 export type PluginConfigEditor = {
     /**
      * - A editor component to configure a plugin or item
      */
-    component: import("vue").Component & {
-        title: string | undefined;
-    };
+    component: PluginConfigEditorComponent<object>;
     /**
      * - The collection the item belongs to. Default is plugins collection.
      */
@@ -60,7 +64,7 @@ export type VcsPlugin<P extends Object, S extends Object> = {
 export type VcsComponentManager<T extends Object, O extends Object> = {
     added: import("@vcmap/core").VcsEvent<T>;
     removed: import("@vcmap/core").VcsEvent<T>;
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<Array<string>>;
     get: (arg0: string) => T | undefined;
     has: (arg0: string) => boolean;
     remove: (arg0: string) => void;
@@ -94,6 +98,34 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _pluginListeners;
+    /**
+     * @type {I18nCollection<Object>}
+     * @private
+     */
+    private _i18n;
+    /**
+     *
+     * @type {import("vue-i18n").I18n}
+     * @private
+     */
+    private _vueI18nPlugin;
+    /**
+     * @type {ReturnType<typeof import("vuetify").createVuetify>}
+     * @private
+     */
+    private _vuetify;
+    /**
+     *
+     * @type {import("vue-i18n").Composer}
+     * @private
+     */
+    private _vueI18n;
+    /**
+     *
+     * @type {function(): void}
+     * @private
+     */
+    private _vueI18nDestroy;
     /**
      * @type {OverrideClassRegistry<import("./callback/vcsCallback.js").default>}
      * @private
@@ -149,23 +181,6 @@ declare class VcsUiApp extends VcsApp {
      * @private
      */
     private _overviewMap;
-    /**
-     * @type {I18nCollection<Object>}
-     * @private
-     */
-    private _i18n;
-    /**
-     *
-     * @type {import("vue-i18n").VueI18n}
-     * @private
-     */
-    private _vueI18n;
-    /**
-     *
-     * @type {function(): void}
-     * @private
-     */
-    private _vueI18nDestroy;
     /**
      * @type {CategoryManager}
      * @private
@@ -247,9 +262,96 @@ declare class VcsUiApp extends VcsApp {
      */
     get i18n(): I18nCollection;
     /**
-     * @returns {import("vue-i18n").IVueI18n}
+     * @returns {import("vue-i18n").I18n}
+     */
+    get vueI18nPlugin(): import("vue-i18n").I18n<any, any, any, string, boolean>;
+    /**
+     * @returns {ReturnType<typeof import("vuetify").createVuetify>}
+     */
+    get vuetify(): {
+        install: (app: import("vue").App<any>) => void;
+        defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
+        display: import("vuetify").DisplayInstance;
+        theme: import("vuetify").ThemeInstance & {
+            install: (app: import("vue").App<any>) => void;
+        };
+        icons: Record<string, any>;
+        locale: {
+            isRtl: import("vue").Ref<boolean>;
+            rtl: import("vue").Ref<Record<string, boolean>>;
+            rtlClasses: import("vue").Ref<string>;
+            name: string;
+            messages: import("vue").Ref<import("vuetify").LocaleMessages>;
+            current: import("vue").Ref<string>;
+            fallback: import("vue").Ref<string>;
+            t: (key: string, ...params: unknown[]) => string;
+            n: (value: number) => string;
+            provide: (props: import("vuetify").LocaleOptions) => import("vuetify").LocaleInstance;
+        };
+        date: {
+            options: {
+                adapter: (new (options: {
+                    locale: any;
+                    formats?: any;
+                }) => import("vuetify").DateInstance) | import("vuetify").DateInstance;
+                formats?: Record<string, any> | undefined;
+                locale: Record<string, any>;
+            };
+            instance: {
+                locale?: any;
+                date: (value?: any) => unknown;
+                format: (date: unknown, formatString: string) => string;
+                toJsDate: (value: unknown) => Date;
+                parseISO: (date: string) => unknown;
+                toISO: (date: unknown) => string;
+                startOfDay: (date: unknown) => unknown;
+                endOfDay: (date: unknown) => unknown;
+                startOfWeek: (date: unknown) => unknown;
+                endOfWeek: (date: unknown) => unknown;
+                startOfMonth: (date: unknown) => unknown;
+                endOfMonth: (date: unknown) => unknown;
+                startOfYear: (date: unknown) => unknown;
+                endOfYear: (date: unknown) => unknown;
+                isAfter: (date: unknown, comparing: unknown) => boolean;
+                isAfterDay: (value: unknown, comparing: unknown) => boolean;
+                isSameDay: (date: unknown, comparing: unknown) => boolean;
+                isSameMonth: (date: unknown, comparing: unknown) => boolean;
+                isSameYear: (value: unknown, comparing: unknown) => boolean;
+                isBefore: (date: unknown, comparing: unknown) => boolean;
+                isEqual: (date: unknown, comparing: unknown) => boolean;
+                isValid: (date: any) => boolean;
+                isWithinRange: (date: unknown, range: [unknown, unknown]) => boolean;
+                addMinutes: (date: unknown, amount: number) => unknown;
+                addHours: (date: unknown, amount: number) => unknown;
+                addDays: (date: unknown, amount: number) => unknown;
+                addWeeks: (date: unknown, amount: number) => unknown;
+                addMonths: (date: unknown, amount: number) => unknown;
+                getYear: (date: unknown) => number;
+                setYear: (date: unknown, year: number) => unknown;
+                getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
+                getWeekArray: (date: unknown) => unknown[][];
+                getWeekdays: () => string[];
+                getMonth: (date: unknown) => number;
+                setMonth: (date: unknown, month: number) => unknown;
+                getDate: (date: unknown) => number;
+                setDate: (date: unknown, day: number) => unknown;
+                getNextMonth: (date: unknown) => unknown;
+                getPreviousMonth: (date: unknown) => unknown;
+                getHours: (date: unknown) => number;
+                setHours: (date: unknown, hours: number) => unknown;
+                getMinutes: (date: unknown) => number;
+                setMinutes: (date: unknown, minutes: number) => unknown;
+            };
+        };
+        goTo: {
+            rtl: import("vue").Ref<boolean>;
+            options: Record<string, any>;
+        };
+    };
+    /**
+     * @returns {import("vue-i18n").VueI18n}
      */
-    get vueI18n(): import("vue-i18n").IVueI18n;
+    get vueI18n(): import("vue-i18n").VueI18n<any, any, any, string, string, string, import("vue-i18n").Composer<any, any, any, string, string, string>>;
     /**
      * @returns {CategoryManager}
      */
@@ -295,7 +397,6 @@ declare class VcsUiApp extends VcsApp {
      */
     serializeModule(moduleId: string): VcsUiModuleConfig;
 }
-import { version } from '../package.json';
 import { VcsApp } from '@vcmap/core';
 import { VcsEvent } from '@vcmap/core';
 import { Collection } from '@vcmap/core';