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

package/src/components/CollapsiblePanel.vue

@@ -0,0 +1,281 @@
+<template>
+  <div :class="['collapsible-panel', theme, 'mobile-only']">
+    <div class="panel-header">
+      <div class="panel-title">
+        <span class="panel-text">
+          {{ title }}
+        </span>
+      </div>
+      <button
+        :class="['panel-toggle', visible ? '' : 'collapsed']"
+        :aria-expanded="visible"
+        :aria-label="title"
+        @click="onToggle"></button>
+    </div>
+    <Transition name="collapse">
+      <div v-if="visible" class="panel-body">
+        <div class="panel-content">
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Props
+withDefaults(
+  defineProps<{
+    visible?: boolean
+    title?: string
+    theme?: string
+  }>(),
+  {
+    visible: false,
+    title: '',
+    theme: 'light-theme',
+  }
+)
+
+// Emits
+const emit = defineEmits<{
+  toggle: []
+}>()
+
+// Methods
+function onToggle(): void {
+  emit('toggle')
+}
+</script>
+
+<style scoped lang="scss">
+@import '../scss/constants.scss';
+
+.collapsible-panel {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0.25rem;
+  border-radius: 0;
+}
+
+.light-theme.collapsible-panel {
+  border: 0.5px solid $light-legend-background-color;
+}
+
+.dark-theme.collapsible-panel {
+  border: 0.5px solid $dark-legend-background-color;
+}
+
+.light-gray-theme.collapsible-panel {
+  border: 0.5px solid $light-gray-legend-background-color;
+}
+
+.dark-gray-theme.collapsible-panel {
+  border: 0.5px solid $dark-gray-legend-background-color;
+}
+
+.panel-header {
+  height: $current-warning-height;
+  padding: 0 0 0 15px;
+  line-height: $current-warning-height;
+  border: none;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0;
+  position: relative;
+}
+
+.light-theme .panel-header {
+  background-color: $light-legend-heading-background-color;
+}
+
+.dark-theme .panel-header {
+  background-color: $dark-legend-heading-background-color;
+}
+
+.light-gray-theme .panel-header {
+  background-color: $light-gray-legend-heading-background-color;
+}
+
+.dark-gray-theme .panel-header {
+  background-color: $dark-gray-legend-heading-background-color;
+}
+
+.panel-title {
+  position: absolute;
+  left: 0;
+  right: 38px;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  height: $current-warning-height;
+}
+
+.light-theme .panel-title {
+  background: $light-legend-heading-background-color;
+}
+
+.dark-theme .panel-title {
+  background: $dark-legend-heading-background-color;
+}
+
+.light-gray-theme .panel-title {
+  background: $light-gray-legend-heading-background-color;
+}
+
+.dark-gray-theme .panel-title {
+  background: $dark-gray-legend-heading-background-color;
+}
+
+.panel-text {
+  display: block;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 15px;
+}
+
+.light-theme .panel-text {
+  background-color: $light-legend-heading-background-color;
+}
+
+.dark-theme .panel-text {
+  background-color: $dark-legend-heading-background-color;
+}
+
+.light-gray-theme .panel-text {
+  background-color: $light-gray-legend-heading-background-color;
+}
+
+.dark-gray-theme .panel-text {
+  background-color: $dark-gray-legend-heading-background-color;
+}
+
+button.panel-toggle {
+  position: relative;
+  height: $current-warning-height;
+  width: $current-warning-height;
+  min-width: $current-warning-height;
+  background-image: url($ui-image-path + 'arrow-up.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 0;
+  border-style: none;
+  float: right;
+  padding: $image-padding;
+  margin-left: 5px;
+  cursor: pointer;
+
+  &.collapsed {
+    background-image: url($ui-image-path + 'arrow-down.svg');
+    border-radius: 0 3px 3px 0;
+  }
+}
+
+.light-theme .panel-toggle {
+  background-color: $light-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $light-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $light-current-warning-toggle-active-color;
+  }
+}
+
+.dark-theme .panel-toggle {
+  background-color: $dark-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $dark-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $dark-current-warning-toggle-active-color;
+  }
+}
+
+.light-gray-theme .panel-toggle {
+  background-color: $light-gray-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $light-gray-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $light-gray-current-warning-toggle-active-color;
+  }
+}
+
+.dark-gray-theme .panel-toggle {
+  background-color: $dark-gray-legend-toggle-background-color;
+
+  &:hover {
+    background-color: $dark-gray-legend-toggle-background-color;
+  }
+
+  &:active {
+    background-color: $dark-gray-current-warning-toggle-active-color;
+  }
+}
+
+.panel-body {
+  overflow: hidden;
+}
+
+.panel-content {
+  padding: 15px;
+  border-radius: 0;
+}
+
+.light-theme .panel-content {
+  background-color: $light-legend-container-background-color;
+  border-top: 0.5px solid $light-legend-background-color;
+}
+
+.dark-theme .panel-content {
+  background-color: $dark-legend-container-background-color;
+  border-top: 0.5px solid $dark-legend-background-color;
+}
+
+.light-gray-theme .panel-content {
+  background-color: $light-gray-legend-container-background-color;
+  border-top: 0.5px solid $light-gray-legend-background-color;
+}
+
+.dark-gray-theme .panel-content {
+  background-color: $dark-gray-legend-container-background-color;
+  border-top: 0.5px solid $dark-gray-legend-background-color;
+}
+
+// Collapse transition
+.collapse-enter-active,
+.collapse-leave-active {
+  transition:
+    max-height 0.35s ease,
+    opacity 0.35s ease;
+  overflow: hidden;
+}
+
+.collapse-enter-from {
+  max-height: 0;
+  opacity: 0;
+}
+
+.collapse-enter-to {
+  max-height: 2000px;
+  opacity: 1;
+}
+
+.collapse-leave-from {
+  max-height: 2000px;
+  opacity: 1;
+}
+
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+</style>

