npm - @vcmap/ui - Versions diffs - 5.3.2 → 6.0.0-rc.1 - Mend

@vcmap/ui 5.3.2 → 6.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (589) hide show

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1 @@
-export * from "./vuetify.6ef1af.js";
-import { default as f } from "./vuetify.6ef1af.js";
-export {
-  f as default
-};
+export * from "./vuetify.28d881.js";

package/dist/index.html CHANGED Viewed

@@ -95,7 +95,7 @@
         }
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-2c09148f.js"></script>
+    <script type="module" crossorigin src="./assets/index-ca7EmZ3d.js"></script>
   </head>
   <body style="height: 100vh; margin: 0;">
     <noscript>
@@ -107,6 +107,5 @@
         <div id="loading-content"></div>
       </div>
     </div>
   </body>
 </html>

package/index.d.ts CHANGED Viewed

@@ -130,8 +130,6 @@ export { default as VcsCheckbox } from "./src/components/form-inputs-controls/Vc
 export type * from "./src/components/form-inputs-controls/VcsCheckbox.vue.d.ts";
 export { default as VcsRadio } from "./src/components/form-inputs-controls/VcsRadio.vue";
 export type * from "./src/components/form-inputs-controls/VcsRadio.vue.d.ts";
-export { default as VcsRadioGrid } from "./src/components/form-inputs-controls/VcsRadioGrid.vue";
-export type * from "./src/components/form-inputs-controls/VcsRadioGrid.vue.d.ts";
 export { default as VcsFormSection } from "./src/components/form-inputs-controls/VcsFormSection.vue";
 export type * from "./src/components/form-inputs-controls/VcsFormSection.vue.d.ts";
 export { default as VcsSelect } from "./src/components/form-inputs-controls/VcsSelect.vue";
@@ -140,6 +138,8 @@ export { default as VcsSlider } from "./src/components/form-inputs-controls/VcsS
 export type * from "./src/components/form-inputs-controls/VcsSlider.vue.d.ts";
 export { default as VcsTextField } from "./src/components/form-inputs-controls/VcsTextField.vue";
 export type * from "./src/components/form-inputs-controls/VcsTextField.vue.d.ts";
+export { default as VcsFileInput } from "./src/components/form-inputs-controls/VcsFileInput.vue";
+export type * from "./src/components/form-inputs-controls/VcsFileInput.vue.d.ts";
 export { default as VcsChipArrayInput } from "./src/components/form-inputs-controls/VcsChipArrayInput.vue";
 export type * from "./src/components/form-inputs-controls/VcsChipArrayInput.vue.d.ts";
 export { default as VcsCoordinate } from "./src/components/form-inputs-controls/VcsCoordinate.vue";
@@ -182,8 +182,10 @@ export { default as VcsTextSelector } from "./src/components/style/VcsTextSelect
 export type * from "./src/components/style/VcsTextSelector.vue.d.ts";
 export { default as VcsTextMenu } from "./src/components/style/VcsTextMenu.vue";
 export type * from "./src/components/style/VcsTextMenu.vue.d.ts";
-export { default as VcsExtent } from "./src/components/form-inputs-controls/VcsExtent.vue";
-export type * from "./src/components/form-inputs-controls/VcsExtent.vue.d.ts";
+export { default as VcsExtent } from "./src/components/extent/VcsExtent.vue";
+export type * from "./src/components/extent/VcsExtent.vue.d.ts";
+export { default as VcsExtentEditor } from "./src/components/extent/VcsExtentEditor.vue";
+export type * from "./src/components/extent/VcsExtentEditor.vue.d.ts";
 export { default as VcsViewpointComponent } from "./src/components/viewpoint/VcsViewpointComponent.vue";
 export type * from "./src/components/viewpoint/VcsViewpointComponent.vue.d.ts";
 export { default as VcsViewpointEditor } from "./src/components/viewpoint/VcsViewpointEditor.vue";
@@ -202,14 +204,18 @@ export { default as VcsFeatureStyleComponent } from "./src/components/style/VcsF
 export type * from "./src/components/style/VcsFeatureStyleComponent.vue.d.ts";
 export { default as AbstractConfigEditor } from "./src/components/plugins/AbstractConfigEditor.vue";
 export type * from "./src/components/plugins/AbstractConfigEditor.vue.d.ts";
