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

package/src/components/Legend.vue

@@ -5,378 +5,155 @@
       :language="language"
       :gray-scale-selector="grayScaleSelector"
       :theme="theme"
-      @themeChanged="onThemeChanged" />
+      @theme-changed="onThemeChanged" />
     <div class="row symbol-list-header-row">
       <nav class="symbol-list-header bold-text">
         {{ warningSymbolsText }}
         <br v-if="input.length > 0" class="symbol-list-header-line-break" />
       </nav>
     </div>
-    <b-card no-body class="mb-1 d-md-none legends-panel">
-      <b-card-header header-tag="header" class="legends-heading p-1">
-        <div class="legends-header">
-          <span class="legends-text">
-            {{ toggleLegendsText }}
-          </span>
-        </div>
-        <b-button
-          block
-          :class="['legends-toggle', visible ? '' : 'collapsed']"
-          :aria-label="toggleLegendsText"
-          @click="onLegendToggle" />
-      </b-card-header>
-      <b-collapse
-        id="legends-collapse"
-        v-model="visible"
-        class="legends-collapse-item focus-ring"
-        tabindex="0">
-        <b-card-body body-class="p-0">
-          <div class="legends-container">
-            <Warnings
-              :input="input"
-              :visible-warnings="visibleWarnings"
-              :theme="theme"
-              :language="language" />
-          </div>
-        </b-card-body>
-      </b-collapse>
-    </b-card>
-    <div ref="warningsContainer" class="d-md-block d-none">
+    <CollapsiblePanel
+      :visible="visible"
+      :title="toggleLegendsText"
+      :theme="theme"
+      @toggle="onLegendToggle">
+      <Warnings
+        :input="input"
+        :visible-warnings="visibleWarnings"
+        :theme="theme"
+        :language="language" />
+    </CollapsiblePanel>
+    <div ref="warningsContainer" class="desktop-only">
       <Warnings
         :input="input"
         :visible-warnings="visibleWarnings"
         :theme="theme"
         :language="language"
-        @warningsToggled="onWarningsToggled"
-        @showAllWarnings="onShowAllWarnings" />
+        @warnings-toggled="onWarningsToggled"
+        @show-all-warnings="onShowAllWarnings" />
     </div>
     <GrayScaleToggle
       :language="language"
       :gray-scale-selector="grayScaleSelector"
       :theme="theme"
-      @themeChanged="onThemeChanged" />
+      @theme-changed="onThemeChanged" />
   </div>
 </template>
 
-<script>
-import { onMounted, onUnmounted, ref } from 'vue'
+<script setup lang="ts">
+import { ref, computed, watch, toRef, onMounted, onUnmounted } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+import type { LegendItem, Language } from '@/types'
 
-import i18n from '../mixins/i18n'
+import CollapsiblePanel from './CollapsiblePanel.vue'
+import GrayScaleToggle from './GrayScaleToggle.vue'
 import Warnings from './Warnings.vue'
 
