@abi-software/mapintegratedvuer 0.7.0-vue3.1 → 0.7.0-vue3.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "0.7.0-vue3.1",
+  "version": "0.7.0-vue3.3",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
     "build-bundle": "vite build",
     "test-unit": "mochapack --webpack-config test/unit/webpack.config.js --require test/unit/setup.js test/unit/**/*.spec.js",
-    "lint": "vue-cli-service lint",
-    "build-static": "vue-cli-service build --dest test_html --mode static",
-    "start": "vue-cli-service serve",
+    "test": "vitest --dom",
+    "build-static": "vite build -c vite.static-build.js",
     "cypress": "cypress",
+    "cypress-component": "cypress run --component",
     "report:merge": "mochawesome-merge cypress/results/json/*json > cypress/results/mochawesome-bundle.json",
     "report:generate": "marge cypress/results/mochawesome-bundle.json -o cypress/reports/html",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
@@ -42,11 +42,15 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^0.6.0-vue3.3",
-    "@abi-software/map-side-bar": "^1.7.0-vue3.2",
-    "@abi-software/scaffoldvuer": "^0.4.0-vue3.3",
+    "@abi-software/flatmapvuer": "^0.6.0-vue3.6",
+    "@abi-software/map-side-bar": "^1.7.0-vue3.4",
+    "@abi-software/plotvuer": "^0.4.0-vue-3-alpha.5",
+    "@abi-software/scaffoldvuer": "^0.4.0-vue3-optimise.0",
+    "@abi-software/simulationvuer": "^0.7.0-vue-3-alpha.3",
     "@abi-software/svg-sprite": "^0.4.0-vue3-beta.0",
+    "@cypress/vite-dev-server": "^5.0.7",
     "@element-plus/icons-vue": "^2.3.1",
+    "@pinia/testing": "^0.1.3",
     "@soda/get-current-script": "^1.0.2",
     "core-js": "^3.22.5",
     "css-element-queries": "^1.2.3",
@@ -71,21 +75,21 @@
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.3.1",
     "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/test-utils": "^2.4.3",
+    "@vue/test-utils": "^2.4.4",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^2.0.1",
     "canvas": "^2.8.0",
     "chai": "^4.1.2",
-    "cypress": "^12.11.0",
-    "cypress-multi-reporters": "^1.6.3",
+    "cypress": "^13.6.4",
+    "cypress-multi-reporters": "^1.6.4",
     "cypress-wait-until": "^1.7.1",
     "dom-parser": "^0.1.6",
     "eslint": "^8.56.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-vue": "^9.19.2",
-    "file-loader": "^5.1.0",
+    "happy-dom": "^13.3.8",
     "jsdom": "^16.2.2",
     "jsdom-global": "^3.0.2",
     "mocha": "^8.1.3",
@@ -93,11 +97,9 @@
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
     "mochawesome-report-generator": "^6.2.0",
