deploy: a307f58dfb

docs/references/elements/BarChart.md

@@ -1,5 +1,21 @@
 # BarChart : Graph
-This is the bar chart class. It is based on the graph element. It draws bar based points.
+The Bar Chart element is designed for visualizing data series as vertical bars. It displays multiple values as side-by-side bars where each bar's height represents its value.
+
+### Usage
+ ```lua
+local chart = main:addBarChart()
+:addSeries("input", " ", colors.green, colors.green, 5)
+:addSeries("output", " ", colors.red, colors.red, 5)
+
+basalt.schedule(function()
+while true do
+chart:addPoint("input", math.random(1,100))
+chart:addPoint("output", math.random(1,100))
+sleep(2)
+end
+end)
+```
+
 
 
 ## Protected Functions

docs/references/elements/BigFont.md

@@ -1,5 +1,12 @@
 # BigFont : VisualElement
-The BigFont element is a text element that displays large text.
+The BigFont element is a text element that displays larger text. It uses Wojbie's BigFont API to render the text in a larger font size. Credits to Wojbie for the original API.
+
+### Usage
+ ```lua
+local font = main:addBigFont()
+font:setText("Hello World!")
+```
+
 
 ## Properties
 

docs/references/elements/BigFont_BigFontText.md

@@ -1,5 +1,5 @@
 # BigFontText
-Basalt - Nyorie: Please don't copy paste this code to your projects, this code is slightly changed (to fit the way basalt draws stuff), if you want the original code, checkout this:
+Basalt - Nyorie: Please don't copy paste this code to your projects, this code is slightly changed (to fit the way basalt draws elements), if you want the original code, checkout this:
 http://www.computercraft.info/forums2/index.php?/topic/25367-bigfont-api-write-bigger-letters-v10/
 
 

docs/references/elements/Container.md

@@ -1,6 +1,12 @@
 # Container : VisualElement
-The container class. It is a visual element that can contain other elements. It is the base class for all containers,
-like Frames, BaseFrames, and more.
+The Container class serves as a fundamental building block for organizing UI elements. It acts as a parent element that can hold and manage child elements, providing layout management, event propagation, and rendering capabilities. Used as base class for Frames, Windows, and other container-like elements.
+
+### Usage
+ ```lua
+local container = basalt.getMainFrame()
+container:addButton()  -- Add a child element
+```
+
 
 ## Properties
 

docs/references/elements/Display.md

@@ -1,5 +1,13 @@
 # Display : VisualElement
-The Display is a special element where you can use the window (term) API to draw on a element, useful when you need to use external APIs.
+The Display is a special element where you can use the window (term) API to draw on the display, useful when you need to use external APIs.
+
+### Usage
+ ```lua
+local display = main:addDisplay() -- Create a display element
+local displayWindow = display:getWindow() -- Get the window object of the display
+displayWindow.write("Hello World!") -- Write "Hello World!" to the display
+```
+
 
 ## Functions
 

docs/references/elements/Dropdown.md

@@ -1,6 +1,17 @@
 # Dropdown : List
 This is the dropdown class. It is a visual element that can show a list of selectable items in a dropdown menu.
 
+### Usage
+ ```lua
+local dropdown = main:addDropdown()
+dropdown:setItems({
+{text = "Item 1", callback = function() basalt.LOGGER.debug("Item 1 selected") end},
+{text = "Item 2", callback = function() basalt.LOGGER.debug("Item 2 selected") end},
+{text = "Item 3", callback = function() basalt.LOGGER.debug("Item 3 selected") end},
+})
+```
+
+
 ## Properties
 
 |Property|Type|Default|Description|

docs/references/elements/Flexbox.md

@@ -1,6 +1,25 @@
 # Flexbox : Container
 This is the Flexbox class. It is a container that arranges its children in a flexible layout.
 
+### Usage
+ ```lua
+local flex = main:addFlexbox({background=colors.black, width=30, height=10})
+flex:addButton():setFlexGrow(1)
+flex:addButton():setFlexGrow(1)
+flex:addButton():setFlexGrow(1)
+```
+
+The flexbox element adds the following properties to its children:
+
+### Usage
+ ```lua
+flex:addButton():setFlexGrow(1) -- The flex-grow property defines the ability for a flex item to grow if necessary.
+flex:addButton():setFlexShrink(1) -- The flex-shrink property defines the ability for a flex item to shrink if necessary.
+flex:addButton():setFlexBasis(1) -- The flex-basis property defines the default size of an element before the remaining space is distributed.
+```
+
+
+
 ## Properties
 
 |Property|Type|Default|Description|
@@ -25,7 +44,7 @@ This is the Flexbox class. It is a container that arranges its children in a fle
 |---|---|---|
 |Flexbox:init|Flexbox|Initializes the Flexbox instance
 |Flexbox:removeChild|Flexbox|Removes a child element from the flexbox
-|Flexbox:render|Flexbox|Renders the flexbox and its children
+|Flexbox:render|-|Renders the flexbox and its children
 
 ## Flexbox:addChild(element)
 Adds a child element to the flexbox

docs/references/elements/Graph.md

@@ -1,6 +1,22 @@
 # Graph : VisualElement
 This is the base class for all graph elements. It is a point based graph.
 
