@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/contentTree/contentTreeCollection.js

@@ -53,6 +53,24 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._weightListeners = new Map();
 
+    const uiConfigChanged = () => {
+      this.subTreeViewItems.value.forEach((subTree) => {
+        if (
+          !this._app.uiConfig.config.hideContentTree &&
+          !this._subTreeListeners.has(subTree.name)
+        ) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        } else if (this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.delete(subTree.name);
+        }
+      });
+    };
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -78,6 +96,8 @@ class ContentTreeCollection extends IndexedCollection {
         }
       }),
       this.moved.addEventListener(() => recreateTree(true)),
+      app.uiConfig.added.addEventListener(uiConfigChanged),
+      app.uiConfig.removed.addEventListener(uiConfigChanged),
     ];
     /**
      * This is the default content tree.
@@ -113,11 +133,19 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @private
+   * @param {Array<string>} exclude
    */
-  _clearSubTrees() {
-    this._subTreeViewItems.value.clear();
-    [...this._subTreeListeners.values()].forEach((cb) => {
-      cb();
+  _clearSubTrees(exclude = []) {
+    this._subTreeViewItems.value.forEach((tree, key) => {
+      if (!exclude.includes(key)) {
+        this._subTreeViewItems.value.delete(key);
+      }
+    });
+    this._subTreeListeners.forEach((cb, key) => {
+      if (!exclude.includes(key)) {
+        cb();
+        this._subTreeListeners.delete(key);
+      }
     });
   }
 
@@ -159,7 +187,6 @@ class ContentTreeCollection extends IndexedCollection {
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
-    this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);
       app.navbarManager.remove(id);
@@ -228,14 +255,21 @@ class ContentTreeCollection extends IndexedCollection {
       defaultSubTreeViewItem,
       ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
-
+    this._clearSubTrees(
+      subTrees.map((tree) => {
+        return tree.name;
+      }),
+    );
     subTrees.forEach((subTree) => {
       if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
-        this._subTreeListeners.get(subTree.name)?.();
-        this._subTreeListeners.set(
-          subTree.name,
-          this._createSubtreeActionButton(subTree),
-        );
+        this._subTreeViewItems.value.set(subTree.name, subTree);
+        if (!this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        }
       } else {
         const buttonComponent = this._app.navbarManager.get(subTree.name);
         if (buttonComponent.weight !== subTree[subTreeItemWeight]) {

package/src/contentTree/contentTreeItem.d.ts

@@ -1,7 +1,7 @@
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
+ * @type {ClassRegistry<typeof ContentTreeItem>}
  */
-export const contentTreeClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>;
+export const contentTreeClassRegistry: ClassRegistry<typeof ContentTreeItem>;
 export default ContentTreeItem;
 export type ContentTreeItemOptions = {
     type?: string | undefined;
@@ -272,11 +272,11 @@ declare class ContentTreeItem {
     /**
      * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
      */
-    set icon(icon: string | HTMLCanvasElement | HTMLImageElement | undefined);
+    set icon(icon: string | HTMLImageElement | HTMLCanvasElement | undefined);
     /**
      * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
      */
-    get icon(): string | HTMLCanvasElement | HTMLImageElement | undefined;
+    get icon(): string | HTMLImageElement | HTMLCanvasElement | undefined;
     /**
      * @param {number} weight
      */

package/src/contentTree/contentTreeItem.js

@@ -1,5 +1,5 @@
 import { ref, reactive, computed, shallowRef } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum, oneOf } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
 import { createLinkAction } from '../actions/actionHelper.js';
@@ -47,7 +47,7 @@ import { executeCallbacks } from '../callback/vcsCallback.js';
 const actionWeightSymbol = Symbol('ActionWeight');
 
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof ContentTreeItem>>}
+ * @type {ClassRegistry<typeof ContentTreeItem>}
  */
 export const contentTreeClassRegistry = new ClassRegistry();
 
@@ -258,7 +258,7 @@ class ContentTreeItem {
    * @param {StateActionState} state
    */
   set state(state) {
-    check(state, Object.values(StateActionState));
+    check(state, ofEnum(StateActionState));
 
     if (this._state.value !== state) {
       this._state.value = state;
@@ -277,7 +277,7 @@ class ContentTreeItem {
    * @param {string} url
    */
   set infoUrl(url) {
-    checkMaybe(url, String);
+    check(url, maybe(String));
 
     if (this._infoUrl !== url) {
       this._infoUrl = url;
@@ -309,7 +309,7 @@ class ContentTreeItem {
    * @param {string|undefined} title
    */
   set title(title) {
-    checkMaybe(title, String);
+    check(title, maybe(String));
 
     this._title.value = title;
   }
@@ -325,7 +325,7 @@ class ContentTreeItem {
    * @param {string|undefined} tooltip
    */
   set tooltip(tooltip) {
-    checkMaybe(tooltip, String);
+    check(tooltip, maybe(String));
 
     this._tooltip.value = tooltip;
   }
@@ -341,7 +341,7 @@ class ContentTreeItem {
    * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
    */
   set icon(icon) {
-    checkMaybe(icon, [String, HTMLElement]);
+    check(icon, maybe(oneOf(String, HTMLElement)));
 
     this._icon.value = icon;
   }
@@ -411,7 +411,7 @@ class ContentTreeItem {
    */
   addAction(action, weight = 11) {
     check(action.name, String);
-    checkMaybe(weight, Number);
+    check(weight, maybe(Number));
 
     const index = this._getActionIndex(action.name);
     if (index > -1) {

package/src/contentTree/layerContentTreeItem.d.ts

@@ -11,6 +11,14 @@
  * @param {string|import("@vcmap/core").Viewpoint=} viewpoint
  */
 export function setViewpointAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, viewpoint?: (string | import("@vcmap/core").Viewpoint) | undefined): void;
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<Function>} listeners
+ * @param {Array<string>} layerNames
+ * @param {Array<string>=} availableStyles
+ */
+export function setStyleAction(item: import("./contentTreeItem.js").default, app: import("@src/vcsUiApp.js").default, listeners: Array<Function>, layerNames: Array<string>, availableStyles?: Array<string> | undefined): void;
 /**
  * @param {import("@vcmap/core").Layer} layer
  * @returns {StateActionState}
@@ -51,11 +59,6 @@ declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContent
      * @private
      */
     private get _layer();
-    /**
-     * @param {Array<string>=} availableStyles
-     * @private
-     */
-    private _setStyleAction;
     /**
      * @private
      */

package/src/contentTree/layerContentTreeItem.js

@@ -43,6 +43,47 @@ export function setViewpointAction(item, app, viewpoint) {
   }
 }
 
+/**
+ * @param {import("./contentTreeItem.js").default} item
+ * @param {import("@src/vcsUiApp.js").default} app
+ * @param {Array<Function>} listeners
+ * @param {Array<string>} layerNames
+ * @param {Array<string>=} availableStyles
+ */
+export function setStyleAction(
+  item,
+  app,
+  listeners,
+  layerNames,
+  availableStyles,
+) {
+  const name = 'StyleSelector';
+  item.removeAction(name);
+  if (Array.isArray(availableStyles) && availableStyles.length > 0) {
+    const { action, destroy } = createModalAction(
+      {
+        name,
+        icon: '$vcsColorSwatch',
+        title: 'content.styleAction.title',
+      },
+      {
+        component,
+        position: {
+          width: 200,
+        },
+        props: reactive({
+          availableStyles: availableStyles.slice(),
+          layerNames: layerNames.slice(),
+        }),
+      },
+      app,
+      vcsAppSymbol,
+    );
+    item.addAction(action, 4);
+    listeners.push(destroy);
+  }
+}
+
 /**
  * @param {import("@vcmap/core").Layer} layer
  * @returns {StateActionState}
@@ -101,38 +142,6 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
     return this._app.layers.getByKey(this._layerName);
   }
 
-  /**
-   * @param {Array<string>=} availableStyles
-   * @private
-   */
-  _setStyleAction(availableStyles) {
-    const name = 'StyleSelector';
-    this.removeAction(name);
-    if (Array.isArray(availableStyles) && availableStyles.length > 0) {
-      const { action, destroy } = createModalAction(
-        {
-          name,
-          icon: '$vcsColorSwatch',
-          title: 'content.styleAction.title',
-        },
-        {
-          component,
-          position: {
-            width: 200,
-          },
-          props: reactive({
-            availableStyles: availableStyles.slice(),
-            layerName: this._layerName,
-          }),
-        },
-        this._app,
-        vcsAppSymbol,
-      );
-      this.addAction(action, 4);
-      this._listeners.push(destroy);
-    }
-  }
-
   /**
    * @private
    */
@@ -165,8 +174,13 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
    */
   _setProperties(properties) {
     super._setProperties(properties);
-
-    this._setStyleAction(properties.availableStyles);
+    setStyleAction(
+      this,
+      this._app,
+      this._listeners,
+      [this._layerName],
+      properties.availableStyles,
+    );
     setViewpointAction(this, this._app, properties.defaultViewpoint);
   }
 

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -2,6 +2,7 @@ export default LayerGroupContentTreeItem;
 export type LayerGroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerNames: string[];
     defaultViewpoint?: string;
+    availableStyles?: string[];
 };
 /**
  * A layer group. When clicked will try to activate all layers in the group or deactivate all layer in the group if all are active.
@@ -25,10 +26,15 @@ declare class LayerGroupContentTreeItem extends ContentTreeItem {
      */
     private _listeners;
     /**
-     * @type {string|null}
+     * @type {string|undefined}
      * @private
      */
     private _defaultViewpoint;
+    /**
+     * @type {string[]}
+     * @private
+     */
+    private _availableStyles;
     /**
      * @type {Array<import("@vcmap/core").Layer>}
      * @private

package/src/contentTree/layerGroupContentTreeItem.js

@@ -3,13 +3,14 @@ import ContentTreeItem, {
 } from './contentTreeItem.js';
 import {
   getStateFromLayer,
+  setStyleAction,
   setViewpointAction,
 } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string }} LayerGroupContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
@@ -69,10 +70,18 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this._listeners = [];
 
     /**
-     * @type {string|null}
+     * @type {string|undefined}
      * @private
      */
-    this._defaultViewpoint = options.defaultViewpoint || null;
+    this._defaultViewpoint = options.defaultViewpoint;
+
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this._availableStyles = Array.isArray(options.availableStyles)
+      ? options.availableStyles.slice()
+      : [];
 
     this._setup();
   }
@@ -116,6 +125,13 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
+    setStyleAction(
+      this,
+      this._app,
+      this._listeners,
+      this._layerNames,
+      this._availableStyles,
+    );
 
     this._listeners.push(
       this._app.layers.removed.addEventListener(resetHandler),
@@ -166,6 +182,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }
+    if (this._availableStyles.length > 0) {
+      config.availableStyles = this._availableStyles.slice();
+    }
     return config;
   }
 

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -151,7 +151,12 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
       if (this.state === StateActionState.INACTIVE) {
         this.state = StateActionState.LOADING;
         await map.setCollection(this._collection, vp);
-        executeCallbacks(this._app, this._onActivate);
+        if (map.collection === this._collection) {
+          executeCallbacks(this._app, this._onActivate);
+        } else {
+          // failed to activate collection
+          this.state = StateActionState.INACTIVE;
+        }
       } else if (this.state === StateActionState.ACTIVE) {
         this.state = StateActionState.INACTIVE;
         await map.setCollection(defaultCollection, vp);

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="address-balloon-component">
     <template #default="{ attrs }">
       <v-list-item
         lines="two"

package/src/featureInfo/BalloonComponent.vue

@@ -1,24 +1,32 @@
 <template>
-  <v-card class="mx-auto elevation-0" v-if="position">
+  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
-      <v-list-item class="px-2 align-center">
-        <template #prepend>
-          <v-icon color="primary" size="16" class="mr-2"> $vcsInfo </v-icon>
+      <v-list-item class="px-1">
+        <template #prepend="prependScope">
+          <slot name="prepend" v-bind="prependScope">
+            <div class="pl-1 pr-2">
+              <v-icon color="primary" :size="iconSize"> $vcsInfo </v-icon>
+            </div>
+          </slot>
+        </template>
+        <slot name="balloon-title" :attrs="{ ...$props, ...$attrs }">
+          <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>
+        </slot>
+        <template #append>
+          <VcsButton
+            @click.stop="close"
+            icon="mdi-close-thick"
+            tooltip="components.close"
+            class="px-1"
+          />
         </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"
-          tooltip="components.close"
-          class="d-flex"
-        />
       </v-list-item>
     </slot>
 
@@ -69,6 +77,7 @@
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
+  import { useIconSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description A balloon viewing feature attributes. Size dynamic dependent on number of attributes.
@@ -80,7 +89,9 @@
    * @vue-prop {Object} tags - optional object containing keys rendered as tags
    * @vue-prop {Array<import("ol/coordinate").Coordinate>} position - clicked position balloon is rendered at
    * @vue-data {slot} [#balloon-header] - slot to override balloon header, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#balloon-title] - slot to override balloon title and subtitle, $props and $attrs are passed to `attrs`. Is overwritten by balloon-header slot.
    * @vue-data {slot} [#default] - slot to override balloon content, $props and $attrs are passed to `attrs`
+   * @vue-data {slot} [#prepend] - slot to override balloon header icon
    */
   export default {
     name: 'BalloonComponent',
@@ -182,8 +193,9 @@
         app.windowManager.remove(attrs['window-state'].id);
         destroyListener();
       };
-
+      const iconSize = useIconSize();
       return {
+        iconSize,
         close,
         getTag,
         getTagOptions,
@@ -194,8 +206,6 @@
 </script>
 
 <style lang="scss">
-  @import '../styles/shades.scss';
-
   .balloon {
     z-index: 0 !important;
   }
@@ -213,11 +223,8 @@
     width: 0;
     filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
-  .theme--light .balloon:after {
-    border-color: map-get($shades, 'white') transparent;
-  }
-  .theme--dark .balloon:after {
-    border-color: map-get($shades, 'black') transparent;
+  .balloon:after {
+    border-color: rgb(var(--v-theme-surface-light)) transparent;
   }
   .balloon .v-list-item .v-list-item__title,
   .balloon .v-list-item .v-list-item__subtitle {

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

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
 }, {
+    iconSize: import("vue").ComputedRef<number>;
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;

package/src/featureInfo/IframeComponent.vue

@@ -1,5 +1,10 @@
 <template>
-  <iframe :src="src" :title="title" :style="{ height, width }" />
+  <iframe
+    :src="src"
+    :title="title"
+    :style="{ height, width }"
+    class="iframe-component"
+  />
 </template>
 <script>
   import { inject } from 'vue';

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,10 +1,11 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
-    <div class="pa-2" v-html="html" />
+  <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
+    <VcsMarkdown :content="content" />
   </BalloonComponent>
 </template>
 <script>
   import BalloonComponent from './BalloonComponent.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
    * @description A balloon showing markdown content
@@ -12,12 +13,13 @@
   export default {
     name: 'MarkdownBalloonComponent',
     props: {
-      html: {
+      content: {
         type: String,
         required: true,
       },
     },
     components: {
+      VcsMarkdown,
       BalloonComponent,
     },
   };

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

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };
 }, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    html: {
+    content: {
         type: StringConstructor;
         required: true;
     };

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -75,6 +75,15 @@ export function applyAttributeFilter(attributes: {
 export function applyOlcsAttributeFilter(attributes: {
     [x: string]: unknown;
 }, keys?: Array<string>): Object;
+/**
+ * Filters all __ attributes (from vc-converter tilesets) not provided as keys
+ * @param {Object<string, unknown>} attributes
+ * @param {Array<string>} keys
+ * @returns {Object}
+ */
+export function applyDoubleUnderscoreFilter(attributes: {
+    [x: string]: unknown;
+}, keys?: Array<string>): Object;
 /**
  * Filters attributes having an empty object as value
  * @param {Object<string, unknown>} attributes
@@ -103,7 +112,7 @@ export type FeatureInfoViewOptions = import("@vcmap/core").VcsObjectOptions & {
     keyMapping?: Record<string, string>;
     valueMapping?: Record<string, string | Record<string, string>>;
     tags?: Record<string, HTMLTagOptions>;
-    window?: import("../manager/window/windowManager.js").WindowComponentOptions;
+    window?: Pick<import("../manager/window/windowManager.js").WindowComponentOptions, 'state' | 'slot' | 'position'>;
 };
 /**
  * Abstract class to be extended by FeatureInfoView classes
@@ -145,7 +154,7 @@ declare class AbstractFeatureInfoView extends VcsObject {
         [x: string]: HTMLTagOptions;
     };
     /**
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions,'state'|'slot'|'position'>|Object}
      * @private
      */
     private _window;
@@ -156,14 +165,20 @@ declare class AbstractFeatureInfoView extends VcsObject {
     private _component;
     /**
      * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
-     * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
+     * @type {Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>,'state'|'slot'|'position'>|Object}
      */
-    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions<Object>;
+    get window(): Object | Pick<import("../manager/window/windowManager.js").WindowComponentOptions<FeatureInfoProps>, "slot" | "state" | "position">;
     /**
      * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
      * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
      */
     get component(): import("vue").Component<FeatureInfoProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
+    /**
+     * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+     * @returns {Object}
+     * @protected
+     */
+    protected _getAttributesFromFeature(feature: undefined | import("ol").Feature | import("@vcmap-cesium/engine").Cesium3DTileFeature | import("@vcmap-cesium/engine").Cesium3DTilePointFeature): Object;
     /**
      * This method returns all relevant attributes for this view.
      * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.