-    "node-loader": "^0.6.0",
-    "raw-loader": "^0.5.1",
-    "resolve-url-loader": "^3.1.2",
     "sass": "^1.69.5",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vitest": "^1.2.2"
   },
   "eslintConfig": {
     "root": true,

package/src/App.vue

@@ -157,7 +157,7 @@ export default {
     mapIsReady: function() {
       console.log("map is ready")
     },
-    parseQuery: function (query) {
+    parseQuery: function () {
       this.$router.isReady().then(() => {
         this.uuid = this.$route.query.id;
         if (window) {

package/src/components/ContentBar.vue

@@ -71,7 +71,7 @@
         <template #reference>
           <map-svg-icon icon="close" class="header-icon"
             v-show="(activeView !== 'singlepanel') && (entry.mode !== 'main')"
-            @click.native="closeAndRemove()"/>
+            @click="closeAndRemove()"/>
           </template>
       </el-popover>
 

package/src/components/ContextCard.vue

@@ -197,7 +197,6 @@ export default {
         .catch((err) => {
           //set defaults if we hit an error
           console.error('caught error!', err)
-          this.thumbnail = require('./assets/missing-image.svg')
           this.discoverId = undefined
           this.loading = false
         });

package/src/components/ContextHelp.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="showHelp" class="content-container">
     <el-card class="box-card"
-      @mouseover.native="isActive = true"
-      @mouseleave.native="isActive = false"
+      @mouseover="isActive = true"
+      @mouseleave="isActive = false"
       :class="{active: isActive}">
       <div slot="header" class="header">
         <span>Needing some help?</span>

package/src/components/DialogToolbarContent.vue

@@ -55,7 +55,7 @@
           :class="[{ 'active': item.icon ==  activeView},
             {'disabled': item.min > numberOfEntries},
             'view-icon-row']"
-          @click.native="viewClicked(item.icon)"
+          @click="viewClicked(item.icon)"
         >
           <el-col :span="4">
             <map-svg-icon :icon="item.icon"
@@ -82,14 +82,14 @@
       <el-popover class="tooltip" content="Help" placement="bottom-end" :show-after="helpDelay"
         :teleported=false trigger="hover" popper-class="header-popper" >
         <template #reference>
-          <map-svg-icon icon="tooltips" class="header-icon" @click.native="startHelp()"/>
+          <map-svg-icon icon="tooltips" class="header-icon" @click="startHelp()"/>
         </template>
       </el-popover>
       <el-popover class="tooltip"
         content="Fullscreen" placement="bottom-end" :show-after="helpDelay"
         :teleported=false trigger="hover" popper-class="header-popper">
         <template #reference>
-          <map-svg-icon v-show="!isFullscreen" icon="fullScreen" class="header-icon" @click.native="onFullscreen"/>
+          <map-svg-icon v-show="!isFullscreen" icon="fullScreen" class="header-icon" @click="onFullscreen"/>
         </template>
       </el-popover>
       <el-popover class="tooltip"
@@ -97,7 +97,7 @@
         :teleported=false trigger="hover" popper-class="header-popper">
         <template #reference>
           <map-svg-icon v-show="isFullscreen" icon="closeFullScreen" class="header-icon"
-            @click.native="onFullscreen"/>
+            @click="onFullscreen"/>
         </template>
       </el-popover>
       <el-popover
@@ -145,7 +145,7 @@
           <map-svg-icon icon="permalink"
             ref="permalinkRef"
             class="header-icon"
-            @click.native="getShareLink"
+            @click="getShareLink"
             v-show="shareLink"
           />
         </template>
@@ -153,7 +153,7 @@
       <el-popover class="tooltip" content="Close" placement="bottom-end" :show-after="helpDelay"
         :teleported=false trigger="hover" popper-class="header-popper">
         <template #reference>
-          <map-svg-icon icon="close" class="header-icon" @click.native="close" v-show="showIcons"/>
+          <map-svg-icon icon="close" class="header-icon" @click="close" v-show="showIcons"/>
         </template>
       </el-popover>
 

package/src/components/SearchControls.vue

@@ -6,13 +6,13 @@
     <el-autocomplete class="search-box" placeholder="Search"
       v-model="searchText"
       :fetch-suggestions="fetchSuggestions"
-      @keyup.enter.native="$emit('search', searchText)"
+      @keyup.enter="$emit('search', searchText)"
       @select="$emit('search', $event.value)"
       :teleported=false
       popper-class="autocomplete-popper">
     </el-autocomplete>
     <map-svg-icon icon="magnifyingGlass" class="magnify"
-      @click.native="$emit('search', searchText)"/>
+      @click="$emit('search', searchText)"/>
     <div v-if="failedSearch" class="text not-found-text">
       '{{failedSearch}}' not found
     </div>

package/src/components/SplitFlow.vue

@@ -266,6 +266,9 @@ export default {
     resetApp: function () {
       this.setState(initialDefaultState());
     },
+    setIdToPrimaryPane: function (id) {
+      this.splitFlowStore.setIdToPrimaryPane(id);
+    },
     setState: function (state) {
       this.entriesStore.setAll(state.entries);
       //Support both old and new permalink.

package/src/components/viewers/MultiFlatmap.vue

@@ -312,7 +312,7 @@ export default {
           element: wrapperElement,
           className: "highlight-marker"
         });
-        this.settingsStore.updateFeaturedMarkerIdentifie({
+        this.settingsStore.updateFeaturedMarkerIdentifier({
           index,
           markerIdentifier,
         });

package/src/components/viewers/Plot.vue

@@ -1,25 +1,23 @@
 <template>
-  <!--
   <PlotVuer
     :data-source="entry.resource.dataSource"
     :metadata="entry.resource.metadata"
     :supplemental-data="entry.resource.supplementalData"
     style="overflow: hidden"
   />
-  -->
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-//import { PlotVuer } from "@abi-software/plotvuer";
-//import "@abi-software/plotvuer/dist/plotvuer.css";
+import { PlotVuer } from "@abi-software/plotvuer";
+import "@abi-software/plotvuer/dist/style.css";
 import ContentMixin from "../../mixins/ContentMixin";
 
 export default {
   name: "Plot",
   mixins: [ ContentMixin ],
   components: {
- //   PlotVuer,
+    PlotVuer,
   }
 };
 </script>

package/src/components/viewers/Simulation.vue

@@ -1,23 +1,21 @@
 <template>
-  <!--
   <SimulationVuer
     :apiLocation="apiLocation"
     :id="entry.discoverId"
   />
-  -->
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 import ContentMixin from "../../mixins/ContentMixin";
-//import { SimulationVuer } from "@abi-software/simulationvuer";
-//import "@abi-software/simulationvuer/dist/simulationvuer.css";
+import { SimulationVuer } from "@abi-software/simulationvuer";
+import "@abi-software/simulationvuer/dist/style.css";
 
 export default {
   name: "Simulation",
   mixins: [ ContentMixin ],
   components: {
-  //  SimulationVuer,
+    SimulationVuer,
   },
 };
 </script>

package/src/mixins/ContentMixin.js

@@ -386,7 +386,7 @@ export default {
   },
   data: function () {
     return {
-      apiLocation: process.env.VUE_APP_API_LOCATION,
+      apiLocation: undefined,
       activeSpecies: "Rat",
       scaffoldCamera: undefined,
       mainStyle: {

package/vite.config.js

@@ -44,6 +44,7 @@ export default defineConfig(({ command, mode }) => {
         output: {
           globals: {
             vue: "Vue",
+            pinia: "pinia"
           },
         },
       },

package/vite.static-build.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import rootConfig from './vite.config.js'
+
+// defineWorkspace provides a nice type hinting DX
+export default defineConfig((configEnv) => {
+  const config = rootConfig(configEnv);
+  config.build = {
+    outDir: "test-html"
+  };
+
+  return config;
+})

package/vitest.workspace.js

@@ -0,0 +1,3 @@
+export default [
+  'test/vitest.config.js'
+]

package/src/assets/missing-image.svg

@@ -1 +0,0 @@
-<svg width="429" height="238" viewBox="0 0 429 238" xmlns="http://www.w3.org/2000/svg"><title>missing-image-4x3</title><g fill-rule="nonzero" fill="none"><path d="M0 0h429v238H0z" fill="#F0F1F2"/><path d="M160.875 79v77.7h107.25V79h-107.25zm101.888 4.9v39.8l-28.85-26.1-28.744 26.8-14.693-13.7-24.239 22.7V83.9h96.525zm-96.525 56.5l24.345-22.7 36.358 33.9h-60.704v-11.2zm68.21 11.3l-25.525-23.8 24.99-23.3 28.85 26.1v21h-28.314z" fill="#DCDDDF"/></g></svg>

package/vue.config.js

@@ -1,48 +0,0 @@
-const nodeExternals = require('webpack-node-externals');
-
-module.exports = {
-  pluginOptions: {
-    webpackBundleAnalyzer: {
-      openAnalyzer: false
-    }
-  },
-    chainWebpack: config => {
-      // GraphQL Loader
-      config.module
-        .rule('shader')
-        .test(/\.(vs|fs)$/i)
-        .use('raw-loader')
-          .loader('raw-loader')
-          .end()
-      const fontsRule = config.module.rule('fonts')
-      fontsRule.uses.clear()
-      config.module
-        .rule('fonts')
-        .test(/\.(ttf|otf|eot|woff|woff2)$/)
-        .use('base64-inline-loader')
-        .loader('base64-inline-loader')
-        .tap(options => {
-          // modify the options...
-          return options
-        })
-        .end()
-    },
-    devServer: {
-      disableHostCheck: true
-  },
-  configureWebpack: config => {
-    if(process.env.NODE_ENV === 'production') {
-      //By including element-ui and all abi projects, the problem with element-ui
-      //stylesheet can be avoided.
-      config.externals =  [ nodeExternals({allowlist: [/^element-ui/, /^@abi-software/, /^marked/, /^maplibre-gl/ ]}) ];
-    }
-  },
-  css: {
-    //Import variables into all stylesheets.
-    loaderOptions: {
-      sass: {
-        prependData: `@import '@/assets/styles';`
-      }
-    }
-  }
-}