-export default {
-  name: 'Legend',
-  components: {
-    Warnings,
-  },
-  mixins: [i18n],
-  props: {
-    input: {
-      type: Array,
-      default: () => [],
-    },
-    language: {
-      type: String,
-      default: import.meta.env.VITE_LANGUAGE || 'fi',
-    },
-    grayScaleSelector: {
-      type: Boolean,
-      default: false,
-    },
-    theme: {
-      type: String,
-      default: 'light-theme',
-    },
-    visibleWarnings: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup() {
-    const windowWidth = ref(window.innerWidth)
-    const updateWidth = () => {
-      windowWidth.value = window.innerWidth
-    }
-    onMounted(() => {
-      window.addEventListener('resize', updateWidth)
-    })
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateWidth)
-    })
-    return { windowWidth }
-  },
-  data() {
-    return {
-      visible: false,
-    }
-  },
-  computed: {
-    warnings() {
-      return this.input
-    },
-    warningSymbolsText() {
-      return this.t('legends')
-    },
-    toggleLegendsText() {
-      return this.visible ? this.t('hideLegends') : this.t('showLegends')
-    },
-  },
-  watch: {
-    windowWidth() {
-      if (this.$refs.warningsContainer.clientHeight === 0) {
-        this.onShowAllWarnings()
-      }
-    },
-  },
-  methods: {
-    onLegendToggle() {
-      this.visible = !this.visible
-    },
-    onWarningsToggled(newVisibleWarnings) {
-      this.$emit('warningsToggled', newVisibleWarnings)
-    },
-    onShowAllWarnings() {
-      this.$emit(
-        'warningsToggled',
-        this.warnings.reduce(
-          (types, warning) => types.concat([warning.type]),
-          []
-        )
-      )
-    },
-    onThemeChanged(newTheme) {
-      if (this.theme !== newTheme) {
-        this.$emit('themeChanged', newTheme)
-      }
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-@import '../scss/constants.scss';
-
-div.symbol-list-header-row {
-  padding-left: 0;
-  padding-right: 0;
-  padding-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  span {
-    white-space: nowrap;
+// Props
+const props = withDefaults(
+  defineProps<{
+    input?: LegendItem[]
+    language?: Language
+    grayScaleSelector?: boolean
+    theme?: string
+    visibleWarnings?: string[]
+  }>(),
+  {
+    input: () => [],
+    language: (import.meta.env.VITE_LANGUAGE as Language) || 'fi',
+    grayScaleSelector: false,
+    theme: 'light-theme',
+    visibleWarnings: () => [],
   }
-}
-
-.legends-panel {
-  margin-left: 0;
-  margin-right: 0;
-  border-radius: 0;
-}
-
-.light-theme .legends-panel {
-  border: 0.5px solid $light-legend-background-color;
-}
-
-.dark-theme .legends-panel {
-  border: 0.5px solid $dark-legend-background-color;
-}
-
-.light-gray-theme .legends-panel {
-  border: 0.5px solid $light-gray-legend-background-color;
-}
-
-.dark-gray-theme .legends-panel {
-  border: 0.5px solid $dark-gray-legend-background-color;
-}
-
-.legends-heading {
-  height: $current-warning-height;
-  padding: 0 0 0 15px !important;
-  line-height: $current-warning-height;
-  border: none;
-  border-bottom: 0.5px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0 !important;
-}
-
-.light-theme .legends-heading {
-  background-color: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-heading {
-  background-color: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-heading {
-  background-color: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-heading {
-  background-color: $dark-gray-legend-heading-background-color;
-}
-
-.legends-header {
-  position: absolute;
-  left: 0;
-  right: 38px;
-  border-radius: 0;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  height: $current-warning-height;
-}
-
-.light-theme .legends-header {
-  background: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-header {
-  background: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-header {
-  background: $light-gray-legend-heading-background-color;
-}
+)
 
-.dark-gray-theme .legends-header {
-  background: $dark-gray-legend-heading-background-color;
-}
+// Emits
+const emit = defineEmits<{
+  warningsToggled: [warnings: string[]]
+  themeChanged: [theme: string]
+}>()
 
-.legends-text {
-  display: block;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: 15px;
-}
+// Composables
+const { t } = useI18n(toRef(props, 'language'))
 
-.light-theme .legends-text {
-  background-color: $light-legend-heading-background-color;
-}
+// Template refs
+const warningsContainer = ref<HTMLDivElement | null>(null)
 
-.dark-theme .legends-text {
-  background-color: $dark-legend-heading-background-color;
-}
+// Reactive state
+const visible = ref(false)
+const windowWidth = ref(window.innerWidth)
 
-.light-gray-theme .legends-text {
-  background-color: $light-gray-legend-heading-background-color;
+// Window resize handling
+function updateWidth(): void {
+  windowWidth.value = window.innerWidth
 }
 
-.dark-gray-theme .legends-text {
-  background-color: $dark-gray-legend-heading-background-color;
-}
+onMounted(() => {
+  window.addEventListener('resize', updateWidth)
+})
 
-button.legends-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 !important;
-  border-style: none;
-  float: right;
-  padding: $image-padding;
-  margin-left: 5px;
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth)
+})
 
-  &.collapsed {
-    background-image: url($ui-image-path + 'arrow-down.svg');
-    border-radius: 0 3px 3px 0;
-  }
-}
+// Computed
+const warnings = computed((): LegendItem[] => {
+  return props.input
+})
 
-.light-theme .legends-toggle {
-  background-color: $light-legend-toggle-background-color;
+const warningSymbolsText = computed((): string => {
+  return t('legends')
+})
 
-  &:hover {
-    background-color: $light-legend-toggle-background-color;
-  }
+const toggleLegendsText = computed((): string => {
+  return visible.value ? t('hideLegends') : t('showLegends')
+})
 
-  &:active {
-    background-color: $light-legend-toggle-background-color;
+// Watchers
+watch(windowWidth, () => {
+  if (warningsContainer.value?.clientHeight === 0) {
+    onShowAllWarnings()
   }
+})
 
-  &:not(:disabled):not(.disabled):active {
-    background-color: $light-current-warning-toggle-active-color;
-  }
+// Methods
+function onLegendToggle(): void {
+  visible.value = !visible.value
 }
 
-.dark-theme .legends-toggle {
-  background-color: $dark-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $dark-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $dark-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $dark-current-warning-toggle-active-color;
-  }
+function onWarningsToggled(newVisibleWarnings: string[]): void {
+  emit('warningsToggled', newVisibleWarnings)
 }
 
-.light-gray-theme .legends-toggle {
-  background-color: $light-gray-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $light-gray-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $light-gray-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $light-gray-current-warning-toggle-active-color;
-  }
+function onShowAllWarnings(): void {
+  emit(
+    'warningsToggled',
+    warnings.value.reduce<string[]>(
+      (types, warning) => types.concat([warning.type]),
+      []
+    )
+  )
 }
 
-.dark-gray-theme .legends-toggle {
-  background-color: $dark-gray-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $dark-gray-legend-toggle-background-color;
+function onThemeChanged(newTheme: string): void {
+  if (props.theme !== newTheme) {
+    emit('themeChanged', newTheme)
   }
-
-  &:active {
-    background-color: $dark-gray-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $dark-gray-current-warning-toggle-active-color;
-  }
-}
-
-.legends-container {
-  padding: 15px;
-  border-radius: 0;
-}
-
-.light-theme .legends-container {
-  background-color: $light-legend-container-background-color;
-  border-top: 0.5px solid $light-legend-background-color;
-}
-
-.dark-theme .legends-container {
-  background-color: $dark-legend-container-background-color;
-  border-top: 0.5px solid $dark-legend-background-color;
-}
-
-.light-gray-theme .legends-container {
-  background-color: $light-gray-legend-container-background-color;
-  border-top: 0.5px solid $light-gray-legend-background-color;
 }
+</script>
 
-.dark-gray-theme .legends-container {
-  background-color: $dark-gray-legend-container-background-color;
-  border-top: 0.5px solid $dark-gray-legend-background-color;
-}
+<style scoped lang="scss">
+@import '../scss/constants.scss';
 
-div#legends-collapse div.card-body {
-  padding: 0;
+div.symbol-list-header-row {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  span {
+    white-space: nowrap;
+  }
 }
 
 nav.symbol-list-header {