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

package/src/manager/collectionManager/collectionComponentClass.js

@@ -1,15 +1,14 @@
 import { IndexedCollection, isOverrideCollection } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 import { v4 as uuidv4 } from 'uuid';
-import { computed, ref, shallowRef, watch } from 'vue';
+import { computed, reactive, ref, shallowRef, watch } from 'vue';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
 import { sortByWeight } from '../buttonManager.js';
 import {
   createListItemBulkAction,
   createListItemDeleteAction,
-  createListItemRenameAction,
 } from '../../actions/listActions.js';
 import { sortByOwner } from '../navbarManager.js';
 
@@ -37,7 +36,7 @@ import { sortByOwner } from '../navbarManager.js';
  */
 
 /**
- * @typedef {import("../../components/lists/VcsList.vue").VcsListItem & {
+ * @typedef {import("../../components/lists/VcsListItemComponent.vue").VcsListItem & {
  *   actions: Array<import("../../actions/actionHelper.js").VcsAction & { weight?: number }>,
  *   clickedCallbacks: Array<function(PointerEvent):void>,
  *   destroy: function():void|undefined
@@ -56,7 +55,7 @@ function destroyListItem(listItem) {
 /**
  * Renames the title of an item for VcsObject based items.
  * @param {import("@vcmap/core").VcsObject} item
- * @param {import("../../components/lists/VcsList").VcsListItem} listItem
+ * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} listItem
  * @param {string} newTitle
  */
 function titleChanged(item, listItem, newTitle) {
@@ -77,12 +76,16 @@ export function createSupportedMapMappingFunction(
   supportedMaps,
   mapCollection,
 ) {
-  check(supportedMaps, [[String], Function]);
+  check(supportedMaps, oneOf([String], Function));
 
   return (item, _c, listItem) => {
     const mapNames =
       typeof supportedMaps === 'function' ? supportedMaps(item) : supportedMaps;
-    listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
+    if (mapCollection.activeMap) {
+      listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
+    } else {
+      listItem.disabled = true;
+    }
     listItem.destroyFunctions.push(
       mapCollection.mapActivated.addEventListener((map) => {
         listItem.disabled = !mapNames.includes(map.className);
@@ -96,7 +99,7 @@ export function createSupportedMapMappingFunction(
  * Listens to all collection events and synchronizes changes to the items array.
  * The Collection Items will be transformed and filtered with the given itemMappings and itemFilter functions
  * @class
- * @template {Object|import("@vcmap/core").VcsObject} T
+ * @template {Object|import("@vcmap/core").VcsObject} [T=Object|import("@vcmap/core").VcsObject]
  */
 class CollectionComponentClass {
   /**
@@ -342,7 +345,7 @@ class CollectionComponentClass {
    */
   _transformItem(item) {
     const keyProperty = this._collection.uniqueKey;
-    const listItem = {
+    const listItem = reactive({
       get name() {
         return item[keyProperty];
       },
@@ -357,13 +360,11 @@ class CollectionComponentClass {
       clickedCallbacks: [],
       destroy: undefined,
       destroyFunctions: [],
-    };
+    });
     if (this.renamable.value) {
-      listItem.actions.push(
-        createListItemRenameAction(listItem, {
-          name: this._actionTitles.renameTitle,
-        }),
-      );
+      listItem.renamable = {
+        name: this._actionTitles.renameTitle,
+      };
       listItem.titleChanged = (newTitle) =>
         titleChanged(item, listItem, newTitle);
     }

package/src/manager/collectionManager/collectionManager.d.ts

@@ -18,7 +18,7 @@ export type OwnedAction = {
     weight?: number | undefined;
     owner: string | symbol;
 };
-export type ICollectionManager = import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass<any>, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
+export type ICollectionManager = import("../../vcsUiApp.js").VcsComponentManager<CollectionComponentClass, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
 /**
  * @typedef {function(T, import("./collectionComponentClass.js").default<T>, import("./collectionComponentClass.js").CollectionComponentListItem): void} MappingFunction
  * @template {Object} T

package/src/manager/collectionManager/collectionManager.js

@@ -1,6 +1,6 @@
 import { VcsEvent, Collection } from '@vcmap/core';
 import { reactive } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { validateActions } from '../../components/lists/VcsActionList.vue';
 import CollectionComponentClass from './collectionComponentClass.js';
 
@@ -133,7 +133,7 @@ class CollectionManager {
    */
   add(collectionComponentOptions, owner) {
     check(collectionComponentOptions, { collection: Collection });
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     if (
       collectionComponentOptions.id &&
@@ -220,9 +220,9 @@ class CollectionManager {
     owner,
     collectionComponentIds = [],
   ) {
-    checkMaybe(predicate, Function);
+    check(predicate, maybe(Function));
     check(mappingFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     /** @type {ItemMapping} */
@@ -260,7 +260,7 @@ class CollectionManager {
    */
   removeMappingFunction(mappingFunction, owner) {
     check(mappingFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       collectionComponent.removeItemMapping({ mappingFunction, owner });
@@ -279,7 +279,7 @@ class CollectionManager {
    */
   addFilterFunction(filterFunction, owner, collectionComponentIds = []) {
     check(filterFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     /** @type {ItemFilter} */
@@ -316,7 +316,7 @@ class CollectionManager {
    */
   removeFilterFunction(filterFunction, owner) {
     check(filterFunction, Function);
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       collectionComponent.removeItemFilter({ filterFunction, owner });
@@ -334,7 +334,7 @@ class CollectionManager {
    * @param {Array<string>} [collectionComponentIds] list of collectionComponents this mappingFunction should be used on. If empty, actions are applied to all managed collectionComponents.
    */
   addActions(actions, owner, collectionComponentIds = []) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
     check(collectionComponentIds, [String]);
 
     if (!validateActions(actions)) {
@@ -367,7 +367,7 @@ class CollectionManager {
    * @param {string | symbol} owner
    */
   removeActions(actions, owner) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     const idx = this._itemActions.findIndex((a) => a.actions === actions);
     if (idx > -1) {
@@ -386,7 +386,7 @@ class CollectionManager {
    * @param {string | symbol} owner
    */
   removeOwner(owner) {
-    check(owner, [String, Symbol]);
+    check(owner, oneOf(String, Symbol));
 
     [...this._collectionComponents.values()].forEach((collectionComponent) => {
       if (collectionComponent.owner === owner) {

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -1,8 +1,9 @@
 import { nextTick, reactive, watch } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { WindowSlot } from '../window/windowManager.js';
 import CollectionComponentClass from './collectionComponentClass.js';
 import { createListEditAction } from '../../actions/listActions.js';
+import { categoryManagerWindowId } from '../../application/VcsApp.vue';
 
 /**
  * @typedef {Omit<import("../window/windowManager.js").WindowComponentOptions,"id"|"parentId"|"slot">} EditorWindowComponentOptions
@@ -62,12 +63,12 @@ export function makeEditorCollectionComponentClass(
   app,
   collectionComponent,
   editingOptions,
-  parentId = 'category-manager',
+  parentId = categoryManagerWindowId,
 ) {
   check(collectionComponent, CollectionComponentClass);
-  check(editingOptions.editor, [Object, Function]);
-  checkMaybe(editingOptions.multiEditor, Object);
-  checkMaybe(editingOptions.predicate, Function);
+  check(editingOptions.editor, oneOf(Object, Function));
+  check(editingOptions.multiEditor, maybe(Object));
+  check(editingOptions.predicate, maybe(Function));
 
   const editorCollectionComponent =
     /** @type {EditorCollectionComponentClass} */ collectionComponent;
@@ -217,9 +218,11 @@ export function makeEditorCollectionComponentClass(
   );
 
   const itemRemovedListener =
-    editorCollectionComponent.collection.removed.addEventListener(
-      closeEditorWindow,
-    );
+    editorCollectionComponent.collection.removed.addEventListener((item) => {
+      if (predicate(item)) {
+        closeEditorWindow(item);
+      }
+    });
 
   editorCollectionComponent.addItemMapping({
     predicate,

package/src/manager/contextMenu/ContextMenuComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click.stop="close">
+  <div @click.stop="close" class="context-menu-component">
     <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>

package/src/manager/contextMenu/contextMenuManager.js

@@ -1,6 +1,6 @@
 import { CesiumMap, BaseOLMap, VcsEvent } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import ContextMenuInteraction from './contextMenuInteraction.js';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import { validateAction } from '../../components/lists/VcsActionList.vue';
@@ -176,7 +176,7 @@ class ContextMenuManager {
    */
   addEventHandler(handler, owner) {
     check(handler, Function);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     this._ensureInteraction();
     this._eventHandlers.push({ owner, handler });

package/src/manager/navbarManager.js

@@ -1,4 +1,4 @@
-import { check } from '@vcsuite/check';
+import { check, ofEnum } from '@vcsuite/check';
 import ButtonManager, { sortByWeight } from './buttonManager.js';
 import { vcsAppSymbol } from '../pluginHelper.js';
 
@@ -89,7 +89,7 @@ class NavbarManager extends ButtonManager {
    * @returns {import("./buttonManager.js").ButtonComponent}
    */
   add(buttonComponentOptions, owner, location) {
-    check(location, Object.values(ButtonLocation));
+    check(location, ofEnum(ButtonLocation));
     const buttonComponent = super.add(buttonComponentOptions, owner);
     buttonComponent[locationSymbol] = location;
     return buttonComponent;

package/src/manager/panel/PanelComponent.vue

@@ -18,20 +18,13 @@
 </template>
 
 <style scoped lang="scss">
-  @import '../../styles/shades.scss';
-
   .panel-component {
     padding: 0 4px;
   }
-  .panel-component.theme--dark::after {
-    content: '';
-    position: absolute;
-    background: map-get($shades, 'black');
-  }
-  .panel-component.theme--light::after {
+  .panel-component::after {
     content: '';
     position: absolute;
-    background: map-get($shades, 'white');
+    background: rgb(var(--v-theme-surface-light));
   }
 
   .panel-component-left::after {

package/src/manager/panel/PanelManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vcs-panel-frame"
+    class="vcs-panel-frame panel-manager-component"
     @mouseup="setResizing(undefined)"
     @mouseleave="setResizing(undefined)"
     ref="panelFrameRef"
@@ -85,7 +85,7 @@
    * @description PanelManager rendering all Panels
    */
   export default {
-    name: 'VcsPanelManager',
+    name: 'VcsPanelManagerComponent',
     components: {
       VcsMainMap,
       PanelComponent,
@@ -143,17 +143,21 @@
               ((panelFrameRef.value.offsetTop + e.y) /
                 panelFrameRef.value.parentElement.offsetHeight) *
               100;
-            setPanelPosition(panel, { height: `${Math.round(100 - height)}%` });
+            setPanelPosition(panelManager, panel, {
+              height: `${Math.round(100 - height)}%`,
+            });
           } else {
             const width =
               ((panelFrameRef.value.offsetLeft + e.x) /
                 panelFrameRef.value.parentElement.offsetWidth) *
               100;
             if (panel[panelLocationSymbol] === PanelLocation.LEFT) {
-              setPanelPosition(panel, { width: `${width}%` });
+              setPanelPosition(panelManager, panel, { width: `${width}%` });
               resizeKey = 'left';
             } else if (panel[panelLocationSymbol] === PanelLocation.RIGHT) {
-              setPanelPosition(panel, { width: `${Math.round(100 - width)}%` });
+              setPanelPosition(panelManager, panel, {
+                width: `${Math.round(100 - width)}%`,
+              });
               resizeKey = 'right';
             }
           }

package/src/manager/panel/panelHelper.js

@@ -239,7 +239,7 @@ export function updatePanelSizes(
       },
       targetSize,
     );
-    setPanelPosition(leftPanel, updatedLeft);
+    setPanelPosition(panelManager, leftPanel, updatedLeft);
   }
   if (panelManager.hasLocation(PanelLocation.RIGHT) && resizeKey !== 'left') {
     const updatedRight = handleSidePanel(
@@ -252,7 +252,7 @@ export function updatePanelSizes(
       },
       targetSize,
     );
-    setPanelPosition(rightPanel, updatedRight);
+    setPanelPosition(panelManager, rightPanel, updatedRight);
   }
 
   const main = percentageFromPanelOptions(
@@ -267,6 +267,6 @@ export function updatePanelSizes(
     return acc;
   }, {});
   if (Object.keys(toUpdate).length > 0) {
-    setPanelPosition(mainPanel, toUpdate);
+    setPanelPosition(panelManager, mainPanel, toUpdate);
   }
 }

package/src/manager/panel/panelManager.d.ts

@@ -30,10 +30,11 @@
  */
 export function getPanelPosition(panelComponent: Partial<PanelComponent>): PanelPosition | undefined;
 /**
+ * @param {PanelManager} panelManager
  * @param {PanelComponent} panelComponent
  * @param {Partial<PanelPosition>} panelPosition
  */
-export function setPanelPosition(panelComponent: PanelComponent, panelPosition: Partial<PanelPosition>): void;
+export function setPanelPosition(panelManager: PanelManager, panelComponent: PanelComponent, panelPosition: Partial<PanelPosition>): void;
 export const panelLocationSymbol: unique symbol;
 export const panelPositionSymbol: unique symbol;
 /**
@@ -249,6 +250,13 @@ declare class PanelManager implements IPanelManager {
      * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
      */
     removed: import("@vcmap/core").VcsEvent<PanelComponent>;
+    /**
+     * @type {import("@vcmap/core").VcsEvent<{panelId: string, panelPosition: PanelPosition}>}
+     */
+    positionChanged: import("@vcmap/core").VcsEvent<{
+        panelId: string;
+        panelPosition: PanelPosition;
+    }>;
     /**
      * reactive ordered array of ids,
      * @type {import("vue").UnwrapRef<string[]>}

package/src/manager/panel/panelManager.js

@@ -1,6 +1,6 @@
 import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
-import { check } from '@vcsuite/check';
+import { check, ofEnum, oneOf } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
 import { parseBoolean } from '@vcsuite/parsers';
 import { vcsAppSymbol } from '../../pluginHelper.js';
@@ -114,10 +114,11 @@ export function getPanelPosition(panelComponent) {
 }
 
 /**
+ * @param {PanelManager} panelManager
  * @param {PanelComponent} panelComponent
  * @param {Partial<PanelPosition>} panelPosition
  */
-export function setPanelPosition(panelComponent, panelPosition) {
+export function setPanelPosition(panelManager, panelComponent, panelPosition) {
   const position = getPanelPosition(panelComponent);
   const toUpdate = Object.keys(panelPosition).reduce((acc, key) => {
     if (position?.[key] !== panelPosition[key]) {
@@ -126,7 +127,14 @@ export function setPanelPosition(panelComponent, panelPosition) {
     return acc;
   }, {});
   if (Object.keys(toUpdate).length > 0) {
-    Object.assign(panelComponent[panelPositionSymbol], panelPosition);
+    const newPosition = Object.assign(
+      panelComponent[panelPositionSymbol],
+      panelPosition,
+    );
+    panelManager.positionChanged.raiseEvent({
+      panelId: panelComponent.id,
+      panelPosition: newPosition,
+    });
   }
 }
 
@@ -149,6 +157,10 @@ class PanelManager {
      * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
      */
     this.removed = new VcsEvent();
+    /**
+     * @type {import("@vcmap/core").VcsEvent<{panelId: string, panelPosition: PanelPosition}>}
+     */
+    this.positionChanged = new VcsEvent();
     /**
      * reactive ordered array of ids,
      * @type {import("vue").UnwrapRef<string[]>}
@@ -266,7 +278,7 @@ class PanelManager {
           return acc;
         }, {});
       if (Object.keys(toUpdate).length > 0) {
-        setPanelPosition(panelComponent, toUpdate);
+        setPanelPosition(this, panelComponent, toUpdate);
       }
     }
   }
@@ -279,8 +291,8 @@ class PanelManager {
    * @returns {PanelComponent}
    */
   add(panelComponentOptions, owner, location) {
-    check(owner, [String, vcsAppSymbol]);
-    check(location, Object.values(PanelLocation));
+    check(owner, oneOf(String, vcsAppSymbol));
+    check(location, ofEnum(PanelLocation));
 
     const id = panelComponentOptions.id || uuidv4();
     const { component, position: panelPosition } = panelComponentOptions;

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="orderedButtons.length > 0">
+  <div v-if="orderedButtons.length > 0" class="group-toolbox-component">
     <v-menu
       v-model="open"
       @update:model-value="$emit('toggle', open)"
@@ -13,7 +13,7 @@
           :icon="group.icon"
           :disabled="group.disabled"
           :tooltip="group.title"
-          :active="open || hasActiveAction"
+          :active="hasActiveAction"
           :color="hasActiveAction ? 'primary' : ''"
           v-bind="props"
         >
@@ -22,12 +22,11 @@
       </template>
 
       <v-toolbar
-        id="vcs-toolbox-toolbar--secondary"
-        class="mx-auto marginToTop px-1 rounded-b opacity-80 px-1"
-        :height="40"
+        class="vcs-toolbox-toolbar--secondary mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        :height="toolboxHeight"
       >
         <v-toolbar-items class="w-100">
-          <div class="d-flex align-center justify-space-between w-100">
+          <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="{ id, action } in orderedButtons"
               :key="id"
@@ -54,6 +53,7 @@
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description
@@ -66,7 +66,7 @@
    * @vue-computed {boolean} hasActiveAction - Whether the group has an active action.
    */
   export default {
-    name: 'ToolboxActionGroup',
+    name: 'GroupToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,
@@ -94,10 +94,16 @@
         orderedButtons.value.some((a) => a.action.active),
       );
 
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
+
       return {
         open,
         orderedButtons,
         hasActiveAction,
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/GroupToolboxComponent.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     open: import("vue").Ref<boolean>;
     orderedButtons: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     hasActiveAction: import("vue").ComputedRef<boolean>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="group.action"
-    class="d-flex"
+    class="d-flex select-toolbox-component"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
   >
     <VcsToolButton
@@ -28,7 +28,7 @@
           :tooltip="group.action.title"
           :disabled="group.action.disabled"
           v-bind="props"
-          class="vcs-toolbox-action-select"
+          class="vcs-toolbox-action-select px-0"
           :min-width="16"
           :width="16"
         >
@@ -37,12 +37,12 @@
       </template>
 
       <v-toolbar
-        class="vcs-toolbox-2 mx-auto marginToTop rounded-b opacity-80 px-1"
-        :height="40"
+        class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
+        :height="toolboxHeight"
         dense
       >
         <v-toolbar-items class="w-100">
-          <div class="d-flex align-center justify-space-between w-100">
+          <div class="d-flex align-center justify-space-between gc-1 w-100">
             <VcsToolButton
               v-for="(item, index) in group.action.tools"
               :key="`${item.name}-${index}`"
@@ -64,9 +64,10 @@
   }
 </style>
 <script>
-  import { ref } from 'vue';
+  import { ref, computed } from 'vue';
   import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/components';
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description
@@ -74,7 +75,7 @@
    * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
    */
   export default {
-    name: 'ToolboxActionSelect',
+    name: 'SelectToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,
@@ -90,9 +91,13 @@
     },
     setup() {
       const open = ref(false);
-
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
       return {
         open,
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/SelectToolboxComponent.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     open: import("vue").Ref<boolean>;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: ObjectConstructor;