-export { default as FileDrop } from "./src/components/import/FileDrop.vue";
-export type * from "./src/components/import/FileDrop.vue.d.ts";
-export { default as ImportComponent } from "./src/components/import/ImportComponent.vue";
-export type * from "./src/components/import/ImportComponent.vue.d.ts";
+export { default as VcsFileDrop } from "./src/components/import/VcsFileDrop.vue";
+export type * from "./src/components/import/VcsFileDrop.vue.d.ts";
+export { default as VcsImportComponent } from "./src/components/import/VcsImportComponent.vue";
+export type * from "./src/components/import/VcsImportComponent.vue.d.ts";
 export { default as VcsSplashScreen } from "./src/application/VcsSplashScreen.vue";
 export type * from "./src/application/VcsSplashScreen.vue.d.ts";
 export { default as VcsCustomScreen } from "./src/application/VcsCustomScreen.vue";
 export type * from "./src/application/VcsCustomScreen.vue.d.ts";
+export * from "./src/components/attrsHelpers.js";
+export type * from "./src/components/attrsHelpers.d.ts";
+export * from "./src/components/modelHelper.js";
+export type * from "./src/components/modelHelper.d.ts";
 export { createMapButtonAction, createToggleAction, createOverviewMapAction, createModalAction, createLinkAction, createGoToViewpointAction, createZoomToFeatureAction } from "./src/actions/actionHelper.js";
 export type * from "./src/actions/actionHelper.d.ts";
 export { parseAndSanitizeMarkdown, replaceAttributes } from "./src/application/markdownHelper.js";
@@ -256,7 +262,7 @@ export { getWindowComponentOptions, default as OverviewMap } from "./src/navigat
 export type * from "./src/navigation/overviewMap.d.ts";
 export { createVueI18n, setupI18n } from "./src/vuePlugins/i18n.js";
 export type * from "./src/vuePlugins/i18n.d.ts";
-export { createVuetify, vuetify, getColorByKey, getDefaultPrimaryColor } from "./src/vuePlugins/vuetify.js";
+export { createVcsThemes, createVcsVuetify, getColorByKey, getDefaultPrimaryColor, useItemHeight } from "./src/vuePlugins/vuetify.js";
 export type * from "./src/vuePlugins/vuetify.d.ts";
 export { downloadURI, downloadBlob, downloadText, downloadCanvas } from "./src/downloadHelper.js";
 export type * from "./src/downloadHelper.d.ts";
@@ -278,3 +284,13 @@ export { getProvidedFlightInstance, setupFlightAnchorEditingListener } from "./s
 export type * from "./src/components/flight/composables.d.ts";
 export { default as VcsFeatureEditingWindow, EditorTransformationIcons, getAllowedEditorTransformationModes } from "./src/components/vector-properties/VcsFeatureEditingWindow.vue";
 export type * from "./src/components/vector-properties/VcsFeatureEditingWindow.vue.d.ts";
+declare module 'vue' {
+  type ReplaceFirstParam<TParams extends readonly any[], TReplace> = {
+    [K in keyof TParams]: K extends "0" ? TReplace : TParams[K]
+  }
+  interface ComponentCustomProperties {
+    $st: (...params: ReplaceFirstParam<Parameters<import("vue-i18n").ComposerTranslation>, string | null | undefined>) => ReturnType<import("vue-i18n").ComposerTranslation>
+  }
+}

package/index.js CHANGED Viewed

