@fmidev/smartmet-alert-client 4.0.9 → 4.1.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fmidev/smartmet-alert-client",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "description": "Web application for viewing weather and flood alerts",
   "author": "Finnish Meteorological Institute",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "type": "module",
   "repository": {
     "type": "git",
@@ -49,8 +49,9 @@
     "prettier": "3.1.1",
     "rollup-plugin-visualizer": "5.11.0",
     "unplugin-vue-components": "0.26.0",
-    "vite": "5.1.4",
+    "vite": "5.1.7",
     "vite-plugin-banner": "0.7.1",
+    "vite-plugin-static-copy": "1.0.2",
     "vitest": "0.34.4"
   },
   "eslintConfig": {

package/src/components/Days.vue

@@ -49,9 +49,11 @@
 <script>
 import DayLarge from './DayLarge.vue'
 import DaySmall from './DaySmall.vue'
+import keycodes from '../mixins/keycodes'
 
 export default {
   name: 'Days',
+  mixins: [keycodes],
   components: {
     DaySmall,
     DayLarge,
@@ -117,6 +119,29 @@ export default {
       this.onDaySelected(newSelectedDay)
     },
   },
+  mounted() {
+    const button = Array.from(this.$el.querySelectorAll('button.day')).forEach(
+      (button) => {
+        button.addEventListener('keydown', this.switchDay, true)
+      }
+    )
+  },
+  beforeUnmount() {
+    const button = Array.from(this.$el.querySelectorAll('button.day')).forEach(
+      (button) => {
+        button.removeEventListener('keydown', this.switchDay, true)
+      }
+    )
+  },
+  updated() {
+    Array.from(this.$el.querySelectorAll('button.day')).forEach((button) => {
+      if (button.classList.contains('active')) {
+        button.removeAttribute('tabindex')
+      } else {
+        button.setAttribute('tabindex', -1)
+      }
+    })
+  },
   methods: {
     onDaySelected(newSelectedDay) {
       this.$emit('daySelected', newSelectedDay)
@@ -126,6 +151,23 @@ export default {
         this.$emit('loaded', true)
       }
     },
+    switchDay(event) {
+      switch (event.keyCode) {
+        case this.KEY_CODE_LEFT:
+          this.day = Math.max(this.day - 1, 0)
+          break
+        case this.KEY_CODE_RIGHT:
+          this.day = Math.min(this.day + 1, 4)
+          break
+        case this.KEY_CODE_HOME:
+          this.day = 0
+          break
+        case this.KEY_CODE_END:
+          this.day = 4
+          break
+      }
+      this.$el.querySelector(`button.day.day${this.day}`).focus()
+    },
   },
 }
 </script>
@@ -175,8 +217,9 @@ div#fmi-warnings-date-selector.tabs {
   color: transparent;
 }
 
-button.day div.date-selector-cell {
-  overflow-x: hidden;
+:deep(button.day div.date-selector-cell) {
+  height: $day-small-height;
+  overflow: hidden;
 }
 
 :deep(button.day) {

package/src/components/GrayScaleToggle.vue

@@ -28,7 +28,7 @@ export default {
   props: {
     language: {
       type: String,
-      default: import.meta.env.VUE_APP_I18N_LOCALE || 'en',
+      default: import.meta.env.VITE_LANGUAGE || 'fi',
     },
     grayScaleSelector: {
       type: Boolean,

package/src/components/Legend.vue

@@ -76,7 +76,7 @@ export default {
     },
     language: {
       type: String,
-      default: import.meta.env.VUE_APP_I18N_LOCALE || 'en',
+      default: import.meta.env.VITE_LANGUAGE || 'fi',
     },
     grayScaleSelector: {
       type: Boolean,

package/src/components/RegionWarning.vue

@@ -42,6 +42,10 @@ div.warning-image {
   background-position: center;
 }
 
+.light-gray-theme div.warning-image {
+  border: 1px solid $light-gray-border;
+}
+
 .current-warning-image {
   background-size: 28px 28px;
   height: $current-warning-image-height;

package/src/components/Warning.vue

@@ -110,7 +110,7 @@ div.warning-image {
 }
 
 .light-gray-theme div.warning-image {
-  border: 1px solid $black;
+  border: 1px solid $light-gray-border;
 }
 
 .dark-gray-theme div.warning-image {

package/src/components/Warnings.vue

@@ -295,7 +295,7 @@ div.warning-image {
 }
 
 .light-gray-theme div.warning-image {
-  border: 1px solid $black;
+  border: 1px solid $light-gray-border;
 }
 
 .dark-gray-theme div.warning-image {

package/src/mixins/keycodes.js

@@ -0,0 +1,10 @@
+export default {
+  data() {
+    return {
+      KEY_CODE_END: 35,
+      KEY_CODE_HOME: 36,
+      KEY_CODE_LEFT: 37,
+      KEY_CODE_RIGHT: 39,
+    }
+  },
+}

package/src/scss/themes/light-gray.scss

@@ -32,3 +32,4 @@ $light-gray-green-shadow: $light-gray;
 $light-gray-yellow-shadow: $light-gray;
 $light-gray-orange-shadow: $light-gray;
 $light-gray-red-shadow: $light-gray;
+$light-gray-border: #666666;

package/vite.config.js

@@ -6,6 +6,7 @@ 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 { viteStaticCopy } from 'vite-plugin-static-copy'
 
 import pkg from './package.json'
 
@@ -22,6 +23,15 @@ export default defineConfig({
       `/**\n * name: ${pkg.name}\n * version: v${pkg.version}\n * description: ${pkg.description}\n * author: ${pkg.author}\n * homepage: ${pkg.homepage}\n */`
     ),
     visualizer(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'dist/index.mjs',
+          dest: './',
+          rename: 'index.js',
+        }
+      ]
+    })
   ],
   resolve: {
     alias: {
@@ -36,9 +46,7 @@ export default defineConfig({
     minify: true,
     rollupOptions: {
       output: {
-        entryFileNames: `[name].js`,
-        chunkFileNames: `[name].js`,
-        assetFileNames: `[name].[ext]`,
+        entryFileNames: 'index.mjs',
       },
     },
   },