Fixed slider

nightcycle · Jul 9, 2024 · bd6dd08 · bd6dd08
1 parent d5bffbb
commit bd6dd08
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 41 deletions.
diff --git a/scripts/compile/run.py b/scripts/compile/run.py
@@ -99,6 +99,8 @@ def write_defaults(self) -> None:
 			for name in func["names"]:
 				def_param_values: list[str] = []
 				for param in func["parameters"]:
+					# print(param)
+					# print("\t" + self.name + ":" + name + ":" + param["name"] + " -> " + param["default"])
 					if param['default'] != '':
 						type_annotation = ""
 						if param['default'] == "nil":

diff --git a/src/Component/Slider/ColdFusion.luau b/src/Component/Slider/ColdFusion.luau
@@ -497,8 +497,10 @@ function Interface.new(
 	local fontDataState: State<FontData> = _import(fontData, DEFAULTS.NEW.FONT_DATA)
 
 	local onChangeState: State<(val: number) -> ()> = _import(onChange, DEFAULTS.NEW.ON_CHANGE)
-	local leftLabelState: State<string | ImageData | nil> = _import(leftTextOrIcon, nil :: ImageData?)
-	local rightLabelState: State<string | ImageData | nil> = _import(rightTextOrIcon, nil :: ImageData?)
+	local leftLabelState: State<string | ImageData | nil> =
+		_import(leftTextOrIcon, DEFAULTS.NEW.LEFT_TEXT_OR_ICON)
+	local rightLabelState: State<string | ImageData | nil> =
+		_import(rightTextOrIcon, DEFAULTS.NEW.RIGHT_TEXT_OR_ICON)
 	local initialValueState: State<number> = _import(initialValue, DEFAULTS.NEW.INITIAL_VALUE)
 
 	local minState: State<number> = _import(minimum, DEFAULTS.NEW.MINIMUM)
@@ -571,6 +573,7 @@ function Interface.new(
 	local incrementMaid = maid:GiveTask(Maid.new())
 
 	local leftBar = _new("ImageLabel")({
+		Name = "LeftBar",
 		LayoutOrder = 1,
 		Position = UDim2.fromScale(0, 0.5),
 		AnchorPoint = Vector2.new(0, 0.5),
@@ -582,11 +585,17 @@ function Interface.new(
 		SliceScale = 1,
 		ScaleType = Enum.ScaleType.Slice,
 		Size = _Computed(function(sc: number, fill: number, fullWidth: UDim): UDim2
-			return UDim2.new(math.max(fill - sc * 0.5, 0), -fullWidth.Offset * 0.5, 0, sc * BAR_HEIGHT_DP)
+			return UDim2.new(
+				math.max(fill - fullWidth.Scale * 0.5, 0),
+				-fullWidth.Offset * 0.5,
+				0,
+				sc * BAR_HEIGHT_DP
+			)
 		end, scaleState, fillState, cursorFullWidthState),
 	}) :: ImageLabel
 
 	local rightBar = _new("ImageLabel")({
+		Name = "RightBar",
 		LayoutOrder = 2,
 		Position = UDim2.fromScale(1, 0.5),
 		AnchorPoint = Vector2.new(1, 0.5),
@@ -608,6 +617,7 @@ function Interface.new(
 	}) :: ImageLabel
 
 	local cursor = _new("Frame")({
+		Name = "Cursor",
 		LayoutOrder = 1,
 		ZIndex = 10,
 		Position = _Computed(function(fill: number): UDim2
@@ -632,13 +642,14 @@ function Interface.new(
 		},
 	}) :: Frame
 	local dotContainer = _new("Frame")({
+		Name = "DotContainer",
 		ZIndex = 5,
 		Position = UDim2.fromScale(0.5, 0.5),
 		AnchorPoint = Vector2.new(0.5, 0.5),
 		AutomaticSize = Enum.AutomaticSize.None,
 		BackgroundTransparency = 1,
 		Size = _Computed(function(sc: number): UDim2
-			return UDim2.new(1, 0, sc * CURSOR_HEIGHT_DP, 0)
+			return UDim2.new(1, 0, 0, sc * CURSOR_HEIGHT_DP)
 		end, scaleState),
 		Children = {
 			maid:GiveTask(Util.Padding.ColdFusion.new(
@@ -698,6 +709,7 @@ function Interface.new(
 			)
 		)
 	)({
+		Name = "PopUp",
 		Visible = isSelectedState,
 		BackgroundTransparency = 0,
 		BackgroundColor3 = onBackgroundColorState,
@@ -746,6 +758,7 @@ function Interface.new(
 	end))
 
 	local button = _new("TextButton")({
+		Name = "Button",
 		LayoutOrder = 2,
 		BackgroundTransparency = 1,
 		AutomaticSize = Enum.AutomaticSize.XY,
@@ -793,13 +806,15 @@ function Interface.new(
 		end
 	end))
 	local inst = _new("Frame")({
-		AutomaticSize = Enum.AutomaticSize.None,
+		Name = "Slider",
+		AutomaticSize = Enum.AutomaticSize.X,
 		BackgroundTransparency = 1,
 		Size = _Computed(function(sc: number): UDim2
 			return UDim2.fromOffset(0, sc * CURSOR_HEIGHT_DP)
 		end, scaleState),
 		Children = {
 			_new("TextLabel")({
+				Name = "LeftLabel",
 				Text = _Computed(function(icon: ImageData | string | nil): string | nil
 					return if type(icon) == "string" then icon else ""
 				end, leftLabelState),
@@ -824,6 +839,7 @@ function Interface.new(
 				Size = UDim2.fromOffset(0, 0),
 			}),
 			_new("TextLabel")({
+				Name = "RightLabel",
 				Text = _Computed(function(icon: ImageData | string | nil): string | nil
 					return if type(icon) == "string" then icon else ""
 				end, rightLabelState),
@@ -858,6 +874,7 @@ function Interface.new(
 					)
 				)
 			)({
+				Name = "LeftIcon",
 				Visible = _Computed(function(icon: ImageData | string | nil): boolean
 					return type(icon) == "table"
 				end, leftLabelState),
@@ -875,6 +892,7 @@ function Interface.new(
 					)
 				)
 			)({
+				Name = "RightIcon",
 				Visible = _Computed(function(icon: ImageData | string | nil): boolean
 					return type(icon) == "table"
 				end, rightLabelState),
@@ -891,7 +909,7 @@ function Interface.new(
 						return UDim.new(0, sc * ICON_PADDING_DP)
 					end, scaleState),
 					Enum.UIFlexAlignment.Fill,
-					Enum.UIFlexAlignment.None,
+					Enum.UIFlexAlignment.Fill,
 					Enum.ItemLineAlignment.Center,
 					false
 				)

diff --git a/src/Component/Slider/Defaults.luau b/src/Component/Slider/Defaults.luau
@@ -28,6 +28,8 @@ return {
 		MINIMUM = 0,
 		MAXIMUM = 100,
 		INCREMENT = 10,
+		LEFT_TEXT_OR_ICON = nil :: (string | ImageData)?,
+		RIGHT_TEXT_OR_ICON = nil :: (string | ImageData)?,
 		ON_BACKGROUND_COLOR = Color3.new(),
 		ON_BACKGROUND_TEXT_COLOR = Color3.new(),
 		FILL_COLOR = Color3.new(),

diff --git a/src/Component/Slider/Fusion.luau b/src/Component/Slider/Fusion.luau
@@ -39,8 +39,8 @@ function Interface.new(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<string | ImageData | nil>,
-	rightTextOrIcon: FusionCanBeState<string | ImageData | nil>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	onBackgroundColor: FusionCanBeState<Color3>,
 	onBackgroundTextColor: FusionCanBeState<Color3>,
 	fillColor: FusionCanBeState<Color3>,
@@ -85,8 +85,8 @@ function Interface.primary(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<(string | ImageData)?>,
-	rightTextOrIcon: FusionCanBeState<(string | ImageData)?>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	elevation: FusionCanBeState<number>
 ): GuiObject
 	local maid = Maid.new()
@@ -118,8 +118,8 @@ function Interface.secondary(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<(string | ImageData)?>,
-	rightTextOrIcon: FusionCanBeState<(string | ImageData)?>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	elevation: FusionCanBeState<number>
 ): GuiObject
 	local maid = Maid.new()
@@ -151,8 +151,8 @@ function Interface.tertiary(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<(string | ImageData)?>,
-	rightTextOrIcon: FusionCanBeState<(string | ImageData)?>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	elevation: FusionCanBeState<number>
 ): GuiObject
 	local maid = Maid.new()
@@ -184,8 +184,8 @@ function Interface.onPrimary(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<(string | ImageData)?>,
-	rightTextOrIcon: FusionCanBeState<(string | ImageData)?>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	elevation: FusionCanBeState<number>
 ): GuiObject
 	local maid = Maid.new()
@@ -217,8 +217,8 @@ function Interface.onSecondary(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<(string | ImageData)?>,
-	rightTextOrIcon: FusionCanBeState<(string | ImageData)?>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	elevation: FusionCanBeState<number>
 ): GuiObject
 	local maid = Maid.new()
@@ -250,8 +250,8 @@ function Interface.onTertiary(
 	minimum: FusionCanBeState<number?>,
 	maximum: FusionCanBeState<number?>,
 	increment: FusionCanBeState<number?>,
-	leftTextOrIcon: FusionCanBeState<(string | ImageData)?>,
-	rightTextOrIcon: FusionCanBeState<(string | ImageData)?>,
+	leftTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
+	rightTextOrIcon: FusionCanBeState<((string | ImageData)?)>,
 	elevation: FusionCanBeState<number>
 ): GuiObject
 	local maid = Maid.new()

diff --git a/src/Component/Slider/README.md b/src/Component/Slider/README.md
@@ -1,5 +1,7 @@
 # Slider
 
+![Preview](preview.gif)
+
 A slider allows for the selection of a value within a range. Read more [here](https://m3.material.io/components/sliders/overview).
 # Constructors
 
@@ -13,8 +15,8 @@ This function is a native constructor, with verbosity allowing for control over
 - **minimum**: number?
 - **maximum**: number?
 - **increment**: number?
-- **leftTextOrIcon**: string | ImageData | nil
-- **rightTextOrIcon**: string | ImageData | nil
+- **leftTextOrIcon**: ((string | ImageData)?)
+- **rightTextOrIcon**: ((string | ImageData)?)
 - **onBackgroundColor**: Color3
 - **onBackgroundTextColor**: Color3
 - **fillColor**: Color3
@@ -34,8 +36,8 @@ local initialValue: number = 50
 local minimum: number? = 0
 local maximum: number? = 100
 local increment: number? = 10
-local leftTextOrIcon: string | ImageData | nil = 
-local rightTextOrIcon: string | ImageData | nil = 
+local leftTextOrIcon: ((string | ImageData)?) = nil
+local rightTextOrIcon: ((string | ImageData)?) = nil
 local onBackgroundColor: Color3 = Color3.new()
 local onBackgroundTextColor: Color3 = Color3.new()
 local fillColor: Color3 = Color3.new()
@@ -70,8 +72,8 @@ local initialValue: number = 50
 local minimumState: Fusion.Value<number?> = Value(0)
 local maximum: number? = 100
 local incrementState: Fusion.Value<number?> = Value(10)
-local leftTextOrIcon: string | ImageData | nil = 
-local rightTextOrIconState: Fusion.Value<string | ImageData | nil> = Value()
+local leftTextOrIcon: ((string | ImageData)?) = nil
+local rightTextOrIconState: Fusion.Value<((string | ImageData)?)> = Value(nil)
 local onBackgroundColor: Color3 = Color3.new()
 local onBackgroundTextColorState: Fusion.Value<Color3> = Value(Color3.new())
 local fillColor: Color3 = Color3.new()
@@ -109,8 +111,8 @@ This function is a style constructor, utilizing the "Style" type to reduce the n
 - **minimum**: number?
 - **maximum**: number?
 - **increment**: number?
-- **leftTextOrIcon**: (string | ImageData)?
-- **rightTextOrIcon**: (string | ImageData)?
+- **leftTextOrIcon**: ((string | ImageData)?)
+- **rightTextOrIcon**: ((string | ImageData)?)
 - **elevation**: number
 
 
@@ -124,8 +126,8 @@ local initialValue: number = 50
 local minimum: number? = 0
 local maximum: number? = 100
 local increment: number? = 10
-local leftTextOrIcon: (string | ImageData)? = nil
-local rightTextOrIcon: (string | ImageData)? = nil
+local leftTextOrIcon: ((string | ImageData)?) = nil
+local rightTextOrIcon: ((string | ImageData)?) = nil
 local elevation: number = 0
 
 local slider = Synthetic.Component.Slider.Fusion.primary()
@@ -148,8 +150,8 @@ local initialValueState: Fusion.Value<number> = Value(50)
 local minimum: number? = 0
 local maximumState: Fusion.Value<number?> = Value(100)
 local increment: number? = 10
-local leftTextOrIconState: Fusion.Value<(string | ImageData)?> = Value(nil)
-local rightTextOrIcon: (string | ImageData)? = nil
+local leftTextOrIconState: Fusion.Value<((string | ImageData)?)> = Value(nil)
+local rightTextOrIcon: ((string | ImageData)?) = nil
 local elevationState: Fusion.Value<number> = Value(0)
 
 local slider: GuiObject = Synthetic.Component.Slider.Fusion.primary(

diff --git a/src/Component/Slider/Wrapper.luau b/src/Component/Slider/Wrapper.luau
@@ -31,8 +31,8 @@ export type SliderWrapperDefinition = {
 	Minimum: number?,
 	Maximum: number?,
 	Increment: number?,
-	LeftTextOrIcon: string | ImageData | nil,
-	RightTextOrIcon: string | ImageData | nil,
+	LeftTextOrIcon: (string | ImageData)?,
+	RightTextOrIcon: (string | ImageData)?,
 	OnBackgroundColor: Color3,
 	OnBackgroundTextColor: Color3,
 	FillColor: Color3,

diff --git a/src/Component/Slider/_Config.story.luau b/src/Component/Slider/_Config.story.luau
@@ -20,7 +20,7 @@ return function(frame: Frame)
 	task.spawn(function()
 		local function makeHalfFrame(isDarkMode: boolean, color: Color3): Frame
 			local style = Style.new(
-				1.5,
+				1.45,
 				Enum.Font.SourceSans,
 				if isDarkMode then Enums.SchemeType.Dark else Enums.SchemeType.Light,
 				color

diff --git a/src/Component/Slider/definition.json b/src/Component/Slider/definition.json
@@ -35,13 +35,13 @@
                 },
                 {
                     "name": "leftTextOrIcon",
-                    "type": "string | ImageData | nil",
-                    "default": ""
+                    "type": "((string | ImageData)?)",
+                    "default": "nil"
                 },
                 {
                     "name": "rightTextOrIcon",
-                    "type": "string | ImageData | nil",
-                    "default": ""
+                    "type": "((string | ImageData)?)",
+                    "default": "nil"
                 },
                 {
                     "name": "onBackgroundColor",
@@ -128,12 +128,12 @@
                 },
                 {
                     "name": "leftTextOrIcon",
-                    "type": "(string | ImageData)?",
+                    "type": "((string | ImageData)?)",
                     "default": "nil"
                 },
                 {
                     "name": "rightTextOrIcon",
-                    "type": "(string | ImageData)?",
+                    "type": "((string | ImageData)?)",
                     "default": "nil"
                 },
                 {

diff --git a/src/Component/Slider/preview.gif b/src/Component/Slider/preview.gif