package/src/components/DayLarge.vue

@@ -34,121 +34,157 @@
   </div>
 </template>
 
-<script>
-import i18n from '../mixins/i18n'
-import utils from '../mixins/utils'
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+import { twoDigits } from '@/composables/useUtils'
 import MapLarge from './MapLarge.vue'
+import type { Day, DayRegions, WarningsMap, Theme, Language } from '@/types'
 
-export default {
-  name: 'DayLarge',
-  components: { MapLarge },
-  mixins: [i18n, utils],
-  props: {
-    index: {
-      type: Number,
-    },
-    input: {
-      type: Object,
-      default: () => ({}),
-    },
-    visibleWarnings: {
-      type: Array,
-      default: () => [],
-    },
-    warnings: {
-      type: Object,
-      default: null,
-    },
-    regions: {
-      type: Object,
-    },
-    geometryId: {
-      type: Number,
-    },
-    staticDays: {
-      type: Boolean,
-      default: true,
-    },
-    timeOffset: {
-      type: Number,
-      default: 0,
-    },
-    loading: {
-      type: Boolean,
-      default: true,
-    },
-    theme: {
-      type: String,
-    },
-    language: {
-      type: String,
-    },
-    spinnerEnabled: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    warningsTitle() {
-      return this.t('warnings') || ''
-    },
-    updatedTitle() {
-      return this.t('updated') || ''
-    },
-    atTime() {
-      return this.t('atTime') || ''
-    },
-    warningsDate() {
-      if (
-        this.input.day == null ||
-        this.input.month == null ||
-        this.input.year == null
-      ) {
-        return ''
-      }
-      if (this.staticDays) {
-        return `${this.input.day}.${this.input.month}.${this.input.year}`
-      }
-      const date = new Date(
-        this.input.year,
-        this.input.month - 1,
-        this.input.day
-      )
-      const nextDate = new Date(date.getTime())
-      nextDate.setDate(nextDate.getDate() + 1)
-      const offset = this.timeOffset
-      const offsetDate = new Date(date.getTime())
-      offsetDate.setMilliseconds(offset)
-      const hours = this.twoDigits(offsetDate.getHours())
-      const minutes = this.twoDigits(offsetDate.getMinutes())
-      return `${this.input.day}.${this.input.month}.${this.input.year} ${
-        this.atTime
-      } ${hours}:${minutes} –
+// ============================================================================
+// Props
+// ============================================================================
+
+const props = withDefaults(
+  defineProps<{
+    index: number
+    input?: Day
+    visibleWarnings?: string[]
+    warnings?: WarningsMap | null
+    regions?: DayRegions
+    geometryId?: number
+    staticDays?: boolean
+    timeOffset?: number
+    loading?: boolean
+    theme?: Theme | string
+    language?: Language
+    spinnerEnabled?: boolean
+  }>(),
+  {
+    input: () => ({}) as Day,
+    visibleWarnings: () => [],
+    warnings: null,
+    regions: undefined,
+    geometryId: undefined,
+    staticDays: true,
+    timeOffset: 0,
+    loading: true,
+    theme: undefined,
+    language: undefined,
+    spinnerEnabled: true,
+  }
+)
+
+// ============================================================================
+// Emits
+// ============================================================================
+
+const emit = defineEmits<{
+  loaded: [value: boolean]
+}>()
+
+// ============================================================================
+// Composables
+// ============================================================================
+
+const { t } = useI18n(toRef(() => props.language))
+
+// ============================================================================
+// Computed Properties
+// ============================================================================
+
+const warningsTitle = computed<string>(() => {
+  return t('warnings') || ''
+})
+
+const updatedTitle = computed<string>(() => {
+  return t('updated') || ''
+})
+
+const atTime = computed<string>(() => {
+  return t('atTime') || ''
+})
+
+const warningsDate = computed<string>(() => {
+  if (
+    props.input?.day == null ||
+    props.input?.month == null ||
+    props.input?.year == null
+  ) {
+    return ''
+  }
+
+  if (props.staticDays) {
+    return `${props.input.day}.${props.input.month}.${props.input.year}`
+  }
+
+  const date = new Date(
+    props.input.year,
+    props.input.month - 1,
+    props.input.day
+  )
+  const nextDate = new Date(date.getTime())
+  nextDate.setDate(nextDate.getDate() + 1)
+
+  const offset = props.timeOffset
+  const offsetDate = new Date(date.getTime())
+  offsetDate.setMilliseconds(offset)
+
+  const hours = twoDigits(offsetDate.getHours())
+  const minutes = twoDigits(offsetDate.getMinutes())
+
+  return `${props.input.day}.${props.input.month}.${props.input.year} ${
+    atTime.value
+  } ${hours}:${minutes} –
       <br> ${nextDate.getDate()}.${
         nextDate.getMonth() + 1
-      }.${nextDate.getFullYear()} ${this.atTime} ${hours}:${minutes}`
-    },
-    updatedDate() {
-      return this.input.updatedDate || ''
-    },
-    updatedTime() {
-      return this.input.updatedTime || ''
-    },
-    dataProviderFirst() {
-      return this.t('dataProviderFirst')
-    },
-    dataProviderSecond() {
-      return this.t('dataProviderSecond')
-    },
-  },
-  methods: {
-    onLoaded(loaded) {
-      if (loaded) {
-        this.$emit('loaded', true)
-      }
-    },
-  },
+      }.${nextDate.getFullYear()} ${atTime.value} ${hours}:${minutes}`
+})
+
+const updatedDate = computed<string>(() => {
+  return props.input?.updatedDate || ''
+})
+
+const updatedTime = computed<string>(() => {
+  return props.input?.updatedTime || ''
+})
+
+const dataProviderFirst = computed<string>(() => {
+  return t('dataProviderFirst')
+})
+
+const dataProviderSecond = computed<string>(() => {
+  return t('dataProviderSecond')
+})
+
+// ============================================================================
+// Methods
+// ============================================================================
+
+const onLoaded = (loaded: boolean): void => {
+  if (loaded) {
+    emit('loaded', true)
+  }
 }
+
+// ============================================================================
+// Expose for tests
+// ============================================================================
+
+defineExpose({
+  warningsTitle,
+  updatedTitle,
+  atTime,
+  warningsDate,
+  updatedDate,
+  updatedTime,
+  dataProviderFirst,
+  dataProviderSecond,
+  onLoaded,
+  // Props exposed for tests
+  input: computed(() => props.input),
+  spinnerEnabled: computed(() => props.spinnerEnabled),
+})
 </script>
 
 <style scoped lang="scss">