@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/legend/VcsLegend.vue

@@ -1,57 +1,42 @@
 <template>
-  <v-sheet class="overflow-y-auto">
+  <v-sheet class="overflow-y-auto vcs-legend">
     <v-expansion-panels
-      accordion
+      variant="accordion"
       multiple
       v-if="entries.length > 0"
-      v-model="panels"
       class="rounded-0"
     >
-      <v-expansion-panel
+      <vcs-expansion-panel
         v-for="(entry, i) in entries"
         :key="i"
-        class="px-2"
-        @change="entry.open = !entry.open"
+        :heading="entry.title"
+        :header-actions="entry.actions"
+        @group:selected="entry.open = !entry.open"
       >
-        <v-expansion-panel-header hide-actions>
-          <template #default="{ open }">
-            <div class="d-flex justify-space-between">
-              <div class="d-flex align-center">
-                <v-icon class="mr-1" :class="{ rotate: !open }">
-                  mdi-chevron-down
-                </v-icon>
-                {{ $t(entry.title) }}
-              </div>
-              <VcsActionButtonList :actions="entry.actions" />
+        <v-list class="pl-6 pb-2">
+          <div v-for="(item, idx) in entry.legend" :key="idx">
+            <div v-if="item.type === LegendType.Image">
+              <img
+                :src="$st(item.src)"
+                :alt="item.src"
+                class="legend-image"
+                :title="item.tooltip"
+              />
             </div>
-          </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content class="pl-6 pb-2">
-          <v-list dense>
-            <div v-for="(item, idx) in entry.legend" :key="idx">
-              <div v-if="item.type === LegendType.Image">
-                <img
-                  :src="$t(item.src)"
-                  :alt="item.src"
-                  class="legend-image"
-                  :title="item.tooltip"
-                />
-              </div>
-              <div v-else-if="item.type === LegendType.Iframe">
-                <iframe
-                  :id="`legendIframe${idx}`"
-                  :src="$t(item.src)"
-                  scrolling="no"
-                  style="width: 100%; height: 100%"
-                  frameBorder="0"
-                  @load="setIframeHeight(`legendIframe${idx}`)"
-                />
-              </div>
-              <style-legend-item v-else :item="item" />
+            <div v-else-if="item.type === LegendType.Iframe">
+              <iframe
+                :id="`${cid}-legendIframe${idx}`"
+                :src="$st(item.src)"
+                scrolling="no"
+                style="width: 100%; height: 100%"
+                frameBorder="0"
+                @load="setIframeHeight(`${cid}-legendIframe${idx}`)"
+              />
             </div>
-          </v-list>
-        </v-expansion-panel-content>
-      </v-expansion-panel>
+            <style-legend-item v-else :item="item" />
+          </div>
+        </v-list>
+      </vcs-expansion-panel>
     </v-expansion-panels>
     <v-sheet v-else class="ma-2">
       {{ $t('legend.empty') }}
@@ -60,42 +45,31 @@
 </template>
 
 <script>
-  import {
-    VExpansionPanels,
-    VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
-    VIcon,
-    VList,
-    VSheet,
-  } from 'vuetify/lib';
+  import { VExpansionPanels, VList, VSheet } from 'vuetify/components';
   import { computed } from 'vue';
+  import { useComponentId } from '../components/composables.js';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
-  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
+  import VcsExpansionPanel from '../components/section/VcsExpansionPanel.vue';
 
   /**
    * @description A component rendering configured legend information for active layers.
-   * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
+   * @vue-prop {import("vue").UnwrapRef<Array<LegendEntry>>} entries - legend entries to be displayed
    * @vue-computed {import("vue").ComputedRef<number[]>} panels - derives indices from entries array to define all panels as open
    */
   export default {
     name: 'VcsLegend',
     components: {
-      VcsActionButtonList,
+      VcsExpansionPanel,
       StyleLegendItem,
       VExpansionPanels,
-      VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
-      VIcon,
       VList,
       VSheet,
     },
     props: {
       entries: {
-        type: Object,
-        required: true,
+        type: Array,
+        default: () => [],
       },
     },
     setup(props) {
@@ -120,10 +94,13 @@
         set() {},
       });
 
+      const cid = useComponentId();
+
       return {
         LegendType,
         setIframeHeight,
-        panels,
+        panels, // TODO
+        cid,
       };
     },
   };

