@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/contentTree/contentTreeCollection.js

@@ -316,21 +316,19 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @param {string} id
-   * @returns {import("vue").Ref<Array<string>>}
+   * @returns {Array<string>}
    */
-  getTreeOpenStateRef(id) {
+  getTreeOpenState(id) {
     const subTree = this._getSubTree(id);
     if (subTree) {
       if (!subTree[subTreeOpenStateSymbol]) {
-        subTree[subTreeOpenStateSymbol] = ref(
-          this.getChildrenForSubTree(id)
-            .filter((i) => i.initOpen)
-            .map((i) => i.name),
-        );
+        subTree[subTreeOpenStateSymbol] = this.getChildrenForSubTree(id)
+          .filter((i) => i.initOpen)
+          .map((i) => i.name);
       }
       return subTree[subTreeOpenStateSymbol];
     }
-    return ref([]);
+    return [];
   }
 
   destroy() {

package/src/contentTree/contentTreeItem.d.ts

@@ -81,7 +81,7 @@ export type TreeViewItem = {
     /**
      * - computed property
      */
-    visibleChildren: Array<TreeViewItem>;
+    visibleChildren?: TreeViewItem[] | undefined;
     /**
      * - A callback called once the item is clicked.
      */
@@ -108,7 +108,7 @@ declare class ContentTreeItem {
      */
     protected _app: import("@src/vcsUiApp.js").default;
     /**
-     * @type {import("vue").Ref<Array<import("../actions/actionHelper.js").VcsAction>>}
+     * @type {import("vue").ShallowRef<Array<import("../actions/actionHelper.js").VcsAction>>}
      * @private
      */
     private _actions;
@@ -154,7 +154,7 @@ declare class ContentTreeItem {
     /**
      * @param {string} url
      */
-    set infoUrl(arg: string | null);
+    set infoUrl(url: string | null);
     /**
      * @type {string|null}
      */
@@ -224,7 +224,7 @@ declare class ContentTreeItem {
     /**
      * @param {boolean} visible
      */
-    set visible(arg: boolean);
+    set visible(visible: boolean);
     /**
      * @type {boolean}
      */
@@ -232,7 +232,7 @@ declare class ContentTreeItem {
     /**
      * @param {boolean} clickable
      */
-    set clickable(arg: boolean);
+    set clickable(clickable: boolean);
     /**
      * @type {boolean}
      */
@@ -240,7 +240,7 @@ declare class ContentTreeItem {
     /**
      * @param {boolean} disabled
      */
-    set disabled(arg: boolean);
+    set disabled(disabled: boolean);
     /**
      * @type {boolean}
      */
@@ -248,7 +248,7 @@ declare class ContentTreeItem {
     /**
      * @param {StateActionState} state
      */
-    set state(arg: number);
+    set state(state: number);
     /**
      * @type {StateActionState}
      */
@@ -256,7 +256,7 @@ declare class ContentTreeItem {
     /**
      * @param {string|undefined} title
      */
-    set title(arg: string | undefined);
+    set title(title: string | undefined);
     /**
      * @type {string|undefined}
      */
@@ -264,7 +264,7 @@ declare class ContentTreeItem {
     /**
      * @param {string|undefined} tooltip
      */
-    set tooltip(arg: string | undefined);
+    set tooltip(tooltip: string | undefined);
     /**
      * @type {string|undefined}
      */
@@ -272,7 +272,7 @@ declare class ContentTreeItem {
     /**
      * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
      */
-    set icon(arg: string | HTMLCanvasElement | HTMLImageElement | undefined);
+    set icon(icon: string | HTMLCanvasElement | HTMLImageElement | undefined);
     /**
      * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
      */
@@ -280,7 +280,7 @@ declare class ContentTreeItem {
     /**
      * @param {number} weight
      */
-    set weight(arg: number);
+    set weight(weight: number);
     /**
      * @type {number}
      */

package/src/contentTree/contentTreeItem.js

@@ -1,4 +1,4 @@
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, shallowRef } from 'vue';
 import { check, checkMaybe } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
@@ -37,7 +37,7 @@ import { executeCallbacks } from '../callback/vcsCallback.js';
  * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be an URL or HTMLElement.
  * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions
  * @property {Array<TreeViewItem>} children
- * @property {Array<TreeViewItem>} visibleChildren - computed property
+ * @property {Array<TreeViewItem>} [visibleChildren] - computed property
  * @property {function(PointerEvent):Promise<void>} clicked - A callback called once the item is clicked.
  */
 
@@ -75,10 +75,10 @@ class ContentTreeItem {
     this._app = app;
 
     /**
-     * @type {import("vue").Ref<Array<import("../actions/actionHelper.js").VcsAction>>}
+     * @type {import("vue").ShallowRef<Array<import("../actions/actionHelper.js").VcsAction>>}
      * @private
      */
-    this._actions = ref([]);
+    this._actions = shallowRef([]);
 
     /**
      * @type {string}
@@ -463,9 +463,10 @@ class ContentTreeItem {
       icon: this._icon,
       actions: this._actions,
       children: this._children,
-      visibleChildren: computed(() =>
-        this._children.value.filter((c) => c.visible),
-      ),
+      visibleChildren: computed(() => {
+        const visibleChildren = this._children.value.filter((c) => c.visible);
+        return visibleChildren.length > 0 ? visibleChildren : undefined;
+      }),
       clicked,
     });
   }

package/src/contentTree/flightContentTreeItem.js

@@ -1,4 +1,5 @@
 import { CesiumMap } from '@vcmap/core';
+import { reactive } from 'vue';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
@@ -71,16 +72,16 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
     /** @type {import("@vcmap/core").FlightPlayer|undefined} */
     let player;
 
-    const stopAction = {
+    const stopAction = reactive({
       name: 'stop',
       icon: 'mdi-square',
       title: 'flight.stopTooltip',
       callback: () => {
         player?.stop();
       },
-    };
+    });
 
-    const playAction = {
+    const playAction = reactive({
       name: 'play',
       icon: 'mdi-play',
       title: 'flight.playTooltip',
@@ -125,7 +126,7 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
           }
         }
       },
-    };
+    });
 
     this.addAction(playAction, 12);
 

package/src/contentTree/viewpointContentTreeItem.d.ts

@@ -29,7 +29,7 @@ declare class ViewpointContentTreeItem extends VcsObjectContentTreeItem<import("
     /**
      * @returns {import("@vcmap/core").Viewpoint}
      */
-    get viewpoint(): import("@vcmap/core/dist/src/util/viewpoint.js").default;
+    get viewpoint(): import("@vcmap/core").Viewpoint;
     /**
      * @private
      */

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,28 +1,30 @@
 <template>
   <BalloonComponent v-bind="{ ...$attrs }">
     <template #default="{ attrs }">
-      <v-list-item two-line v-if="Object.values(attrs.attributes).length > 0">
-        <v-list-item-avatar tile size="40">
+      <v-list-item
+        lines="two"
+        v-if="Object.values(attrs.attributes).length > 0"
+      >
+        <template #prepend>
           <v-icon size="20"> $vcsHomePoint </v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title v-if="attrs.attributes.addressName">
-            {{ attrs.attributes.addressName }}
-          </v-list-item-title>
-          <v-list-item-title v-else>
-            {{ attrs.attributes.street }} {{ attrs.attributes.number }}
-          </v-list-item-title>
-          <v-list-item-subtitle v-if="attrs.attributes.name">
-            {{ attrs.attributes.street }} {{ attrs.attributes.number }}
-          </v-list-item-subtitle>
-          <v-list-item-subtitle
-            >{{ attrs.attributes.zip }}
-            {{ attrs.attributes.city }}</v-list-item-subtitle
-          >
-          <v-list-item-subtitle>{{
-            attrs.attributes.country
-          }}</v-list-item-subtitle>
-        </v-list-item-content>
+        </template>
+
+        <v-list-item-title v-if="attrs.attributes.addressName">
+          {{ attrs.attributes.addressName }}
+        </v-list-item-title>
+        <v-list-item-title v-else>
+          {{ attrs.attributes.street }} {{ attrs.attributes.number }}
+        </v-list-item-title>
+        <v-list-item-subtitle v-if="attrs.attributes.name">
+          {{ attrs.attributes.street }} {{ attrs.attributes.number }}
+        </v-list-item-subtitle>
+        <v-list-item-subtitle
+          >{{ attrs.attributes.zip }}
+          {{ attrs.attributes.city }}</v-list-item-subtitle
+        >
+        <v-list-item-subtitle>{{
+          attrs.attributes.country
+        }}</v-list-item-subtitle>
       </v-list-item>
     </template>
   </BalloonComponent>
@@ -31,11 +33,9 @@
   import {
     VIcon,
     VListItem,
-    VListItemAvatar,
-    VListItemContent,
     VListItemSubtitle,
     VListItemTitle,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import BalloonComponent from './BalloonComponent.vue';
 
   /**
@@ -46,9 +46,7 @@
     components: {
       BalloonComponent,
       VListItem,
-      VListItemAvatar,
       VIcon,
-      VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
     },

package/src/featureInfo/AddressBalloonComponent.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/featureInfo/BalloonComponent.vue

@@ -2,19 +2,17 @@
   <v-card class="mx-auto elevation-0" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-2 align-center">
-        <v-list-item-avatar tile size="16" class="mr-2">
-          <v-icon color="primary"> $vcsInfo </v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content class="pr-1">
-          <v-list-item-title>
-            <h3 class="font-weight-bold">
-              {{ $t(balloonTitle) }}
-            </h3>
-          </v-list-item-title>
-          <v-list-item-subtitle v-if="balloonSubtitle">
-            {{ $t(balloonSubtitle) }}
-          </v-list-item-subtitle>
-        </v-list-item-content>
+        <template #prepend>
+          <v-icon color="primary" size="16" class="mr-2"> $vcsInfo </v-icon>
+        </template>
+        <v-list-item-title>
+          <h3 class="font-weight-bold">
+            {{ $st(balloonTitle) }}
+          </h3>
+        </v-list-item-title>
+        <v-list-item-subtitle v-if="balloonSubtitle">
+          {{ $st(balloonSubtitle) }}
+        </v-list-item-subtitle>
         <VcsButton
           @click.stop="close"
           icon="mdi-close-thick"
@@ -38,17 +36,15 @@
           color="transparent"
         >
           <v-list-item class="px-2">
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t(key) }}
-              </v-list-item-title>
-              <v-list-item-subtitle
-                :tag="getTag(tags, key)"
-                v-bind="getTagOptions(tags, key)"
-              >
-                {{ typeof value === 'string' ? $t(value) : value }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
+            <v-list-item-title>
+              {{ $st(key) }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              :tag="getTag(tags, key)"
+              v-bind="getTagOptions(tags, key)"
+            >
+              {{ typeof value === 'string' ? $st(value) : value }}
+            </v-list-item-subtitle>
           </v-list-item>
         </v-list>
       </slot>
@@ -63,11 +59,9 @@
     VIcon,
     VList,
     VListItem,
-    VListItemAvatar,
-    VListItemContent,
     VListItemSubtitle,
     VListItemTitle,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import {
     getTargetSize,
     posToNumber,
@@ -95,9 +89,7 @@
       VCard,
       VList,
       VListItem,
-      VListItemAvatar,
       VIcon,
-      VListItemContent,
       VListItemTitle,
       VListItemSubtitle,
       VDivider,

package/src/featureInfo/BalloonComponent.vue.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
     maxHeight: import("vue").Ref<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<{
     featureId: {
         type: StringConstructor;
         required: true;
@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     position: unknown[];
     tags: Record<string, any>;
-}>;
+}, {}>;
 export default _default;
 import { getTag } from '../components/tables/VcsTable.vue';
 import { getTagOptions } from '../components/tables/VcsTable.vue';

package/src/featureInfo/IframeComponent.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     height: any;
     width: any;
-}, {}, {}, {}, 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<{
     src: {
         type: StringConstructor;
         required: true;
@@ -21,5 +21,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     title: string;
-}>;
+}, {}>;
 export default _default;

package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts

@@ -3,10 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     html: {
         type: StringConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/featureInfo/MarkdownComponent.vue

@@ -0,0 +1,16 @@
+<script setup>
+  defineOptions({});
+
+  defineProps({
+    html: {
+      type: String,
+      required: true,
+    },
+  });
+</script>
+
+<template>
+  <div class="pa-2" v-html="html" />
+</template>
+
+<style scoped lang="scss"></style>

package/src/featureInfo/MarkdownComponent.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    html: string;
+    $props: {
+        readonly html?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -117,9 +117,9 @@ declare class AbstractFeatureInfoView extends VcsObject {
     static getDefaultOptions(): FeatureInfoViewOptions;
     /**
      * @param {FeatureInfoViewOptions} options
-     * @param {import("vue").Component} component
+     * @param {import("vue").Component<FeatureInfoProps, unknown, unknown>} component
      */
-    constructor(options: FeatureInfoViewOptions, component: import("vue").Component);
+    constructor(options: FeatureInfoViewOptions, component: import("vue").Component<FeatureInfoProps, unknown, unknown>);
     /**
      * @type {string[]}
      */
@@ -158,12 +158,12 @@ declare class AbstractFeatureInfoView extends VcsObject {
      * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
      * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
      */
-    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions;
+    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions<Object>;
     /**
      * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
-     * @type {import("vue").Component|undefined}
+     * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
      */
-    get component(): import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    get component(): import("vue").Component<FeatureInfoProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
     /**
      * This method returns all relevant attributes for this view.
      * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.

package/src/featureInfo/abstractFeatureInfoView.js

@@ -294,7 +294,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * @param {FeatureInfoViewOptions} options
-   * @param {import("vue").Component} component
+   * @param {import("vue").Component<FeatureInfoProps, unknown, unknown>} component
    */
   constructor(options, component) {
     super(options);
@@ -337,7 +337,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
-   * @type {import("vue").Component|undefined}
+   * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
    */
   get component() {
     return this._component;

package/src/featureInfo/balloonFeatureInfoView.d.ts

@@ -24,9 +24,9 @@ export type BalloonFeatureInfoViewProps = import("./abstractFeatureInfoView.js")
 declare class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @param {BalloonFeatureInfoViewOptions} options
-     * @param {import("vue").Component} [component=BalloonComponent]
+     * @param {import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown>} [component=BalloonComponent]
      */
-    constructor(options: BalloonFeatureInfoViewOptions, component?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined);
+    constructor(options: BalloonFeatureInfoViewOptions, component?: import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined);
     /**
      * @type {string}
      */

package/src/featureInfo/balloonFeatureInfoView.js

@@ -81,7 +81,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
 
   /**
    * @param {BalloonFeatureInfoViewOptions} options
-   * @param {import("vue").Component} [component=BalloonComponent]
+   * @param {import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown>} [component=BalloonComponent]
    */
   constructor(options, component) {
     super(options, component || BalloonComponent);

package/src/featureInfo/featureInfo.js

@@ -417,7 +417,7 @@ class FeatureInfo extends Collection {
             feature,
             layer,
             this._app.uiConfig.config.value.primaryColor ??
-              getDefaultPrimaryColor(),
+              getDefaultPrimaryColor(this._app),
           ),
         });
         this._clearHighlightingCb = () =>
@@ -429,7 +429,7 @@ class FeatureInfo extends Collection {
             feature,
             layer,
             this._app.uiConfig.config.value.primaryColor ??
-              getDefaultPrimaryColor(),
+              getDefaultPrimaryColor(this._app),
           ),
         });
         this._clearHighlightingCb = () =>

package/src/featureInfo/markdownFeatureInfoView.js

@@ -3,21 +3,7 @@ import {
   parseAndSanitizeMarkdown,
   replaceAttributes,
 } from '../application/markdownHelper.js';
-
-/**
- * @description A component to render markdown html
- * @vue-prop {string} html - the html to render
- */
-const MarkdownComponent = {
-  name: 'MarkdownComponent',
-  props: {
-    html: {
-      type: String,
-      required: true,
-    },
-  },
-  template: '<div class="pa-2" v-html="html" />',
-};
+import MarkdownComponent from './MarkdownComponent.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions