@3cr/viewer-browser 0.0.57 → 0.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.57",
+  "version": "0.0.61",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",

package/src/components/selectors/ValueSelector.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import {computed, defineEmits} from 'vue';
-
-
+import { computed, defineEmits } from "vue";
+import { toNumber } from "@/helpers/utils";
 
 export interface Props {
   value: number;
@@ -9,8 +8,8 @@ export interface Props {
   label?: string;
   min?: number;
   max?: number;
-  step?: number,
-  prepend?: string,
+  step?: number;
+  prepend?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,19 +19,22 @@ const props = withDefaults(defineProps<Props>(), {
   min: -99999,
   max: 99999,
   step: 1,
-  prepend: '',
+  prepend: "",
 });
 const emit = defineEmits<{
-  'update:value': [number];
+  "update:value": [number];
 }>();
 const sliderValue = computed({
   get() {
-    return props.value
+    return Math.floor(props.value);
   },
   set(value: number) {
-    emit('update:value', value);
-  }
-})
+    let val = value;
+    if (value > props.max) val = props.max;
+    if (value < props.min) val = props.min;
+    emit("update:value", Math.floor(val));
+  },
+});
 </script>
 
 <template>
@@ -45,7 +47,8 @@ const sliderValue = computed({
       </v-col>
       <v-col cols="6">
         <v-text-field
-          v-model="sliderValue"
+          :model-value="sliderValue"
+          @update:modelValue="sliderValue = toNumber($event)"
           outlined
           dense
           class="mt-0 pt-0"
@@ -65,7 +68,9 @@ const sliderValue = computed({
   .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
   > .v-input__control
   > .v-input__slot,
-.single-slider-selector .v-text-field.v-text-field--enclosed .v-text-field__details {
+.single-slider-selector
+  .v-text-field.v-text-field--enclosed
+  .v-text-field__details {
   padding: 0px 8px !important;
 }
 

package/src/components/sliders/DoubleSliderSelector.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, defineEmits, ref, unref, watch } from "vue";
+import { toNumber } from "@vue/shared";
 
 export interface Props {
   value: Array<number>;
@@ -33,10 +34,15 @@ const sliderValue = computed({
     return props.value;
   },
   set(value: Array<number>) {
-    emit("update:value", value);
+    let val = value;
+    if (value[0] > props.max) val[0] = props.max;
+    if (value[1] > props.max) val[1] = props.max;
+    if (value[0] < props.min) val[0] = props.min;
+    if (value[1] < props.min) val[1] = props.min;
+    const normalised = [Math.floor(val[0]), Math.floor(val[1])];
+    emit("update:value", normalised);
   },
 });
-
 watch(
   sliderValue,
   async (currentValue: Array<number>) => {
@@ -60,7 +66,8 @@ watch(
     }}</v-card-subtitle>
     <v-card-actions class="px-2 pb-0">
       <v-text-field
-        v-model="sliderValue[0]"
+        :model-value="sliderValue[0]"
+        @update:modelValue="sliderValue = [toNumber($event), sliderValue[1]]"
         density="compact"
         class="mt-0 pt-0"
         hide-details
@@ -70,7 +77,8 @@ watch(
       ></v-text-field>
       <v-spacer />
       <v-text-field
-        v-model="sliderValue[1]"
+        :model-value="sliderValue[1]"
+        @update:modelValue="sliderValue = [sliderValue[0], toNumber($event)]"
         density="compact"
         class="mt-0 pt-0"
         hide-details

package/src/components/sliders/VerticalSliderSelector.vue

@@ -30,10 +30,10 @@ const showThumb = ref<"always" | boolean>(true);
 const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
 const sliderValue = computed({
   get() {
-    return props.value;
+    return Math.floor(props.value);
   },
   set(value: number) {
-    emit("update:value", value);
+    emit("update:value", Math.floor(value));
   },
 });
 
@@ -73,6 +73,9 @@ watch(
     <template #prepend>
       <div class="text-white py-1 my-0 text-center">{{ min }}</div>
     </template>
+    <template v-slot:thumb-label="{ modelValue }">
+      {{ Math.floor(modelValue) }}
+    </template>
   </v-slider>
 </template>