Component: Vue Widget Slider (new) (#5516)

* feat: Initial shadcn configuration

* component: Add Slider component from shadcn-vue

* deps: Add tw-animate-css

* component: Align slider with Figma styles

* component: Set the step value for the slider, update styles

* fix: update component tests to work with Array of values

* vite: Don't reload dev server for test changes

* component: Swap text for a number input kept in sync with the slider

* cleanup: Don't need the override if the input isn't type="number"

* test: add step size tests

* cleanup: Don't need cn for these

* css: Update token names to match new Figma Variables

* lint: Fix camelCase vs train-case in passthrough

* feat: If the value is deleted, revert to the slider state cc: @PabloWiedemann

* feat: Improve cursor styles, grabbable thumb, clickable track

* lint: temporarily disable some warnings

* feat: Grabbing while sliding (most of the time)

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue

@@ -6,31 +6,35 @@
       "
     >
       <Slider
-        v-model="localValue"
+        :model-value="[localValue]"
         v-bind="filteredProps"
         :disabled="readonly"
         class="flex-grow text-xs"
-        @update:model-value="onChange"
-      />
-      <InputText
-        v-model="inputDisplayValue"
-        :disabled="readonly"
-        type="number"
         :step="stepValue"
-        class="w-[4em] text-center text-xs px-0 !border-none !shadow-none !bg-transparent"
+        @update:model-value="updateLocalValue"
+      />
+      <InputNumber
+        :key="timesEmptied"
+        :model-value="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        :step="stepValue"
+        :min-fraction-digits="precision"
+        :max-fraction-digits="precision"
         size="small"
-        @blur="handleInputBlur"
-        @keydown="handleInputKeydown"
+        pt:pc-input-text:root="min-w-full bg-transparent border-none text-center"
+        class="w-16"
+        @update:model-value="handleNumberInputUpdate"
       />
     </div>
   </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
-import InputText from 'primevue/inputtext'
-import Slider from 'primevue/slider'
-import { computed, ref, watch } from 'vue'
+import InputNumber from 'primevue/inputnumber'
+import { computed, ref } from 'vue'
 
+import Slider from '@/components/ui/slider/Slider.vue'
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
@@ -42,7 +46,7 @@ import {
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
-const props = defineProps<{
+const { widget, modelValue, readonly } = defineProps<{
   widget: SimplifiedWidget<number>
   modelValue: number
   readonly?: boolean
@@ -53,19 +57,29 @@ const emit = defineEmits<{
 }>()
 
 // Use the composable for consistent widget value handling
-const { localValue, onChange } = useNumberWidgetValue(
-  props.widget,
-  props.modelValue,
-  emit
-)
+const { localValue, onChange } = useNumberWidgetValue(widget, modelValue, emit)
+
+const timesEmptied = ref(0)
+
+const updateLocalValue = (newValue: number[] | undefined): void => {
+  onChange(newValue ?? [localValue.value])
+}
+
+const handleNumberInputUpdate = (newValue: number | undefined) => {
+  if (newValue) {
+    updateLocalValue([newValue])
+    return
+  }
+  timesEmptied.value += 1
+}
 
 const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+  filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )
 
 // Get the precision value for proper number formatting
 const precision = computed(() => {
-  const p = props.widget.options?.precision
+  const p = widget.options?.precision
   // Treat negative or non-numeric precision as undefined
   return typeof p === 'number' && p >= 0 ? p : undefined
 })
@@ -73,96 +87,21 @@ const precision = computed(() => {
 // Calculate the step value based on precision or widget options
 const stepValue = computed(() => {
   // Use step2 (correct input spec value) instead of step (legacy 10x value)
-  if (props.widget.options?.step2 !== undefined) {
-    return String(props.widget.options.step2)
+  if (widget.options?.step2 !== undefined) {
+    return widget.options.step2
   }
+
   // Otherwise, derive from precision
-  if (precision.value !== undefined) {
-    if (precision.value === 0) {
-      return '1'
-    }
-    // For precision > 0, step = 1 / (10^precision)
-    // precision 1 → 0.1, precision 2 → 0.01, etc.
-    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
-  }
-  // Default to 'any' for unrestricted stepping
-  return 'any'
-})
-
-// Format a number according to the widget's precision
-const formatNumber = (value: number): string => {
   if (precision.value === undefined) {
-    // No precision specified, return as-is
-    return String(value)
+    return undefined
   }
-  // Use toFixed to ensure correct decimal places
-  return value.toFixed(precision.value)
-}
 
-// Apply precision-based rounding to a number
-const applyPrecision = (value: number): number => {
-  if (precision.value === undefined) {
-    // No precision specified, return as-is
-    return value
-  }
   if (precision.value === 0) {
-    // Integer precision
-    return Math.round(value)
+    return 1
   }
-  // Round to the specified decimal places
-  const multiplier = Math.pow(10, precision.value)
-  return Math.round(value * multiplier) / multiplier
-}
 
-// Keep a separate display value for the input field
-const inputDisplayValue = ref(formatNumber(localValue.value))
-
-// Update display value when localValue changes from external sources
-watch(localValue, (newValue) => {
-  inputDisplayValue.value = formatNumber(newValue)
+  // For precision > 0, step = 1 / (10^precision)
+  // precision 1 → 0.1, precision 2 → 0.01, etc.
+  return 1 / Math.pow(10, precision.value)
 })
-
-const handleInputBlur = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const value = target.value || '0'
-  const parsed = parseFloat(value)
-
-  if (!isNaN(parsed)) {
-    // Apply precision-based rounding
-    const roundedValue = applyPrecision(parsed)
-    onChange(roundedValue)
-    // Update display value with proper formatting
-    inputDisplayValue.value = formatNumber(roundedValue)
-  }
-}
-
-const handleInputKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    const target = event.target as HTMLInputElement
-    const value = target.value || '0'
-    const parsed = parseFloat(value)
-
-    if (!isNaN(parsed)) {
-      // Apply precision-based rounding
-      const roundedValue = applyPrecision(parsed)
-      onChange(roundedValue)
-      // Update display value with proper formatting
-      inputDisplayValue.value = formatNumber(roundedValue)
-    }
-  }
-}
 </script>
-
-<style scoped>
-/* Remove number input spinners */
-:deep(input[type='number']::-webkit-inner-spin-button),
-:deep(input[type='number']::-webkit-outer-spin-button) {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-:deep(input[type='number']) {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-</style>