Mike/FlexLove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs update

Browse Source
This commit is contained in:
Michael Freno
2025-11-17 02:04:30 -05:00
parent 08a25f2d29
commit db9b0ee60c
4 changed files with 198 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
docs/examples.html
View File

@@ -269,72 +269,118 @@ FlexLove.new({
width = "100%" width = "100%"
})</code></pre> })</code></pre>
<h3>Grid Layout with Wrapping</h3> <h3>True Grid Layout</h3>
<pre><code class="language-lua">-- Create a grid container <pre><code class="language-lua">-- Create a true grid with positioning = "grid"
local gridContainer = FlexLove.new({ local gridContainer = FlexLove.new({
parent = window, parent = window,
positioning = "flex", positioning = "grid",
flexDirection = "horizontal", gridRows = 3,
flexWrap = "wrap", gridColumns = 3,
justifyContent = "space-between", columnGap = 5,
alignItems = "flex-start", rowGap = 5,
gap = 10, height = "80%",
height = "80%" alignItems = "stretch"
}) })
-- Add grid items (will automatically wrap) -- Add grid items (auto-flow into cells)
for i = 1, 6 do for i = 1, 9 do
FlexLove.new({ FlexLove.new({
parent = gridContainer, parent = gridContainer,
width = "45%",
height = "40%",
themeComponent = "buttonv2", themeComponent = "buttonv2",
text = "Item " .. i, text = "Cell " .. i,
textAlign = "center", textAlign = "center",
textSize = "md", textSize = "md",
onEvent = function(_, event) onEvent = function(_, event)
if event.type == "release" then if event.type == "release" then
print("Grid item " .. i .. " clicked") print("Grid cell " .. i .. " clicked")
end end
end end
}) })
end</code></pre> end</code></pre>
<h3>Nested Flex Containers</h3> <h3>Grid with Headers (Schedule-style)</h3>
<pre><code class="language-lua">-- Horizontal container with space-around <pre><code class="language-lua">local Color = FlexLove.Color
local nestedFlex = FlexLove.new({ local Theme = FlexLove.Theme
-- Example data
local columnHeaders = { "Mon", "Tue", "Wed" }
local rowHeaders = { "Task A", "Task B", "Task C" }
-- Calculate grid dimensions: +1 for header row and column
local numRows = #rowHeaders + 1
local numColumns = #columnHeaders + 1
local scheduleGrid = FlexLove.new({
parent = window, parent = window,
positioning = "flex", positioning = "grid",
flexDirection = "horizontal", gridRows = numRows,
justifyContent = "space-around", gridColumns = numColumns,
alignItems = "center", columnGap = 2,
gap = 10, rowGap = 2,
height = "40%" height = "80%",
alignItems = "stretch"
}) })
-- Add buttons that will be spaced evenly local accentColor = Theme.getColor("primary")
local textColor = Theme.getColor("text")
-- Top-left corner cell (empty)
FlexLove.new({ parent = scheduleGrid })
-- Column headers
for _, header in ipairs(columnHeaders) do
FlexLove.new({ FlexLove.new({
parent = nestedFlex, parent = scheduleGrid,
text = "Button A", text = header,
themeComponent = "buttonv1", textColor = textColor,
width = "25%", textAlign = "center",
textAlign = "center" backgroundColor = Color.new(0, 0, 0, 0.3),
border = { top = true, right = true, bottom = true, left = true },
borderColor = accentColor,
textSize = 12
})
end
-- Data rows
for i, rowHeader in ipairs(rowHeaders) do
-- Row header
FlexLove.new({
parent = scheduleGrid,
text = rowHeader,
backgroundColor = Color.new(0, 0, 0, 0.3),
textColor = textColor,
textAlign = "center",
border = { top = true, right = true, bottom = true, left = true },
borderColor = accentColor,
textSize = 10
}) })
-- Data cells
for j = 1, #columnHeaders do
FlexLove.new({ FlexLove.new({
parent = nestedFlex, parent = scheduleGrid,
text = "Button B", text = tostring((i * j) % 5),
textAlign = "center",
border = { top = true, right = true, bottom = true, left = true },
borderColor = Color.new(0.5, 0.5, 0.5, 1.0),
textSize = 12,
themeComponent = "buttonv2", themeComponent = "buttonv2",
width = "25%", onEvent = function(elem, event)
textAlign = "center" if event.type == "click" then
})</code></pre> local newValue = (tonumber(elem.text) + 1) % 10
elem:updateText(tostring(newValue))
end
end
})
end
end</code></pre>
<div class="note"> <div class="note">
<p> <p>
<strong>💡 Tip:</strong> Use <code>flexDirection</code> to control <strong>💡 Tip:</strong> Use <code>positioning = "grid"</code> with
layout direction (horizontal/vertical), <code>gridRows</code> and <code>gridColumns</code> to create true grid
<code>justifyContent</code> for main axis alignment, and layouts. Children auto-flow into cells left-to-right, top-to-bottom.
<code>alignItems</code> for cross axis alignment. Perfect for tables, schedules, and structured data displays.
</p> </p>
</div> </div>

6
docs/index.html
View File

