feat: new sticky KLevelSlider component, updated the old one to Vue3 with Quasar

Author: durandarthur

map/client/components/stickies/KLevelSlider.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="isVisible && props.visible"
+    class="k-level-slider flex items-baseline justify-center bg-white q-px-sm q-py-md">
+    <q-slider v-if="dataArray" snap class="text-primary" v-model="sliderVal" :vertical="props.vertical"
+      :reverse="props.reverse ?? props.vertical" :height="150" :width="4" :markers="props.markers" :label-always="false"
+      :max="dataArray.length - 1" label :label-value="getFormatedLevel(dataArray[sliderVal])"
+      :switch-label-side="props.switchLabelSide ?? props.vertical" @change="onLevelChanged" />
+    <q-slider v-else class="text-primary" :model-value="sliderVal" :vertical="props.vertical"
+      :reverse="props.reverse ?? props.vertical" :height="150" :width="4" :markers="props.markers" :label-always="false"
+      :min="sliderMinValue" :max="sliderMaxValue" :step="sliderInterval" label
+      :label-value="getFormatedLevel(sliderVal)" :switch-label-side="props.switchLabelSide ?? props.vertical"
+      @change="onLevelChanged" @update:model-value="val => sliderVal = val" />
+    <p class="text-accent text-caption no-margin"
+      style="writing-mode: vertical-lr; transform-origin: center; transform: rotate(180deg);">
+      <b>{{ $t(CurrentActivity.selectableLevels.label) }} - {{ getFormatedLevel(CurrentActivity.selectedLevel) }}</b>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useCurrentActivity } from '../../../../core/client/composables'
+
+// ==PROPS==
+const props = defineProps({
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  reverse: {
+    type: Boolean,
+    default: null
+  },
+  visible: {
+    type: Boolean,
+    default: true
+  },
+  switchLabelSide: {
+    type: Boolean,
+    default: null
+  },
+  markers: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// ==REFS==
+const sliderVal = ref(0)
+
+// ==MISC HOOKS==
+const { CurrentActivity } = useCurrentActivity()
+
+// ==COMPUTED==
+const isVisible = computed(() => sliderValues.value ? sliderValues.value.length > 0 : (sliderMinValue.value !== undefined && sliderMaxValue.value !== undefined))
+// const isLazy = computed(() => _.get(CurrentActivity.value.selectableLevels, 'lazy', true))
+const sliderValues = computed(() => _.get(CurrentActivity.value.selectableLevels, 'values'))
+const dataArray = computed(() => sliderValues.value ? [...sliderValues.value].sort((a, b) => a - b) : null)
+const sliderMinValue = computed(() => _.get(CurrentActivity.value.selectableLevels, 'range.min'))
+const sliderMaxValue = computed(() => _.get(CurrentActivity.value.selectableLevels, 'range.max'))
+const sliderInterval = computed(() => _.get(CurrentActivity.value.selectableLevels, 'range.interval', 1))
+
+// ==MISC FUNCTIONS==
+function onLevelChanged(level) {
+  if (dataArray.value) {
+    CurrentActivity.value.setSelectedLevel(dataArray.value[level])
+  } else {
+    CurrentActivity.value.setSelectedLevel(level)
+  }
+}
+function getFormatedLevel(level) {
+  const unit = _.get(CurrentActivity.value.selectableLevels, 'unit')
+  return `${level || CurrentActivity.value.selectedLevel} ${unit}`
+}
+</script>
+
+<style>
+.k-level-slider {
+  border: 1px solid lightgrey;
+}
+</style>