Merge pull request writer#683 from madeindjs/fix-slider-warning

fix(ui): add default value for Slider

src/ui/src/components/core/input/CoreSliderInput.vue

@@ -103,6 +103,7 @@ const { formValue, handleInput } = useFormValueBroker<number>(
 	wf,
 	instancePath,
 	rootInstance,
+	50,
 );
 </script>
 

src/ui/src/components/core/input/CoreSliderRangeInput.vue

@@ -6,7 +6,7 @@
 	>
 		<BaseInputSliderRange
 			popover-display-mode="always"
-			:value="formValue || [20, 50]"
+			:value="formValue"
 			:min="fields.minValue.value"
 			:max="fields.maxValue.value"
 			:step="fields.stepSize.value"
@@ -103,6 +103,7 @@ const { formValue, handleInput } = useFormValueBroker<[number, number]>(
 	wf,
 	instancePath,
 	rootInstance,
+	[20, 50],
 );
 </script>
 

src/ui/src/renderer/useFormValueBroker.ts

@@ -3,17 +3,19 @@ import { useEvaluator } from "@/renderer/useEvaluator";
 import { Core, InstancePath } from "@/writerTypes";
 
 /**
- *
  * Encapsulates repeatable form value logic, including binding.
  *
  * @param wf
  * @param componentId
+ * @param defaultValue the initial value when binding is not set
  * @returns
  */
 export function useFormValueBroker<T = any>(
 	wf: Core,
 	instancePath: InstancePath,
 	emitterEl: Ref<HTMLElement | ComponentPublicInstance>,
+	// @ts-expect-error keep default string for compatibility reason
+	defaultValue: T = "",
 ) {
 	const formValue: Ref<T> = ref();
 	const isBusy = ref(false);
@@ -110,7 +112,7 @@ export function useFormValueBroker<T = any>(
 		formValue,
 		(newValue) => {
 			if (typeof newValue === "undefined") {
-				formValue.value = "" as T;
+				formValue.value = defaultValue;
 			}
 		},
 		{ immediate: true },