WindUI Roblox UI Library

WindUI uses a hierarchical structure to organize elements:

1. Window: The root container.
2. Sections: Groups of elements within a Tab or Window.
3. Tabs: High-level navigation pages.

Hierarchy Flow: Window -> Section -> Tab (Note: In this API, Tabs can be children of Sections, or Sections can be children of Tabs).

Key Methods:

• Window:Section({ Title = string, Opened = boolean?, ... }): Creates a new section.
• Section:Tab({ Title = string, Icon = string?, Desc = string?, Locked = boolean? }): Creates a tab within a section.
• Window:Tab({ Title = string, Icon = string?, Locked = boolean? }): Creates a top-level tab.
• Section:Section({ ... }): Creates a nested section within a section.
• Tab:Section({ ... }): Creates a section within a tab.

local Sections = {
    Main = Window:Section({ Title = "Main Features", Opened = true }),
    Settings = Window:Section({ Title = "Settings", Opened = true })
}

local Tabs = {
    Elements = Sections.Main:Tab({ Title = "UI Elements", Icon = "layout-grid" }),
    Appearance = Sections.Settings:Tab({ Title = "Appearance", Icon = "brush" }),
    LockedTab = Window:Tab({ Title = "Locked", Icon = "bird", Locked = true })
}

You can extend WindUI by adding custom services to WindUI.Services. This is primarily used for implementing key systems. A service entry in WindUI.Services requires:

• Name: The display name of the service.
• Icon: An icon identifier.
• Args: An array of argument names that will be passed to the New function.
• New: A function that handles the logic for creating the service instance. It receives the arguments defined in Args.
• Verify: A function used to validate a provided key. It should return true, "Success Message" or false, "Error Message".
• Copy: A function to handle copying information (like a key link) to the clipboard.

WindUI.Services.mysuperservicetogetkey = {
    Name = "My Super Service",
    Icon = "droplet",
    Args = { "ServiceId" },
    New = function(ServiceId)
        -- Logic to initialize service
        return {
            Verify = function(key)
                if not key then
                    return false, "Key is invalid!"
                end
                return true, "Key is valid!"
            end,
            Copy = function()
                return setclipboard("link to key system service.")
            end
        }
    end
}

The Window.ConfigManager allows you to persist data to files.

Workflow:

1. Initialize: Call ConfigManager:Init(Window).
2. Create/Access Config: Use ConfigManager:CreateConfig(name) to get a config object.
3. Set Data: Use configFile:Set(key, value) to store data.
4. Save: Call configFile:Save() to write to disk.
5. Load: Call configFile:Load() to retrieve data.
6. Register Elements: You can register UI elements (like Toggles or Sliders) to a config so their state is automatically managed (though manual Set/Load is shown in the example).

local ConfigManager = Window.ConfigManager
if ConfigManager then
    ConfigManager:Init(Window)
    
    local myConfig = ConfigManager:CreateConfig("user_settings")
    
    -- Saving data
    myConfig:Set("player_level", 10)
    myConfig:Save()
    
    -- Loading data
    local data = myConfig:Load()
    if data then
        print("Loaded level:", data.player_level)
    end
end

WindUI provides several interactive components that can be added to Sections or Tabs. Most elements accept a Callback function that triggers when the value changes.

Common Elements:

• Toggle: { Title, Desc?, Flag?, Value, Callback }
• Slider: { Title, Desc?, Flag?, Value = { Min, Max, Default }, Step?, Callback }
• Dropdown: { Title, Values, Flag?, SearchBarEnabled?, Value, Callback }
• Button: { Title, Icon?, Callback }
• Input: { Title, Value, Callback }
• Colorpicker: { Title, Default, Transparency?, Callback }
• Code: { Title, Code, OnCopy? }
• Paragraph: { Title, Desc, Image?, ImageSize?, Color?, Buttons? }
• Divider: Creates a visual separator.

-- Toggle Example
local toggle = ElementsSection:Toggle({
    Title = "Enable Features",
    Flag = "featureToggle",
    Value = false,
    Callback = function(state)
        print("Toggle is now:", state)
    end
})

-- Slider Example
local slider = ElementsSection:Slider({
    Title = "Intensity",
    Value = { Min = 0, Max = 100, Default = 50 },
    Callback = function(val) print(val) end
})

-- Dropdown Example
local dropdown = ElementsSection:Dropdown({
    Title = "Options",
    Values = {"Option 1", "Option 2"},
    Callback = function(option) print(option) end
})

You can customize the visual properties of the main Window object. This includes setting the icon size, background transparency, and adding decorative tags with custom colors or gradients.

Key methods:

• Window:SetIconSize(number): Sets the size of the window icon.
• Window:SetBackgroundTransparency(number): Sets the background transparency.
• Window:SetBackgroundImageTransparency(number): Sets the background image transparency.
• Window:Tag({ Title = string, Color = Color3 | Gradient, Radius = number? }): Adds a tag to the window. Tags can use a solid Color3 or a WindUI:Gradient.

Window:SetIconSize(48)

-- Adding a solid color tag
Window:Tag({
    Title = "v1.6.4",
    Color = Color3.fromHex("#30ff6a")
})

-- Adding a gradient tag
local TimeTag = Window:Tag({
    Title = "--:--",
    Radius = 0,
    Color = WindUI:Gradient({
        ["0"]   = { Color = Color3.fromHex("#FF0F7B"), Transparency = 0 },
        ["100"] = { Color = Color3.fromHex("#F89B29"), Transparency = 0 },
    }, {
        Rotation = 45,
    }),
})