@@ -8,6 +8,12 @@
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css"
/> />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/lua.min.js"></script>
<style> <style>
body { body {
margin: 0; margin: 0;

153
examples/advanced_layout.lua
View File

@@ -4,6 +4,8 @@
]] ]]
local FlexLove = require("libs.FlexLove") local FlexLove = require("libs.FlexLove")
local Color = FlexLove.Color
local Theme = FlexLove.Theme
-- Create the main window -- Create the main window
local window = FlexLove.new({ local window = FlexLove.new({
@@ -38,7 +40,7 @@ local flexContainer = FlexLove.new({
height = "70%", height = "70%",
}) })
-- Left panel - Grid layout -- Left panel - True Grid Layout
local leftPanel = FlexLove.new({ local leftPanel = FlexLove.new({
parent = flexContainer, parent = flexContainer,
width = "40%", width = "40%",
@@ -50,43 +52,41 @@ local leftPanel = FlexLove.new({
FlexLove.new({ FlexLove.new({
parent = leftPanel, parent = leftPanel,
text = "Grid Layout Example", text = "True Grid Layout (3x3)",
textAlign = "center", textAlign = "center",
textSize = "lg", textSize = "lg",
width = "100%", width = "100%",
}) })
-- Grid container -- Grid container using positioning = "grid"
local gridContainer = FlexLove.new({ local gridContainer = FlexLove.new({
parent = leftPanel, parent = leftPanel,
positioning = "flex", positioning = "grid",
flexDirection = "horizontal", gridRows = 3,
flexWrap = "wrap", gridColumns = 3,
justifyContent = "space-between", columnGap = 5,
alignItems = "flex-start", rowGap = 5,
gap = 10,
height = "80%", height = "80%",
alignItems = "stretch",
}) })
-- Grid items -- Grid items (will auto-flow into cells)
for i = 1, 6 do for i = 1, 9 do
FlexLove.new({ FlexLove.new({
parent = gridContainer, parent = gridContainer,
width = "45%",
height = "40%",
themeComponent = "buttonv2", themeComponent = "buttonv2",
text = "Item " .. i, text = "Cell " .. i,
textAlign = "center", textAlign = "center",
textSize = "md", textSize = "md",
onEvent = function(_, event) onEvent = function(_, event)
if event.type == "release" then if event.type == "release" then
print("Grid item " .. i .. " clicked") print("Grid cell " .. i .. " clicked")
end end
end, end,
}) })
end end
-- Right panel - Flex layout with nested flex containers -- Right panel - Grid with Headers (like a schedule)
local rightPanel = FlexLove.new({ local rightPanel = FlexLove.new({
parent = flexContainer, parent = flexContainer,
width = "55%", width = "55%",
@@ -97,75 +97,88 @@ local rightPanel = FlexLove.new({
FlexLove.new({ FlexLove.new({
parent = rightPanel, parent = rightPanel,
text = "Nested Flex Containers", text = "Grid with Headers (4x4)",
textAlign = "center", textAlign = "center",
textSize = "lg", textSize = "lg",
width = "100%", width = "100%",
}) })
-- First nested flex container -- Example data for schedule-like grid
local nestedFlex1 = FlexLove.new({ local columnHeaders = { "Mon", "Tue", "Wed" }
local rowHeaders = { "Task A", "Task B", "Task C" }
-- Calculate grid dimensions: +1 for header row and column
local numRows = #rowHeaders + 1 -- +1 for header row
local numColumns = #columnHeaders + 1 -- +1 for row labels column
local scheduleGrid = FlexLove.new({
parent = rightPanel, parent = rightPanel,
positioning = "flex", positioning = "grid",
flexDirection = "horizontal", gridRows = numRows,
justifyContent = "space-around", gridColumns = numColumns,
alignItems = "center", columnGap = 2,
gap = 10, rowGap = 2,
height = "40%", height = "80%",
})
FlexLove.new({
parent = nestedFlex1,
text = "Button A",
themeComponent = "buttonv1",
width = "25%",
textAlign = "center",
onEvent = function(_, event)
if event.type == "release" then
print("Button A clicked")
end
end,
})
FlexLove.new({
parent = nestedFlex1,
text = "Button B",
themeComponent = "buttonv2",
width = "25%",
textAlign = "center",
onEvent = function(_, event)
if event.type == "release" then
print("Button B clicked")
end
end,
})
-- Second nested flex container
local nestedFlex2 = FlexLove.new({
parent = rightPanel,
positioning = "flex",
flexDirection = "vertical",
justifyContent = "space-around",
alignItems = "stretch", alignItems = "stretch",
gap = 10,
height = "50%",
}) })
local accentColor = Theme.getColor("primary")
local textColor = Theme.getColor("text")
-- Top-left corner cell (empty)
FlexLove.new({ FlexLove.new({
parent = nestedFlex2, parent = scheduleGrid,
text = "Vertical Flex Item 1",
themeComponent = "framev3",
textAlign = "center",
padding = { vertical = 10 },
}) })
-- Column headers
for _, header in ipairs(columnHeaders) do
FlexLove.new({ FlexLove.new({
parent = nestedFlex2, parent = scheduleGrid,
text = "Vertical Flex Item 2", text = header,
themeComponent = "framev3", textColor = textColor,
textAlign = "center", textAlign = "center",
padding = { vertical = 10 }, backgroundColor = Color.new(0, 0, 0, 0.3),
border = { top = true, right = true, bottom = true, left = true },
borderColor = accentColor,
textSize = 12,
}) })
end
-- Data rows
for i, rowHeader in ipairs(rowHeaders) do
-- Row header
FlexLove.new({
parent = scheduleGrid,
text = rowHeader,
backgroundColor = Color.new(0, 0, 0, 0.3),
textColor = textColor,
textAlign = "center",
border = { top = true, right = true, bottom = true, left = true },
borderColor = accentColor,
textSize = 10,
})
-- Data cells
for j = 1, #columnHeaders do
local value = (i * j) % 5
FlexLove.new({
parent = scheduleGrid,
text = tostring(value),
textAlign = "center",
border = { top = true, right = true, bottom = true, left = true },
borderColor = Color.new(0.5, 0.5, 0.5, 1.0),
textSize = 12,
themeComponent = "buttonv2",
onEvent = function(elem, event)
if event.type == "click" then
local newValue = (tonumber(elem.text) + 1) % 10
elem:updateText(tostring(newValue))
print("Cell [" .. i .. "," .. j .. "] clicked, new value: " .. newValue)
end
end,
})
end
end
-- Footer with progress bar -- Footer with progress bar
local footer = FlexLove.new({ local footer = FlexLove.new({

24
scripts/make-tag.sh
View File

@@ -113,8 +113,9 @@ echo ""
echo -e "${YELLOW}This will:${NC}" echo -e "${YELLOW}This will:${NC}"
echo " 1. Update FlexLove.lua → flexlove._VERSION = \"${NEW_VERSION}\"" echo " 1. Update FlexLove.lua → flexlove._VERSION = \"${NEW_VERSION}\""
echo " 2. Update README.md → first line version" echo " 2. Update README.md → first line version"
echo " 3. Stage changes for commit" echo " 3. Update docs/index.html → footer version"
echo " 4. Create git tag v${NEW_VERSION}" echo " 4. Stage changes for commit"
echo " 5. Create git tag v${NEW_VERSION}"
echo "" echo ""
read -p "Proceed? (y/n) " -n 1 -r read -p "Proceed? (y/n) " -n 1 -r
echo "" echo ""
@@ -141,8 +142,17 @@ else
echo -e "${YELLOW}Found: $FIRST_LINE${NC}" echo -e "${YELLOW}Found: $FIRST_LINE${NC}"
fi fi
echo -e "${CYAN}[3/4]${NC} Staging changes..." echo -e "${CYAN}[3/5]${NC} Updating docs/index.html..."
git add FlexLove.lua README.md if [ -f docs/index.html ]; then
sed -i.bak -E "s/FlexLöve v[0-9]+\.[0-9]+\.[0-9]+/FlexLöve v${NEW_VERSION}/" docs/index.html
rm -f docs/index.html.bak
echo -e "${GREEN}✓ docs/index.html updated${NC}"
else
echo -e "${YELLOW}⚠ docs/index.html not found, skipping${NC}"
fi
echo -e "${CYAN}[4/5]${NC} Staging changes..."
git add FlexLove.lua README.md docs/index.html
echo -e "${GREEN}✓ Changes staged${NC}" echo -e "${GREEN}✓ Changes staged${NC}"
echo "" echo ""
@@ -161,7 +171,7 @@ if [[ ! $REPLY =~ ^[Yy]$ ]]; then
echo "You can:" echo "You can:"
echo " - Review changes: git diff --cached" echo " - Review changes: git diff --cached"
echo " - Commit manually: git commit -m 'v${NEW_VERSION} release'" echo " - Commit manually: git commit -m 'v${NEW_VERSION} release'"
echo " - Unstage: git restore --staged FlexLove.lua README.md" echo " - Unstage: git restore --staged FlexLove.lua README.md docs/index.html"
exit 0 exit 0
fi fi
@@ -189,13 +199,13 @@ if [[ ! $REPLY =~ ^[Yy]$ ]]; then
echo "You can:" echo "You can:"
echo " - Review changes: git diff --cached" echo " - Review changes: git diff --cached"
echo " - Commit manually: git commit -m 'v${NEW_VERSION} release'" echo " - Commit manually: git commit -m 'v${NEW_VERSION} release'"
echo " - Unstage: git restore --staged FlexLove.lua README.md" echo " - Unstage: git restore --staged FlexLove.lua README.md docs/index.html"
exit 0 exit 0
fi fi
# Commit changes # Commit changes
echo "" echo ""
echo -e "${CYAN}[4/4]${NC} Committing and tagging..." echo -e "${CYAN}[5/5]${NC} Committing and tagging..."
git commit -m "$COMMIT_MSG" git commit -m "$COMMIT_MSG"
git tag -a "v${NEW_VERSION}" -m "Release version ${NEW_VERSION}" git tag -a "v${NEW_VERSION}" -m "Release version ${NEW_VERSION}"