@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-beta.0

package/src/{main.js → main.ts}

@@ -5,6 +5,7 @@ import {
   h,
 } from 'vue'
 import { createWebComponent } from 'vue-web-component-wrapper'
+
 import app from './App.vue'
 
 createWebComponent({

package/src/mixins/geojsonsvg.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Type declarations for geojsonsvg.js mixin
+ *
+ * This mixin is adapted from mapshaper and provides GeoJSON to SVG conversion.
+ * The implementation remains in JavaScript for stability.
+ */
+
+import type { ComponentOptionsMixin } from 'vue'
+
+export interface GeoJSONFeature {
+  type: 'Feature'
+  id?: string
+  geometry: GeoJSONGeometry | null
+  properties: Record<string, unknown>
+}
+
+export interface GeoJSONGeometry {
+  type: string
+  coordinates?: unknown
+  geometries?: GeoJSONGeometry[]
+}
+
+export interface GeoJSONFeatureCollection {
+  type: 'FeatureCollection'
+  features: GeoJSONFeature[]
+  totalFeatures?: number
+  crs?: {
+    type: string
+    properties: {
+      name: string
+    }
+  }
+}
+
+export interface SVGExportOptions {
+  invert_y?: boolean
+  rfc7946?: boolean
+  v2?: boolean
+  width?: number
+  height?: number
+}
+
+declare const geojsonsvg: ComponentOptionsMixin & {
+  methods: {
+    /**
+     * Convert GeoJSON data to SVG string
+     */
+    geoJSONToSVG(
+      data: GeoJSONFeatureCollection,
+      width: number,
+      height: number,
+      options?: SVGExportOptions
+    ): string
+  }
+}
+
+export default geojsonsvg

package/src/mixins/geojsonsvg.js

@@ -2933,7 +2933,7 @@ export default {
     },
     copyDataset(dataset) {
       const d2 = extendUtil({}, dataset)
-      d2.layers = d2.layers.map(this.copyLayer)
+      d2.layers = d2.layers.map((lyr) => this.copyLayer(lyr))
       if (d2.arcs) {
         d2.arcs = d2.arcs.getFilteredCopy()
       }
@@ -2960,7 +2960,7 @@ export default {
       })
     },
     cloneShapes(arr) {
-      return Array.isArray(arr) ? arr.map(this.cloneShape) : null
+      return Array.isArray(arr) ? arr.map((shp) => this.cloneShape(shp)) : null
     },
     pluck(arr, key) {
       return arr.map(function (obj) {
@@ -3140,7 +3140,9 @@ export default {
           svg += obj.value
         }
         if (obj.children) {
-          svg += obj.children.map(this.stringify).join(joinStr)
+          svg += obj.children
+            .map((child) => this.stringify(child))
+            .join(joinStr)
         }
         svg += joinStr + '</' + obj.tag + '>'
       } else {

package/src/plugins/index.ts

@@ -0,0 +1,5 @@
+import type { App } from 'vue'
+
+export const pluginsWrapper = {
+  install(_app: App): void {},
+}

package/src/scss/_utilities.scss

@@ -0,0 +1,193 @@
+// Responsive display utilities
+.mobile-only {
+  display: block;
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.desktop-only {
+  display: none;
+  @media (min-width: 768px) {
+    display: block;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+// Medium breakpoint and up (768px+)
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none !important;
+  }
+
+  .d-md-block {
+    display: block !important;
+  }
+
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+}
+
+// Display inline
+.d-inline {
+  display: inline !important;
+}
+
+// For screen readers
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Accessibility utilities
+.visually-hidden-focusable {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+
+  &:focus,
+  &:focus-within {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    overflow: visible !important;
+    clip: auto !important;
+    white-space: normal !important;
+  }
+}
+
+.focus-ring {
+  outline: none;
+
+  &:focus {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+  }
+}
+
+// Small breakpoint specific (576px+)
+@media (min-width: 576px) {
+  .d-sm-block {
+    display: block !important;
+  }
+
+  .d-sm-none {
+    display: none !important;
+  }
+}
+
+// Spacing utilities
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+// Position utilities
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+// Grid/Layout utilities
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Tab navigation utilities
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-tabs {
+  border-bottom: none;
+}
+
+.nav-item {
+  margin-bottom: 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 0;
+  text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+
+    &.active,
+    &.show {
+      display: block;
+    }
+  }
+
+  .spinner-border {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border-animation 0.75s linear infinite;
+  }
+
+  @keyframes spinner-border-animation {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+}

package/src/scss/constants.scss

@@ -35,7 +35,8 @@ $popup-width: 250px;
   font-family: 'Noto Sans';
   font-weight: normal;
   font-style: normal;
-  src: url($font-base-path + 'Noto_Sans/Noto-Sans-regular.woff2') format('woff2');
+  src: url($font-base-path + 'Noto_Sans/Noto-Sans-regular.woff2')
+    format('woff2');
   font-display: swap;
 }
 $font-family: Roboto, Helvetica, Arial, 'Noto Sans', sans-serif;

package/src/scss/warningImages.scss

@@ -1,8 +1,9 @@
-@import "./constants.scss";
+@use 'sass:string';
+@import './constants.scss';
 
 @for $i from 0 through 72 {
   $angle: 5 * $i;
-  $rotationDegree: unquote($angle + 'deg');
+  $rotationDegree: string.unquote($angle + 'deg');
   .transform-rotate-#{$angle} {
     transform: rotate($rotationDegree);
   }
@@ -101,7 +102,11 @@ div.symbol-image {
 }
 
 @media (forced-colors: active) {
-  .level-0, .level-1, .level-2, .level-3, .level-4 {
+  .level-0,
+  .level-1,
+  .level-2,
+  .level-3,
+  .level-4 {
     forced-color-adjust: none;
   }
 }