From df7ceed793f0fea4eafb4a372a675682edd46452 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 2 Feb 2024 19:08:58 +0100
Subject: [PATCH] fix(frontend): fix vertical prop + add missing disabled prop
 (#3134)

---
 .../components/inputs/AppSliderInputs.svelte  | 20 ++++++++++++-------
 .../apps/editor/component/components.ts       |  5 +++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index c4043aab20..c78e7a2dcd 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -107,8 +107,6 @@
 	$: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 		computeWidth()
 	}
-
-	let vertical = false
 </script>
 
 {#each Object.keys(components['slidercomponent'].initialData.configuration) as key (key)}
@@ -133,33 +131,41 @@
 <InitializeComponent {id} />
 
 <AlignWrapper {render} hFull {verticalAlignment}>
-	<div class="flex {vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1">
+	<div
+		class="flex {resolvedConfig.vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1"
+	>
 		<span
 			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
 			style={css?.limits?.style ?? ''}
 		>
-			{vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
+			{resolvedConfig.vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
 		</span>
 		<div
-			class={twMerge('grow', css?.bar?.class, 'font-mono wm-slider-bar')}
+			class={twMerge(
+				'grow',
+				css?.bar?.class,
+				'font-mono wm-slider-bar',
+				resolvedConfig?.vertical ? 'h-full' : 'w-full'
+			)}
 			style={css?.bar?.style}
 			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
 			<RangeSlider
 				springValues={{ stiffness: 1, damping: 1 }}
-				{vertical}
+				vertical={resolvedConfig.vertical}
 				bind:slider
 				bind:values
 				step={resolvedConfig.step}
 				min={+(resolvedConfig?.min ?? 0)}
 				max={+(resolvedConfig?.max ?? 0)}
+				disabled={resolvedConfig.disabled}
 			/>
 		</div>
 		<span
 			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
 			style={css?.limits?.style ?? ''}
 		>
-			{vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
+			{resolvedConfig.vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
 		</span>
 		<span class="mx-2">
 			<span
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 82f06a96ef..b13df528fb 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -2036,6 +2036,11 @@ This is a paragraph.
 					type: 'static',
 					fieldType: 'boolean',
 					value: false
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean'
 				}
 			}
 		}