@@ -45,7 +45,6 @@ export {
   createListImportAction,
   importIntoLayer,
 } from './src/actions/listActions.js';
 export {
   default as VcsCallback,
   executeCallbacks,
@@ -54,7 +53,6 @@ export { default as ActivateLayersCallback } from './src/callback/activateLayers
 export { default as DeactivateLayersCallback } from './src/callback/deactivateLayersCallback.js';
 export { default as GoToViewpointCallback } from './src/callback/goToViewpointCallback.js';
 export { default as ApplyLayerStyleCallback } from './src/callback/applyLayerStyleCallback.js';
 export { default as VcsNavbar } from './src/application/VcsNavbar.vue';
 export {
   default as VcsApp,
@@ -64,7 +62,6 @@ export {
 } from './src/application/VcsApp.vue';
 export { default as VcsAppWrapper } from './src/application/VcsAppWrapper.vue';
 export { default as VcsMap } from './src/application/VcsMap.vue';
 export {
   default as ContentTreeCollection,
   createContentTreeCollection,
@@ -84,7 +81,6 @@ export { default as ObliqueCollectionContentTreeItem } from './src/contentTree/o
 export { default as SubContentTreeItem } from './src/contentTree/subContentTreeItem.js';
 export { default as VcsObjectContentTreeItem } from './src/contentTree/vcsObjectContentTreeItem.js';
 export { default as ViewpointContentTreeItem } from './src/contentTree/viewpointContentTreeItem.js';
 export { default as WindowComponent } from './src/manager/window/WindowComponent.vue';
 export { default as WindowComponentHeader } from './src/manager/window/WindowComponentHeader.vue';
 export { default as VcsWindowManager } from './src/manager/window/WindowManager.vue';
@@ -111,14 +107,12 @@ export {
   applyParentPosition,
   getPositionAppliedOnTarget,
 } from './src/manager/window/windowHelper.js';
 export {
   default as PanelManager,
   PanelLocation,
 } from './src/manager/panel/panelManager.js';
 export { default as PanelManagerComponent } from './src/manager/panel/PanelManagerComponent.vue';
 export { default as PanelComponent } from './src/manager/panel/PanelComponent.vue';
 export { default as ButtonManager } from './src/manager/buttonManager.js';
 export {
   default as NavbarManager,
@@ -149,7 +143,6 @@ export { default as CollectionComponentContent } from './src/manager/collectionM
 export { default as ContextMenuManager } from './src/manager/contextMenu/contextMenuManager.js';
 export { default as ContextMenuComponent } from './src/manager/contextMenu/ContextMenuComponent.vue';
 export { default as ContextMenuInteraction } from './src/manager/contextMenu/contextMenuInteraction.js';
 export {
   applyKeyMapping,
   applyValueMapping,
@@ -190,14 +183,15 @@ export { default as OverviewMapClickedInteraction } from './src/navigation/overv
 export { default as TiltSlider } from './src/navigation/TiltSlider.vue';
 export { default as VcsCompass } from './src/navigation/VcsCompass.vue';
 export { default as VcsZoomButton } from './src/navigation/VcsZoomButton.vue';
+//
 export { createVueI18n, setupI18n } from './src/vuePlugins/i18n.js';
 export { i18nPluginSymbol } from './src/i18n/i18nCollection.js';
 export {
-  createVuetify,
-  vuetify,
+  createVcsThemes,
+  createVcsVuetify,
   getColorByKey,
   getDefaultPrimaryColor,
+  useItemHeight,
 } from './src/vuePlugins/vuetify.js';
 export {
   downloadURI,
@@ -240,49 +234,36 @@ export { default as VcsFormButton } from './src/components/buttons/VcsFormButton
 export { default as VcsActionButtonList } from './src/components/buttons/VcsActionButtonList.vue';
 export { default as VcsTooltip } from './src/components/notification/VcsTooltip.vue';
 export { default as VcsHelp } from './src/components/notification/VcsHelp.vue';
 export { default as VcsTable } from './src/components/tables/VcsTable.vue';
 export { default as VcsDataTable } from './src/components/tables/VcsDataTable.vue';
-// export { default as VcsConfirmationDialog } from './src/components/dialogs/VcsConfirmationDialog.vue';
 export { default as VcsLabel } from './src/components/form-inputs-controls/VcsLabel.vue';
 export { default as VcsCheckbox } from './src/components/form-inputs-controls/VcsCheckbox.vue';
 export { default as VcsRadio } from './src/components/form-inputs-controls/VcsRadio.vue';
-export { default as VcsRadioGrid } from './src/components/form-inputs-controls/VcsRadioGrid.vue';
-// export { default as VcsColorPicker } from './src/components/form-inputs-controls/VcsColorPicker.vue';
 export { default as VcsFormSection } from './src/components/form-inputs-controls/VcsFormSection.vue';
-// export { default as VcsInputColumnCoordinates } from './src/components/form-inputs-controls/VcsInputColumnCoordinates.vue';
-// export { default as VcsInputColumnDimensions } from './src/components/form-inputs-controls/VcsInputColumnDimensions.vue';
-// export { default as VcsMinimalCheckbox } from './src/components/form-inputs-controls/VcsMinimalCheckbox.vue';
 export { default as VcsSelect } from './src/components/form-inputs-controls/VcsSelect.vue';
 export { default as VcsSlider } from './src/components/form-inputs-controls/VcsSlider.vue';
 export { default as VcsTextField } from './src/components/form-inputs-controls/VcsTextField.vue';
+export { default as VcsFileInput } from './src/components/form-inputs-controls/VcsFileInput.vue';
 export { default as VcsChipArrayInput } from './src/components/form-inputs-controls/VcsChipArrayInput.vue';
 export { default as VcsCoordinate } from './src/components/form-inputs-controls/VcsCoordinate.vue';
 export { default as VcsTextArea } from './src/components/form-inputs-controls/VcsTextArea.vue';
 export { default as VcsWizard } from './src/components/form-inputs-controls/VcsWizard.vue';
 export { default as VcsWizardStep } from './src/components/form-inputs-controls/VcsWizardStep.vue';
 export { default as VcsDatePicker } from './src/components/form-inputs-controls/VcsDatePicker.vue';
 export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
 export { default as VcsTextPage } from './src/application/VcsTextPage.vue';
 export {
   default as VcsActionList,
   validateAction,
   validateActions,
 } from './src/components/lists/VcsActionList.vue';
 export { default as VcsList } from './src/components/lists/VcsList.vue';
 export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
 export { default as VcsTreeviewLeaf } from './src/components/lists/VcsTreeviewLeaf.vue';
 export { default as VcsTreeviewSearchbar } from './src/components/lists/VcsTreeviewSearchbar.vue';
 export { default as VcsBadge } from './src/components/notification/VcsBadge.vue';
 export { default as VcsDefaultLogo } from './src/logo.svg';
 export { default as VcsDefaultMobileLogo } from './src/logo-mobile.svg';
 export { default as VcsFillSelector } from './src/components/style/VcsFillSelector.vue';
 export { default as VcsFillMenu } from './src/components/style/VcsFillMenu.vue';
 export { default as VcsStrokeSelector } from './src/components/style/VcsStrokeSelector.vue';
@@ -291,12 +272,12 @@ export { default as VcsImageSelector } from './src/components/style/VcsImageSele
 export { default as VcsImageMenu } from './src/components/style/VcsImageMenu.vue';
 export { default as VcsTextSelector } from './src/components/style/VcsTextSelector.vue';
 export { default as VcsTextMenu } from './src/components/style/VcsTextMenu.vue';
-export { default as VcsExtent } from './src/components/form-inputs-controls/VcsExtent.vue';
+export { default as VcsExtent } from './src/components/extent/VcsExtent.vue';
+export { default as VcsExtentEditor } from './src/components/extent/VcsExtentEditor.vue';
 export {
   default as VcsVectorStyleComponent,
   VectorStyleMenus,
 } from './src/components/style/VcsVectorStyleComponent.vue';
 export {
   default as VcsVectorPropertiesComponent,
   vectorProperties,
@@ -318,9 +299,10 @@ export {
 } from './src/components/vector-properties/VcsFeatureEditingWindow.vue';
 export { default as VcsFeatureTransforms } from './src/components/vector-properties/VcsFeatureTransforms.vue';
 export { default as VcsFeatureStyleComponent } from './src/components/style/VcsFeatureStyleComponent.vue';
 export { default as AbstractConfigEditor } from './src/components/plugins/AbstractConfigEditor.vue';
-export { default as FileDrop } from './src/components/import/FileDrop.vue';
-export { default as ImportComponent } from './src/components/import/ImportComponent.vue';
+export { default as VcsFileDrop } from './src/components/import/VcsFileDrop.vue';
+export { default as VcsImportComponent } from './src/components/import/VcsImportComponent.vue';
 export { default as VcsSplashScreen } from './src/application/VcsSplashScreen.vue';
 export { default as VcsCustomScreen } from './src/application/VcsCustomScreen.vue';
+export * from './src/components/attrsHelpers.js';
+export * from './src/components/modelHelper.js';

package/lib/vue.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from 'vue';
2	- export { default } from 'vue';

package/lib/vuetify.js CHANGED Viewed

@@ -1,2 +1 @@
-export * from 'vuetify/lib';
-export { default } from 'vuetify/lib';
+export * from 'vuetify';

package/lib/vuetifyLib.js ADDED Viewed

@@ -0,0 +1,6 @@
+export * from 'vuetify';
+export * from 'vuetify/components';
+export * from 'vuetify/styles';
+export * from 'vuetify/directives';
+export * from 'vuetify/blueprints';
+export * from 'vuetify/labs/components';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.3.2",
+  "version": "6.0.0-rc.1",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -19,7 +19,10 @@
     "lint": "npm run lint:js && npm run lint:prettier && npm run lint:types",
     "format": "prettier --write --list-different . && npm run lint:js -- --fix",
     "prepack": "node build/build.js && node build/buildTypes.js",
-    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force"
+    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "repository": {
     "type": "git",
@@ -49,22 +52,25 @@
     "marked": "^11.1.0",
     "semver": "^7.5.4",
     "uuid": "^9.0.0",
-    "vue-i18n": "^8.24.1"
+    "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^4.0.3",
     "@vcmap/core": "^5.3.0",
     "ol": "^7.5.2",
-    "vue": "~2.7.3",
-    "vuetify": "~2.6.7"
+    "vue": "~3.4.27",
+    "vuetify": "^3.6.8"
   },
   "devDependencies": {
+    "@histoire/plugin-vue": "^0.17.17",
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
     "@vcsuite/eslint-config": "^3.0.5",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "@vitest/coverage-v8": "^0.34.6",
-    "@vue/test-utils": "^1.3.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vue/test-utils": "^2.4.6",
     "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-vuetify": "^2.4.0",
+    "histoire": "^0.17.17",
     "jest-canvas-mock": "^2.5.2",
     "jsdoc": "^3.6.7",
     "jsdoc-plugin-intersection": "^1.0.4",
@@ -72,12 +78,13 @@
     "jsdom": "^22.1.0",
     "resize-observer-polyfill": "1.5.1",
     "rollup-plugin-strip-pragma": "^1.0.0",
-    "sass": "1.32.13",
+    "sass": "^1.77.1",
     "tar": "^6.1.14",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.20"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.17"
   },
   "stylelint": {
     "extends": "stylelint-config-standard",
@@ -95,7 +102,8 @@
   "eslintConfig": {
     "root": true,
     "extends": [
-      "@vcsuite/eslint-config/vue"
+      "@vcsuite/eslint-config/vue",
+      "plugin:vuetify/base"
     ],
     "settings": {
       "import/resolver": {
@@ -110,6 +118,7 @@
       }
     },
     "rules": {
+      "vue/no-v-model-argument": "off",
       "jsdoc/check-tag-names": "off"
     }
   },

package/plugins/@vcmap-show-case/buttons-example/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/buttons-example",
-  "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "version": "2.0.0",
+  "mapVersion": "^6.0.0"
 }

package/plugins/@vcmap-show-case/buttons-example/src/ButtonsExample.vue CHANGED Viewed

@@ -1,70 +1,70 @@
 <template>
   <v-card>
-    <v-list-item>
-      <v-list-item-content>
+    <v-list density="compact">
+      <v-list-item density="compact">
         <v-list-item-title class="font-weight-bold">
           DISABLED
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="disabled" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="disabled" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           HAS UPDATE
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="update" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="update" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold"> ACTIVE </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="active" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="active" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           ACTIVE BACKGROUND
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="background" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="background" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           LOADING
         </v-list-item-title>
-      </v-list-item-content>
-      <v-list-item-action>
-        <v-switch v-model="loading" />
-      </v-list-item-action>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+        <template #append>
+          <v-list-item-action>
+            <v-switch hide-details density="compact" v-model="loading" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           <!-- eslint-disable-next-line -->
           &ltVcsFormButton /&gt
         </v-list-item-title>
-        <v-row>
+        <v-row class="pa-1">
           <v-col>
             <v-card>
               <v-card-title>Form fields</v-card-title>
               <v-card-actions>
-                <div class="d-flex gap-2">
+                <div class="d-flex gc-2">
                   <VcsFormButton
                     @click="toggle"
                     :disabled="disabled"
@@ -114,16 +114,14 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-list-item-content>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           <!-- eslint-disable-next-line -->
           &ltVcsToolButton/&gt
         </v-list-item-title>
-        <v-row>
+        <v-row class="pa-1">
           <v-col>
             <v-card>
               <v-card-title>Navbar</v-card-title>
@@ -167,16 +165,14 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-list-item-content>
-    </v-list-item>
-    <v-divider />
-    <v-list-item>
-      <v-list-item-content>
+      </v-list-item>
+      <v-divider />
+      <v-list-item>
         <v-list-item-title class="font-weight-bold">
           <!-- eslint-disable-next-line -->
           &ltVcsButton/&gt
         </v-list-item-title>
-        <v-row>
+        <v-row class="pa-1">
           <v-col>
             <v-card>
               <v-card-title>Action Item</v-card-title>
@@ -218,8 +214,8 @@
             </v-card>
           </v-col>
         </v-row>
-      </v-list-item-content>
-    </v-list-item>
+      </v-list-item>
+    </v-list>
   </v-card>
 </template>
 <script>
@@ -232,8 +228,8 @@
   import { ref } from 'vue';
   import {
     VCard,
+    VList,
     VListItem,
-    VListItemContent,
     VListItemTitle,
     VListItemAction,
     VSwitch,
@@ -242,7 +238,7 @@
     VCol,
     VCardTitle,
     VCardActions,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   export default {
     name: 'ButtonsExample',
@@ -252,8 +248,8 @@
       VcsFormButton,
       VcsActionButtonList,
       VCard,
+      VList,
       VListItem,
-      VListItemContent,
       VListItemTitle,
       VListItemAction,
       VSwitch,

package/plugins/@vcmap-show-case/buttons-example/src/index.js CHANGED Viewed

@@ -24,7 +24,7 @@ export default async function buttonsExample() {
           icon: '$vcsTouch',
         },
         {
-          id: 'buttons-textfields-example',
+          id: 'buttons-buttons-example',
           component: ButtonsExample,
           slot: WindowSlot.DETACHED,
           state: {

package/plugins/@vcmap-show-case/category-tester/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
   "name": "@vcmap-show-case/category-tester",
-  "version": "1.0.0",
-  "mapVersion": "^5.0.0"
+  "version": "2.0.0",
+  "mapVersion": "^6.0.0"
 }

package/plugins/@vcmap-show-case/category-tester/src/CategoriesExample.vue CHANGED Viewed

@@ -2,17 +2,21 @@
   <div>
     <v-container class="pa-0">
       <v-expansion-panels
-        accordion
+        variant="accordion"
         multiple
         v-if="!componentView && componentIds.length > 0"
         class="rounded-0"
+        v-model="panels"
       >
         <collection-component-provider
-          v-for="componentId in componentIds"
+          v-for="(componentId, index) in componentIds"
           :component-id="componentId"
           :key="componentId"
         >
-          <collection-component @openList="openList" />
+          <collection-component
+            @openList="openList"
+            :open="panels.includes(index)"
+          />
           <v-dialog v-model="optionsDialog" width="300">
             <v-card class="pa-2">
               <CollectionComponentOptions />
@@ -32,8 +36,8 @@
         </v-dialog>
       </collection-component-provider>
     </v-container>
-    <div class="d-flex gap-2 px-2 pt-2 pb-1">
-      <div class="d-flex gap-2 w-full justify-end">
+    <div class="d-flex gc-2 px-2 pt-2 pb-1">
+      <div class="d-flex gc-2 w-full justify-end">
         <VcsFormButton @click="newCategory.dialog = true" variant="filled"
           >Request Category</VcsFormButton
         >
@@ -113,7 +117,7 @@
     VCardTitle,
     VForm,
     VDialog,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { getObjectFromClassRegistry } from '@vcmap/core';
   import { name as owner } from '../package.json';
   import CollectionComponentOptions from './CollectionComponentOptions.vue';
@@ -151,6 +155,7 @@
       provide('collectionManager', app.categoryManager);
       const componentIds = ref([]);
       const destroyFunctions = [];
+      const panels = ref([]);
       const newCategory = ref({
         dialog: false,
@@ -358,6 +363,7 @@
         newCategory,
         newItem,
         optionsDialog,
+        panels,
         addItem,
         async requestCategory() {
           const { collectionComponent, category } =