@fmidev/smartmet-alert-client 4.0.0 → 4.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fmidev/smartmet-alert-client",
-  "version": "4.0.0",
+  "version": "4.0.5",
   "description": "Web application for viewing weather and flood alerts",
   "author": "Finnish Meteorological Institute",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "svgpath": "2.6.0",
     "url-search-params-polyfill": "8.2.5",
     "vue": "3.4.19",
+    "vue-web-component-wrapper": "1.4.0",
     "xpath": "0.0.33"
   },
   "devDependencies": {
@@ -50,8 +51,7 @@
     "unplugin-vue-components": "0.26.0",
     "vite": "5.1.4",
     "vite-plugin-banner": "0.7.1",
-    "vitest": "0.34.4",
-    "vue-adopted-stylesheets": "0.0.7"
+    "vitest": "0.34.4"
   },
   "eslintConfig": {
     "env": {
@@ -64,7 +64,9 @@
       "plugin:sonarjs/recommended",
       "plugin:prettier/recommended"
     ],
-    "plugins": ["simple-import-sort"],
+    "plugins": [
+      "simple-import-sort"
+    ],
     "rules": {
       "simple-import-sort/imports": "error",
       "simple-import-sort/exports": "error"
@@ -89,5 +91,10 @@
     "npm": ">=8.0.0",
     "node": ">=14.0.0"
   },
-  "keywords": ["smartmet", "weather", "alert", "wfs"]
+  "keywords": [
+    "smartmet",
+    "weather",
+    "alert",
+    "wfs"
+  ]
 }

package/src/components/MapLarge.vue

@@ -620,7 +620,7 @@ export default {
   mounted() {
     if (this.isClientSide()) {
       const finlandLarge = this.$el.querySelector('svg#finland-large')
-      if (finlandLarge != null) {
+      if (this.isAttached(finlandLarge)) {
         this.panzoom = Panzoom(finlandLarge, {
           disableZoom: true,
           panOnlyWhenZoomed: true,
@@ -886,6 +886,18 @@ export default {
         this.panzoom.pan(pan.x, pan.y)
       }
     },
+    isAttached(node) {
+      let currentNode = node
+      while (currentNode != null && currentNode.parentNode != null) {
+        if (currentNode.parentNode === document) {
+          return true
+        }
+        currentNode = currentNode.parentNode instanceof ShadowRoot
+          ? currentNode.parentNode.host
+          : currentNode.parentNode
+      }
+      return false
+    }
   },
 }
 </script>
@@ -1077,14 +1089,12 @@ div.day-map-large
 
 .light-theme .fmi-warnings-popup {
   background-color: $light-popup-background-color;
-  -webkit-filter: drop-shadow(0 1px 4px $light-popup-filter-color);
-  filter: drop-shadow(0 1px 4px $light-popup-filter-color);
+  box-shadow: 0 0 0 1px $light-gray;
 }
 
 .dark-theme .fmi-warnings-popup {
   background-color: $dark-popup-background-color;
-  -webkit-filter: drop-shadow(0 1px 4px $dark-popup-filter-color);
-  filter: drop-shadow(0 1px 4px $dark-popup-filter-color);
+  box-shadow: 0 0 0 1px $light-gray;
 }
 
 :deep(.tooltip.bs-tooltip-top) {

package/src/components/MapSmall.vue

@@ -212,10 +212,7 @@ export default {
         : []
     },
     isFullMode() {
-      if (!this.isClientSide()) {
-        return true
-      }
-      return this.$el != null && this.$el.offsetParent !== null
+      return true;
     },
   },
 }

package/src/components/Warning.vue

@@ -109,20 +109,12 @@ div.warning-image {
   background-position: center;
 }
 
-.light-theme div.warning-image {
-  box-shadow: 0 0 0 1px transparent;
-}
-
-.dark-theme div.warning-image {
-  box-shadow: 0 0 0 1px transparent;
-}
-
 .light-gray-theme div.warning-image {
-  box-shadow: 0 0 0 1px $black;
+  border: 1px solid $black;
 }
 
 .dark-gray-theme div.warning-image {
-  box-shadow: 0 0 0 1px $white;
+  border: 1px solid $white;
 }
 
 div.symbol-list-cell-text {

package/src/components/Warnings.vue

@@ -294,20 +294,12 @@ div.warning-image {
   background-position: center;
 }
 
-.light-theme div.warning-image {
-  box-shadow: 0 0 0 1px transparent;
-}
-
-.dark-theme div.warning-image {
-  box-shadow: 0 0 0 1px transparent;
-}
-
 .light-gray-theme div.warning-image {
-  box-shadow: 0 0 0 1px $black;
+  border: 1px solid $black;
 }
 
 .dark-gray-theme div.warning-image {
-  box-shadow: 0 0 0 1px $white;
+  border: 1px solid $white;
 }
 
 div.symbol-list-cell-text {

package/src/main.js

@@ -1,18 +1,17 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import {
+  createApp,
+  defineCustomElement as VueDefineCustomElement,
+  getCurrentInstance,
+  h,
+} from 'vue'
+import { createWebComponent } from 'vue-web-component-wrapper'
+import app from './App.vue'
 
-class SmartMetAlertClient extends HTMLElement {
-  constructor() {
-    super()
-    const app = createApp(
-      App,
-      [...this.attributes].reduce((newObject, item) => {
-        newObject[item.nodeName] = item.nodeValue
-        return newObject
-      }, {})
-    )
-    app.mount(this.attachShadow({ mode: 'open' }))
-  }
-}
-
-customElements.define('smartmet-alert-client', SmartMetAlertClient)
+createWebComponent({
+  rootComponent: app,
+  elementName: 'smartmet-alert-client',
+  VueDefineCustomElement,
+  h,
+  createApp,
+  getCurrentInstance,
+})

package/vite.config.js

@@ -6,7 +6,6 @@ import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import banner from 'vite-plugin-banner'
-import { vueAdoptedStylesheetsPlugin } from 'vue-adopted-stylesheets'
 
 import pkg from './package.json'
 
@@ -19,7 +18,6 @@ export default defineConfig({
     Components({
       resolvers: [BootstrapVueNextResolver()],
     }),
-    vueAdoptedStylesheetsPlugin(),
     banner(
       `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`
     ),