Merge pull request #4 from ImAvafe/dev

Dev

src/Components/ScrollingFrame.lua

@@ -3,6 +3,7 @@ local Fusion = require(OnyxUI.Parent.Fusion)
 local Themer = require(OnyxUI.Utils.Themer)
 local PubTypes = require(OnyxUI.Utils.PubTypes)
 local CombineProps = require(OnyxUI.Utils.CombineProps)
+local EnsureValue = require(OnyxUI.Utils.EnsureValue)
 
 local Hydrate = Fusion.Hydrate
 local Computed = Fusion.Computed
@@ -28,34 +29,51 @@ export type Props = Base.Props & {
 }
 
 return function(Props: Props)
-	return Hydrate(Base(CombineProps(Props, {
-		ClassName = "ScrollingFrame",
-		Name = "ScrollingFrame",
-	}))) {
-		BottomImage = Computed(function()
+	local BottomImage = EnsureValue(
+		Props.BottomImage,
+		"string",
+		Computed(function()
 			if Themer.Theme.CornerRadius["1"]:get() >= 3 then
 				return "rbxassetid://16547643439"
 			else
 				return "rbxassetid://16547330984"
 			end
-		end),
-		TopImage = Computed(function()
+		end)
+	)
+	local TopImage = EnsureValue(
+		Props.TopImage,
+		"string",
+		Computed(function()
 			if Themer.Theme.CornerRadius["1"]:get() >= 3 then
 				return "rbxassetid://16547667444"
 			else
 				return "rbxassetid://16547330984"
 			end
-		end),
-		MidImage = "rbxassetid://16547330984",
+		end)
+	)
+	local MidImage = EnsureValue(Props.MidImage, "string", "rbxassetid://16547330984")
+	local ScrollBarImageColor3 =
+		EnsureValue(Props.ScrollBarImageColor3, "Color3", Themer.Theme.Colors.NeutralContent.Dark)
+	local ScrollBarImageTransparency = EnsureValue(Props.ScrollBarImageTransparency, "number", 0)
+	local ScrollBarThickness = EnsureValue(Props.ScrollBarThickness, "number", 8)
+	local AutomaticCanvasSize = EnsureValue(Props.AutomaticCanvasSize, "EnumItem", Enum.AutomaticSize.Y)
+	local ScrollingDirection = EnsureValue(Props.ScrollingDirection, "EnumItem", Enum.ScrollingDirection.Y)
+
+	return Hydrate(Base(CombineProps(Props, {
+		ClassName = "ScrollingFrame",
+		Name = "ScrollingFrame",
 		Selectable = false,
-		ScrollBarImageColor3 = Themer.Theme.Colors.NeutralContent.Dark,
-		ScrollBarImageTransparency = 0,
-		ScrollBarThickness = 8,
 		BackgroundTransparency = 1,
-		AutomaticCanvasSize = Enum.AutomaticSize.Y,
-		ScrollingDirection = Enum.ScrollingDirection.Y,
 		AutomaticSize = Enum.AutomaticSize.None,
-
+	}))) {
+		BottomImage = BottomImage,
+		TopImage = TopImage,
+		MidImage = MidImage,
+		ScrollBarImageColor3 = ScrollBarImageColor3,
+		ScrollBarImageTransparency = ScrollBarImageTransparency,
+		ScrollBarThickness = ScrollBarThickness,
+		AutomaticCanvasSize = AutomaticCanvasSize,
+		ScrollingDirection = ScrollingDirection,
 		CanvasPosition = Props.CanvasPosition,
 		CanvasSize = Props.CanvasSize,
 		ElasticBehavior = Props.ElasticBehavior,

src/Components/SwitchInput.lua

@@ -97,12 +97,12 @@ return function(Props: Props)
 		StrokeTransparency = Spring(
 			Computed(function()
 				if Disabled:get() then
-					return 0.9
+					return 0.8
 				end
 				if Switched:get() then
 					return 0
 				else
-					return 0.5
+					return 0.6
 				end
 			end),
 			Themer.Theme.SpringSpeed["1"],

src/Components/Text.lua

@@ -47,16 +47,16 @@ return function(Props: Props)
 		ClassName = "TextLabel",
 		Name = "Text",
 		AutomaticSize = Enum.AutomaticSize.XY,
+		ClipsDescendants = false,
+		BackgroundTransparency = 1,
 	}))) {
 		TextColor3 = TextColor3,
 		TextSize = TextSize,
 		RichText = RichText,
 		FontFace = FontFace,
 		TextWrapped = TextWrapped,
-		ClipsDescendants = false,
 		TextXAlignment = TextXAlignment,
 		TextYAlignment = TextYAlignment,
-		BackgroundTransparency = 1,
 
 		Text = Props.Text,
 		TextTransparency = Props.TextTransparency,

src/Components/TextInput.lua

@@ -27,23 +27,61 @@ export type Props = Base.Props & {
 	ClearTextOnFocus: PubTypes.CanBeState<boolean>?,
 	TextWrapped: PubTypes.CanBeState<boolean>?,
 	MultiLine: PubTypes.CanBeState<boolean>?,
+	TextSize: PubTypes.CanBeState<number>?,
+	TextColor3: PubTypes.CanBeState<Color3>?,
+	FontFace: PubTypes.CanBeState<Font>?,
+	PlaceholderColor3: PubTypes.CanBeState<Color3>?,
+	TextXAlignment: PubTypes.CanBeState<Enum.TextXAlignment>?,
+	TextYAlignment: PubTypes.CanBeState<Enum.TextYAlignment>?,
+	TextTransparency: PubTypes.CanBeState<number>?,
+
 	IsFocused: PubTypes.CanBeState<boolean>?,
 	OnFocused: PubTypes.CanBeState<() -> ()>?,
 	OnFocusLost: PubTypes.CanBeState<() -> ()>?,
 }
 
 return function(Props: Props)
 	local Disabled = EnsureValue(Props.Disabled, "boolean", false)
+	local RemainingCharaters = Value(-1)
+	local IsFocused = EnsureValue(Props.IsFocused, "boolean", false)
+	local OnFocused = EnsureValue(Props.OnFocused, "function", function() end)
+	local OnFocusLost = EnsureValue(Props.OnFocusLost, "function", function() end)
 	local Text = EnsureValue(Props.Text, "string", "")
 	local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main)
 	local CharacterLimit = EnsureValue(Props.CharacterLimit, "number", -1)
 	local ClearTextOnFocus = EnsureValue(Props.ClearTextOnFocus, "boolean", false)
 	local PlaceholderText = EnsureValue(Props.PlaceholderText, "string", "")
