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

package/src/components/DescriptionWarning.vue

@@ -3,8 +3,7 @@
     <div class="current-description-image-cell" aria-hidden="true">
       <div
         :class="`current-description-image warning-image symbol-image transform-rotate-${rotation} level-${input.severity} ${typeClass}`"
-        :aria-label="`${warningLevel} ${warningTitle.toLowerCase()}${warningDetails}`"
-      >
+        :aria-label="`${warningLevel} ${warningTitle.toLowerCase()}${warningDetails}`">
         <span
           :class="`symbol-text transform-rotate-${invertedRotation} region-warning-symbol-text`"
           >{{ input.text }}</span
@@ -38,42 +37,68 @@
   </div>
 </template>
 
-<script>
-import fields from '../mixins/fields'
-import i18n from '../mixins/i18n'
-import utils from '../mixins/utils'
-
-export default {
-  name: 'DescriptionWarning',
-  mixins: [fields, i18n, utils],
-  props: ['input', 'language', 'theme'],
-  computed: {
-    warningTitle() {
-      return this.t(this.input.type)
-    },
-    warningLevel() {
-      return this.t(`warningLevel${this.input.severity}`)
-    },
-    warningDetails() {
-      if (this.input.text == null || this.input.direction == null) {
-        return ''
-      }
-      return ` (${this.input.text} m/s ${this.t("fromDirection")} ${this.input.direction + 180}°)`
-    },
-    info() {
-      return this.input.info[this.language]
-    },
-    validText() {
-      return this.t('valid')
-    },
-    linkHidden() {
-      return this.input.link == null || this.input.link.length === 0
-    },
-    description() {
-      return this.t(`${this.input.type}DescriptionLevel${this.input.severity}`)
-    },
-  },
-}
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useFields } from '@/composables/useFields'
+import { useI18n } from '@/composables/useI18n'
+import type { Warning, Language } from '@/types'
+
+// Props
+const props = defineProps<{
+  input: Warning
+  language?: Language | string
+  theme?: string
+}>()
+
+// Composables
+const { typeClass, rotation, invertedRotation, severity } = useFields(
+  toRef(props, 'input')
+)
+const { t } = useI18n(toRef(props, 'language'))
+
+// Expose for testing
+defineExpose({
+  severity,
+})
+
+// Computed
+const warningTitle = computed((): string => {
+  return t(props.input.type)
+})
+
+const warningLevel = computed((): string => {
+  return t(`warningLevel${props.input.severity}`)
+})
+
+const warningDetails = computed((): string => {
+  if (
+    props.input.text == null ||
+    props.input.text === '' ||
+    props.input.direction == null
+  ) {
+    return ''
+  }
+  return ` (${props.input.text} m/s ${t('fromDirection')} ${
+    props.input.direction + 180
+  }°)`
+})
+
+const info = computed((): string => {
+  const lang = props.language as Language
+  return props.input.info[lang] ?? ''
+})
+
+const validText = computed((): string => {
+  return t('valid')
+})
+
+const linkHidden = computed((): boolean => {
+  return props.input.link == null || props.input.link.length === 0
+})
+
+const description = computed((): string => {
+  return t(`${props.input.type}DescriptionLevel${props.input.severity}`)
+})
 </script>
 
 <style scoped lang="scss">

package/src/components/GrayScaleToggle.vue

@@ -16,65 +16,69 @@
         @click="toggleGrayScale"
         @keydown.enter="toggleGrayScale"
         @keydown.space="toggleGrayScale">
-          <span>
-            {{ toggleText }}
-          </span>
-        </div>
+        <span>
+          {{ toggleText }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
-import i18n from '../mixins/i18n'
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useI18n } from '@/composables/useI18n'
 
-export default {
-  name: 'GrayScaleToggle',
-  mixins: [i18n],
-  props: {
-    language: {
-      type: String,
-      default: import.meta.env.VITE_LANGUAGE || 'fi',
-    },
-    grayScaleSelector: {
-      type: Boolean,
-      default: false,
-    },
-    theme: {
-      type: String,
-      default: 'light-theme',
-    },
-  },
-  computed: {
-    grayScale() {
-      if (this.theme == null || this.theme.length === 0) {
-        return false
-      }
-      const themeParts = this.theme.split('-')
-      return themeParts.length > 1 && themeParts[1] === 'gray'
-    },
-    grayScaleText() {
-      return this.t('grayScale')
-    },
-    toggleText() {
-      return this.grayScale ? this.t('toggleOn') : this.t('toggleOff')
-    },
-  },
-  methods: {
-    toggleGrayScale(event) {
-      event.preventDefault()
-      if (this.theme == null || this.theme.length === 0) {
-        return
-      }
-      const baseTheme = this.theme.split('-')[0]
-      this.$emit(
-        'themeChanged',
-        this.grayScale ? baseTheme : `${baseTheme}-gray`
-      )
-    },
-    preventEvents(event) {
-      event.preventDefault()
-    },
-  },
+// Props
+const props = withDefaults(
+  defineProps<{
+    language?: string
+    grayScaleSelector?: boolean
+    theme?: string
+  }>(),
+  {
+    language: import.meta.env.VITE_LANGUAGE || 'fi',
+    grayScaleSelector: false,
+    theme: 'light-theme',
+  }
+)
+
+// Emits
+const emit = defineEmits<{
+  themeChanged: [theme: string]
+}>()
+
+// Composables
+const { t } = useI18n(toRef(props, 'language'))
+
+// Computed
+const grayScale = computed((): boolean => {
+  if (props.theme == null || props.theme.length === 0) {
+    return false
+  }
+  const themeParts = props.theme.split('-')
+  return themeParts.length > 1 && themeParts[1] === 'gray'
+})
+
+const grayScaleText = computed((): string => {
+  return t('grayScale')
+})
+
+const toggleText = computed((): string => {
+  return grayScale.value ? t('toggleOn') : t('toggleOff')
+})
+
+// Methods
+function toggleGrayScale(event: Event): void {
+  event.preventDefault()
+  if (props.theme == null || props.theme.length === 0) {
+    return
+  }
+  const baseTheme = props.theme.split('-')[0] ?? 'light'
+  emit('themeChanged', grayScale.value ? baseTheme : `${baseTheme}-gray`)
+}
+
+function preventEvents(event: Event): void {
+  event.preventDefault()
 }
 </script>