+### Usage
+ ```lua
+local graph = main:addGraph()
+:addSeries("input", " ", colors.green, colors.green, 10)
+:addSeries("output", " ", colors.red, colors.red, 10)
+
+basalt.schedule(function()
+while true do
+graph:addPoint("input", math.random(1,100))
+graph:addPoint("output", math.random(1,100))
+sleep(2)
+end
+end)
+```
+
+
 ## Properties
 
 |Property|Type|Default|Description|
@@ -16,6 +32,7 @@ This is the base class for all graph elements. It is a point based graph.
 |[Graph:addPoint](#graph-addpoint)|Graph|Adds a point to a series
 |[Graph:addSeries](#graph-addseries)|-|Adds a series to the graph
 |[Graph:changeSeriesVisibility](#graph-changeseriesvisibility)|Graph|Changes the visibility of a series
+|[Graph:clear](#graph-clear)|Graph|Clears all points from a series
 |[Graph:focusSeries](#graph-focusseries)|Graph|Focuses a series
 |[Graph:getSeries](#graph-getseries)|table?|Gets a series from the graph
 |[Graph:removeSeries](#graph-removeseries)|Graph|Removes a series from the graph
@@ -56,6 +73,15 @@ This is the base class for all graph elements. It is a point based graph.
 ### Returns
 * `Graph` `self` The graph instance
 
+## Graph:clear(name?)
+Clears all points from a series
+
+### Parameters
+* `name` *(optional)* `string` The name of the series
+
+### Returns
+* `Graph` `self` The graph instance
+
 ## Graph:focusSeries(name)
 
 ### Parameters

docs/references/elements/Input.md

@@ -22,9 +22,7 @@ cursor movement, text manipulation, placeholder text, and input validation.
 
 |Method|Returns|Description|
 |---|---|---|
-|[Input:blur](#input-blur)|-|
-|[Input:focus](#input-focus)|-|
-|[Input:setCursor](#input-setcursor)|-|
+|[Input:setCursor](#input-setcursor)|-|Sets the cursor position and color
 |[Input:updateViewport](#input-updateviewport)|Input|Updates the input's viewport
 
 
@@ -32,17 +30,22 @@ cursor movement, text manipulation, placeholder text, and input validation.
 
 |Method|Returns|Description|
 |---|---|---|
+|Input:blur|-|Handles a blur event
 |Input:char|boolean|Handles char events
+|Input:focus|-|Handles a focus event
 |Input:init|Input|Initializes the Input instance
 |Input:key|boolean|Handles key events
 |Input:mouse_click|boolean|Handles mouse click events
 |Input:render|-|Renders the input element
 
-## Input:blur()
+## Input:setCursor(x, y, blink, color)
+Sets the cursor position and color
 
-## Input:focus()
-
-## Input:setCursor()
+### Parameters
+* `x` `number` The x position of the cursor
+* `y` `number` The y position of the cursor
+* `blink` `boolean` Whether the cursor should blink
+* `color` `number` The color of the cursor
 
 ## Input:updateViewport()
 Updates the input's viewport

docs/references/elements/LineChart.md

@@ -1,5 +1,21 @@
 # LineChart : Graph
-This is the line chart class. It is based on the graph element. It draws lines between points.
+The Line Chart element visualizes data series as connected line graphs. It plots points on a coordinate system and connects them with lines.
+
+### Usage
+ ```lua
+local chart = main:addLineChart()
+:addSeries("input", " ", colors.green, colors.green, 10)
+:addSeries("output", " ", colors.red, colors.red, 10)
+
+basalt.schedule(function()
+while true do
+chart:addPoint("input", math.random(1,100))
+chart:addPoint("output", math.random(1,100))
+sleep(2)
+end
+end)
+```
+
 
 
 ## Protected Functions

docs/references/elements/ProgressBar.md

@@ -2,6 +2,14 @@
 This is the progress bar class. It provides a visual representation of progress
 with optional percentage display and customizable colors.
 
+### Usage
+ ```lua
+local progressBar = main:addProgressBar()
+progressBar:setDirection("up") 
+progressBar:setProgress(50)
+```
+
+
 ## Properties
 
 |Property|Type|Default|Description|
@@ -9,6 +17,7 @@ with optional percentage display and customizable colors.
 |progress|number|0|Current progress value (0-100)
 |showPercentage|boolean|false|Whether to show the percentage text in the center
 |progressColor|color|lime|The color used for the filled portion of the progress bar
+|direction|string|right|The direction of the progress bar ("up", "down", "left", "right")
 
 
 ## Protected Functions

docs/references/elements/Table.md

@@ -2,6 +2,14 @@
 This is the table class. It provides a sortable data grid with customizable columns,
 row selection, and scrolling capabilities.
 
+### Usage
+ ```lua
+local people = container:addTable():setWidth(40)
+people:setColumns({{name="Name",width=12}, {name="Age",width=10}, {name="Country",width=15}})
+people:setData({{"Alice", 30, "USA"}, {"Bob", 25, "UK"}})
+```
+
+
 ## Properties
 
 |Property|Type|Default|Description|
@@ -32,11 +40,12 @@ row selection, and scrolling capabilities.
 |Table:mouse_scroll|boolean|Handles scrolling through the table data
 |Table:render|-|Renders the table with headers, data and scrollbar
 
-## Table:sortData(columnIndex)
+## Table:sortData(columnIndex, fn)
 Sorts the table data by column
 
 ### Parameters
 * `columnIndex` `number` The index of the column to sort by
+* `fn` `function?` Optional custom sorting function
 
 ### Returns
 * `Table` `self` The Table instance