package/src/legend/VcsLegend.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
     entries: {
-        type: ObjectConstructor;
-        required: true;
+        type: ArrayConstructor;
+        default: () => never[];
     };
 }, {
     LegendType: {
@@ -11,10 +11,13 @@ declare const _default: import("vue").DefineComponent<{
     };
     setIframeHeight: (id: string) => void;
     panels: import("vue").ComputedRef<number[]>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    cid: string;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
-        type: ObjectConstructor;
-        required: true;
+        type: ArrayConstructor;
+        default: () => never[];
     };
-}>>, {}>;
+}>>, {
+    entries: unknown[];
+}, {}>;
 export default _default;

package/src/legend/legendHelper.d.ts

@@ -74,10 +74,10 @@ export function createLayerLegendEntry(key: string, title: string, legend: Array
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ * @returns {{entries: import("vue").UnwrapRef<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app: import("../vcsUiApp.js").default): {
-    entries: import("vue").Ref<Array<LegendEntry>>;
+    entries: import("vue").UnwrapRef<Array<LegendEntry>>;
     destroy: () => void;
 };
 /**

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import { shallowRef } from 'vue';
+import { reactive } from 'vue';
 
 /**
  * @enum {string}
@@ -136,13 +136,13 @@ export function createLayerLegendEntry(key, title, legend) {
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ * @returns {{entries: import("vue").UnwrapRef<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app) {
   /**
-   * @type {import("vue").Ref<Array<LegendEntry>>}>}
+   * @type {import("vue").UnwrapRef<Array<LegendEntry>>}>}
    */
-  const entries = shallowRef([]);
+  const entries = reactive([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -153,8 +153,10 @@ export function getLegendEntries(app) {
    */
   function removeEntryForLayer(layer) {
     const layerName = layer.name;
-    // reassign to trigger update
-    entries.value = entries.value.filter(({ key }) => key !== layerName);
+    const entryIndex = entries.findIndex(({ key }) => key === layerName);
+    if (entryIndex >= 0) {
+      entries.splice(entryIndex, 1);
+    }
     if (styleChangedListener[layerName]) {
       styleChangedListener[layerName]();
       delete styleChangedListener[layerName];
@@ -175,8 +177,7 @@ export function getLegendEntries(app) {
         layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
         const legendEntry = createLayerLegendEntry(key, title, legend);
-        // use spread since push won't trigger updates. Put new entries at the start
-        entries.value = [legendEntry, ...entries.value];
+        entries.unshift(legendEntry);
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(

package/src/manager/buttonManager.d.ts

@@ -58,9 +58,9 @@ declare class ButtonManager implements IButtonManager {
     removed: import("@vcmap/core").VcsEvent<ButtonComponent>;
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * @type {Map<string, ButtonComponent>}
      * @private

package/src/manager/buttonManager.js

@@ -1,7 +1,7 @@
 import { reactive } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import { ActionPattern } from '../components/lists/VcsActionList.vue';
 import { getActionFromOptions } from '../actions/actionHelper.js';
@@ -51,9 +51,9 @@ class ButtonManager {
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
+    this.componentIds = reactive([]);
     /**
      * @type {Map<string, ButtonComponent>}
      * @private
@@ -101,10 +101,10 @@ class ButtonManager {
    * @returns {ButtonComponent}
    */
   add(buttonComponentOptions, owner) {
-    checkMaybe(buttonComponentOptions.id, String);
-    checkMaybe(buttonComponentOptions.weight, Number);
+    check(buttonComponentOptions.id, maybe(String));
+    check(buttonComponentOptions.weight, maybe(Number));
     check(buttonComponentOptions.action, ActionPattern);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
       throw new Error(
@@ -112,7 +112,9 @@ class ButtonManager {
       );
     }
     const id = buttonComponentOptions.id || uuidv4();
-    const action = getActionFromOptions(buttonComponentOptions.action);
+    const action = reactive(
+      getActionFromOptions(buttonComponentOptions.action),
+    );
 
     /**
      * @type {ButtonComponent}
@@ -125,7 +127,7 @@ class ButtonManager {
         return owner;
       },
       get action() {
-        return reactive(action);
+        return action;
       },
       get weight() {
         return buttonComponentOptions.weight || 0;

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,41 +1,25 @@
 <template>
-  <v-expansion-panel>
-    <v-expansion-panel-header hide-actions class="px-2">
-      <template #default="{ open }">
-        <div class="d-flex justify-space-between">
-          <div class="d-flex align-center gap-1">
-            <v-icon :class="{ rotate: !open }"> mdi-chevron-down </v-icon>
-            <span>
-              {{ $t(title) }}
-            </span>
-            <span v-if="selectable && selection.length > 0">
-              {{ `(${selection.length})` }}
-            </span>
-          </div>
-          <VcsActionButtonList
-            v-if="actions?.length > 0"
-            :actions="actions"
-            :overflow-count="overflowCount"
-          />
-        </div>
-      </template>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content class="pb-1">
+  <vcs-expansion-panel
+    class="collection-component"
+    :heading="title"
+    :header-actions="actions"
+    :action-button-list-overflow-count="overflowCount"
+  >
+    <template #header-append>
+      <span v-if="selectable && selection.length > 0" class="ml-1">
+        {{ `(${selection.length})` }}
+      </span>
+    </template>
+    <template #default>
       <CollectionComponentContent @openList="(id) => $emit('openList', id)" />
-    </v-expansion-panel-content>
-  </v-expansion-panel>
+    </template>
+  </vcs-expansion-panel>
 </template>
 
 <script>
   import { computed, inject } from 'vue';
-  import {
-    VIcon,
-    VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
-  } from 'vuetify/lib';
+  import VcsExpansionPanel from '../../components/section/VcsExpansionPanel.vue';
   import { createSelectionActions } from '../../components/lists/VcsList.vue';
-  import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
 
   /**
@@ -53,13 +37,16 @@
   export default {
     name: 'CollectionComponent',
     components: {
+      VcsExpansionPanel,
       CollectionComponentContent,
-      VcsActionButtonList,
-      VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
-      VIcon,
     },
+    props: {
+      open: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['openList'],
     setup(_props, { emit }) {
       /**
        * @type {CollectionComponentClass}
@@ -93,11 +80,4 @@
   };
 </script>
 
-<style lang="scss" scoped>
-  .rotate {
-    transform: rotate(-90deg);
-  }
-  .v-icon {
-    font-size: 16px;
-  }
-</style>
+<style lang="scss" scoped></style>

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

@@ -1,10 +1,24 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
     title: any;
     selection: any;
     selectable: any;
     overflowCount: any;
     actions: import("vue").ComputedRef<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, "openList"[], "openList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onOpenList?: ((...args: any[]) => any) | undefined;
+}, {
+    open: boolean;
+}, {}>;
 export default _default;
 export type FormSectionOptions = {
     expandable?: boolean | undefined;

package/src/manager/collectionManager/CollectionComponentContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-0">
+  <v-container class="py-0 px-0 collection-component-content">
     <vcs-list
       :items="items.slice(0, limit)"
       :draggable="draggable"
@@ -22,7 +22,7 @@
 
 <script>
   import { computed, inject } from 'vue';
-  import { VSheet, VContainer } from 'vuetify/lib';
+  import { VSheet, VContainer } from 'vuetify/components';
   import VcsList, {
     createSelectionActions,
   } from '../../components/lists/VcsList.vue';
@@ -36,13 +36,14 @@
    * @vue-event {string} openList
    */
   export default {
-    name: 'CollectionComponent',
+    name: 'CollectionComponentContent',
     components: {
       VcsButton,
       VcsList,
       VSheet,
       VContainer,
     },
+    emits: ['openList'],
     setup(_props, { emit }) {
       /**
        * @type {CollectionComponentClass}
@@ -87,16 +88,14 @@
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep {
-    .v-list {
-      .v-list-item {
-        padding: 4px 8px 4px 28px;
-      }
-      .v-list-item__selected {
-        border-left: solid 4px;
-        border-left-color: var(--v-primary-base);
-        padding-left: 24px !important;
-      }
+  :deep(.v-list) {
+    .v-list-item {
+      padding-left: 24px;
+      padding-inline-start: 24px !important;
+    }
+    .v-list-item__selected {
+      padding-left: 20px !important;
+      padding-inline-start: 20px !important;
     }
   }
 </style>

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

@@ -13,5 +13,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         targetIndex: any;
     }): void;
     openCollectionComponentList(): 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, "openList"[], "openList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onOpenList?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 export default _default;

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -1,13 +1,10 @@
 <template>
-  <div>
-    <div
-      v-if="!hideHeader"
-      class="v-expansion-panel-header px-2 v-expansion-panel-header--active"
-    >
-      <div class="d-flex justify-space-between">
-        <div class="d-flex align-center gap-1 pl-2">
+  <div class="collection-component-list">
+    <div v-if="!hideHeader" class="pr-2 pl-4 py-1">
+      <div class="d-flex justify-space-between inner-header">
+        <div class="d-flex align-center gc-1">
           <span>
-            {{ $t(title) }}
+            {{ $st(title) }}
           </span>
           <span v-if="selectable && selection.length > 0">
             {{ `(${selection.length})` }}
@@ -40,7 +37,7 @@
 <script>
   import { computed, inject } from 'vue';
   import { IndexedCollection } from '@vcmap/core';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import VcsList, {
     createSelectionActions,
   } from '../../components/lists/VcsList.vue';
@@ -52,7 +49,7 @@
    * New position is derived from a target item in the collection.
    * This ensures correct movement, if rendered list is only a subset of the collection.
    * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
-   * @param {import("../../components/lists/VcsList.vue").VcsListItem} item
+   * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} item
    * @param {number} targetIndex
    */
   export function moveItem(collectionComponent, item, targetIndex) {
@@ -93,6 +90,7 @@
       VcsList,
       VSheet,
     },
+    emits: ['closeList'],
     setup(_props, { emit }) {
       /**
        * @type {import("./collectionComponentClass.js").CollectionComponentClass}
@@ -136,4 +134,8 @@
   };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .inner-header {
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
+  }
+</style>

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

@@ -3,10 +3,10 @@
  * New position is derived from a target item in the collection.
  * This ensures correct movement, if rendered list is only a subset of the collection.
  * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
- * @param {import("../../components/lists/VcsList.vue").VcsListItem} item
+ * @param {import("../../components/lists/VcsListItemComponent.vue").VcsListItem} item
  * @param {number} targetIndex
  */
-export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, item: import("../../components/lists/VcsList.vue").VcsListItem, targetIndex: number): void;
+export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, item: import("../../components/lists/VcsListItemComponent.vue").VcsListItem, targetIndex: number): void;
 declare const _default: import("vue").DefineComponent<{
     showLessButton: {
         type: BooleanConstructor;
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         targetIndex: any;
     }): void;
     closeList(): void;
-}, {}, {}, {}, 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, "closeList"[], "closeList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     showLessButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -40,8 +40,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+}>> & {
+    onCloseList?: ((...args: any[]) => any) | undefined;
+}, {
     hideHeader: boolean;
     showLessButton: boolean;
-}>;
+}, {}>;
 export default _default;

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full">
+  <div class="w-100 collection-component-provider">
     <slot>
       <collection-component />
     </slot>

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

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

package/src/manager/collectionManager/CollectionComponentStandalone.vue

@@ -4,6 +4,7 @@
     :header-actions="actions"
     :action-button-list-overflow-count="overflowCount"
     v-bind="{ ...$attrs }"
+    class="collection-component-standalone"
   >
     <collection-component-list
       v-if="componentListView"
@@ -16,7 +17,7 @@
 
 <script>
   import { computed, getCurrentInstance, inject, ref } from 'vue';
-  import VcsFormSection from '../../components/form-inputs-controls/VcsFormSection.vue';
+  import VcsFormSection from '../../components/section/VcsFormSection.vue';
   import { createSelectionActions } from '../../components/lists/VcsList.vue';
   import CollectionComponentList from './CollectionComponentList.vue';
   import CollectionComponentContent from './CollectionComponentContent.vue';
@@ -27,7 +28,7 @@
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
    */
   export default {
-    name: 'CollectionComponent',
+    name: 'CollectionComponentStandalone',
     components: {
       CollectionComponentList,
       CollectionComponentContent,
@@ -57,7 +58,7 @@
           collectionComponent.selectable &&
           collectionComponent.selection.length > 0
         ) {
-          return `${vm.$t(collectionComponent.title.value)} (${
+          return `${vm.$st(collectionComponent.title.value)} (${
             collectionComponent.selection.value.length
           })`;
         }

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

@@ -5,5 +5,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     componentListView: import("vue").Ref<boolean>;
     openList(): void;
     closeList(): 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;