-
-	local RemainingCharaters = Value(-1)
-	local IsFocused = EnsureValue(Props.IsFocused, "boolean", false)
-	local OnFocused = EnsureValue(Props.OnFocused, "function", function() end)
-	local OnFocusLost = EnsureValue(Props.OnFocusLost, "function", function() end)
+	local TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1"])
+	local PlaceholderColor3 = EnsureValue(Props.PlaceholderColor3, "Color3", Themer.Theme.Colors.NeutralContent.Dark)
+	local TextColor3 = EnsureValue(
+		Props.TextColor3,
+		"Color3",
+		Computed(function()
+			return Themer.Theme.Colors.BaseContent.Main:get()
+		end)
+	)
+	local FontFace = EnsureValue(
+		Props.FontFace,
+		"Font",
+		Computed(function()
+			return Font.new(Themer.Theme.Font.Body:get(), Themer.Theme.FontWeight.Body:get())
+		end)
+	)
+	local TextXAlignment = EnsureValue(Props.TextXAlignment, "EnumItem", Enum.TextXAlignment.Left)
+	local TextYAlignment = EnsureValue(Props.TextYAlignment, "EnumItem", Enum.TextYAlignment.Top)
+	local TextTransparency = EnsureValue(
+		Props.TextTransparency,
+		"number",
+		Computed(function()
+			if Disabled:get() then
+				return 0.75
+			elseif IsFocused:get() then
+				return 0
+			else
+				return 0.5
+			end
+		end)
+	)
 
 	local Observers = {
 		Observer(Text):onChange(function()
@@ -77,7 +115,7 @@ return function(Props: Props)
 		StrokeTransparency = Spring(
 			Computed(function()
 				if Disabled:get() then
-					return 0.95
+					return 0.9
 				end
 				if IsFocused:get() then
 					return 0
@@ -98,29 +136,21 @@ return function(Props: Props)
 		[Cleanup] = Observers,
 	}))) {
 		Text = Text,
-		TextColor3 = Computed(function()
-			return Themer.Theme.Colors.BaseContent.Main:get()
-		end),
-		TextSize = Themer.Theme.TextSize["1"],
-		FontFace = Computed(function()
-			return Font.new(Themer.Theme.Font.Body:get(), Themer.Theme.FontWeight.Body:get())
-		end),
-		PlaceholderColor3 = Computed(function()
-			if Disabled:get() then
-				return Themer.Theme.Colors.NeutralContent.Dark:get()
-			else
-				return Themer.Theme.Colors.NeutralContent.Light:get()
-			end
-		end),
+		TextColor3 = Spring(TextColor3, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
+		TextSize = TextSize,
+		FontFace = FontFace,
+		PlaceholderColor3 = PlaceholderColor3,
 		PlaceholderText = PlaceholderText,
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		MultiLine = Props.MultiLine,
+		TextXAlignment = TextXAlignment,
+		TextYAlignment = TextYAlignment,
 		ClearTextOnFocus = ClearTextOnFocus,
+		TextTransparency = Spring(TextTransparency, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
+		MultiLine = Props.MultiLine,
+		TextWrapped = Props.TextWrapped,
+
 		TextEditable = Computed(function()
 			return not Disabled:get()
 		end),
-		TextWrapped = Props.TextWrapped,
 
 		[OnEvent "Focused"] = function()
 			if not Disabled:get() then

wally.toml

@@ -1,7 +1,7 @@
 [package]
 name = "imavafe/onyx-ui"
 description = "Quick, quality UI for Fusion"
-version = "0.2.1"
+version = "0.2.2"
 license = "MIT"
 authors = ["Avafe"]