docs update
This commit is contained in:
Michael Freno
@@ -269,72 +269,118 @@ FlexLove.new({
|
||||
width = "100%"
|
||||
})</code></pre>
|
||||
|
||||
<h3>Grid Layout with Wrapping</h3>
|
||||
<pre><code class="language-lua">-- Create a grid container
|
||||
<h3>True Grid Layout</h3>
|
||||
<pre><code class="language-lua">-- Create a true grid with positioning = "grid"
|
||||
local gridContainer = FlexLove.new({
|
||||
parent = window,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
flexWrap = "wrap",
|
||||
justifyContent = "space-between",
|
||||
alignItems = "flex-start",
|
||||
gap = 10,
|
||||
height = "80%"
|
||||
positioning = "grid",
|
||||
gridRows = 3,
|
||||
gridColumns = 3,
|
||||
columnGap = 5,
|
||||
rowGap = 5,
|
||||
height = "80%",
|
||||
alignItems = "stretch"
|
||||
})
|
||||
|
||||
-- Add grid items (will automatically wrap)
|
||||
for i = 1, 6 do
|
||||
-- Add grid items (auto-flow into cells)
|
||||
for i = 1, 9 do
|
||||
FlexLove.new({
|
||||
parent = gridContainer,
|
||||
width = "45%",
|
||||
height = "40%",
|
||||
themeComponent = "buttonv2",
|
||||
text = "Item " .. i,
|
||||
text = "Cell " .. i,
|
||||
textAlign = "center",
|
||||
textSize = "md",
|
||||
onEvent = function(_, event)
|
||||
if event.type == "release" then
|
||||
print("Grid item " .. i .. " clicked")
|
||||
print("Grid cell " .. i .. " clicked")
|
||||
end
|
||||
end
|
||||
})
|
||||
end</code></pre>
|
||||
|
||||
<h3>Nested Flex Containers</h3>
|
||||
<pre><code class="language-lua">-- Horizontal container with space-around
|
||||
local nestedFlex = FlexLove.new({
|
||||
<h3>Grid with Headers (Schedule-style)</h3>
|
||||
<pre><code class="language-lua">local Color = FlexLove.Color
|
||||
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,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
justifyContent = "space-around",
|
||||
alignItems = "center",
|
||||
gap = 10,
|
||||
height = "40%"
|
||||
positioning = "grid",
|
||||
gridRows = numRows,
|
||||
gridColumns = numColumns,
|
||||
columnGap = 2,
|
||||
rowGap = 2,
|
||||
height = "80%",
|
||||
alignItems = "stretch"
|
||||
})
|
||||
|
||||
-- Add buttons that will be spaced evenly
|
||||
FlexLove.new({
|
||||
parent = nestedFlex,
|
||||
text = "Button A",
|
||||
themeComponent = "buttonv1",
|
||||
width = "25%",
|
||||
textAlign = "center"
|
||||
})
|
||||
local accentColor = Theme.getColor("primary")
|
||||
local textColor = Theme.getColor("text")
|
||||
|
||||
FlexLove.new({
|
||||
parent = nestedFlex,
|
||||
text = "Button B",
|
||||
themeComponent = "buttonv2",
|
||||
width = "25%",
|
||||
textAlign = "center"
|
||||
})</code></pre>
|
||||
-- Top-left corner cell (empty)
|
||||
FlexLove.new({ parent = scheduleGrid })
|
||||
|
||||
-- Column headers
|
||||
for _, header in ipairs(columnHeaders) do
|
||||
FlexLove.new({
|
||||
parent = scheduleGrid,
|
||||
text = header,
|
||||
textColor = textColor,
|
||||
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({
|
||||
parent = scheduleGrid,
|
||||
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",
|
||||
onEvent = function(elem, event)
|
||||
if event.type == "click" then
|
||||
local newValue = (tonumber(elem.text) + 1) % 10
|
||||
elem:updateText(tostring(newValue))
|
||||
end
|
||||
end
|
||||
})
|
||||
end
|
||||
end</code></pre>
|
||||
|
||||
<div class="note">
|
||||
<p>
|
||||
<strong>💡 Tip:</strong> Use <code>flexDirection</code> to control
|
||||
layout direction (horizontal/vertical),
|
||||
<code>justifyContent</code> for main axis alignment, and
|
||||
<code>alignItems</code> for cross axis alignment.
|
||||
<strong>💡 Tip:</strong> Use <code>positioning = "grid"</code> with
|
||||
<code>gridRows</code> and <code>gridColumns</code> to create true grid
|
||||
layouts. Children auto-flow into cells left-to-right, top-to-bottom.
|
||||
Perfect for tables, schedules, and structured data displays.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,6 +8,12 @@
|
||||
rel="stylesheet"
|
||||
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>
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
]]
|
||||
|
||||
local FlexLove = require("libs.FlexLove")
|
||||
local Color = FlexLove.Color
|
||||
local Theme = FlexLove.Theme
|
||||
|
||||
-- Create the main window
|
||||
local window = FlexLove.new({
|
||||
@@ -38,7 +40,7 @@ local flexContainer = FlexLove.new({
|
||||
height = "70%",
|
||||
})
|
||||
|
||||
-- Left panel - Grid layout
|
||||
-- Left panel - True Grid Layout
|
||||
local leftPanel = FlexLove.new({
|
||||
parent = flexContainer,
|
||||
width = "40%",
|
||||
@@ -50,43 +52,41 @@ local leftPanel = FlexLove.new({
|
||||
|
||||
FlexLove.new({
|
||||
parent = leftPanel,
|
||||
text = "Grid Layout Example",
|
||||
text = "True Grid Layout (3x3)",
|
||||
textAlign = "center",
|
||||
textSize = "lg",
|
||||
width = "100%",
|
||||
})
|
||||
|
||||
-- Grid container
|
||||
-- Grid container using positioning = "grid"
|
||||
local gridContainer = FlexLove.new({
|
||||
parent = leftPanel,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
flexWrap = "wrap",
|
||||
justifyContent = "space-between",
|
||||
alignItems = "flex-start",
|
||||
gap = 10,
|
||||
positioning = "grid",
|
||||
gridRows = 3,
|
||||
gridColumns = 3,
|
||||
columnGap = 5,
|
||||
rowGap = 5,
|
||||
height = "80%",
|
||||
alignItems = "stretch",
|
||||
})
|
||||
|
||||
-- Grid items
|
||||
for i = 1, 6 do
|
||||
-- Grid items (will auto-flow into cells)
|
||||
for i = 1, 9 do
|
||||
FlexLove.new({
|
||||
parent = gridContainer,
|
||||
width = "45%",
|
||||
height = "40%",
|
||||
themeComponent = "buttonv2",
|
||||
text = "Item " .. i,
|
||||
text = "Cell " .. i,
|
||||
textAlign = "center",
|
||||
textSize = "md",
|
||||
onEvent = function(_, event)
|
||||
if event.type == "release" then
|
||||
print("Grid item " .. i .. " clicked")
|
||||
print("Grid cell " .. i .. " clicked")
|
||||
end
|
||||
end,
|
||||
})
|
||||
end
|
||||
|
||||
-- Right panel - Flex layout with nested flex containers
|
||||
-- Right panel - Grid with Headers (like a schedule)
|
||||
local rightPanel = FlexLove.new({
|
||||
parent = flexContainer,
|
||||
width = "55%",
|
||||
@@ -97,75 +97,88 @@ local rightPanel = FlexLove.new({
|
||||
|
||||
FlexLove.new({
|
||||
parent = rightPanel,
|
||||
text = "Nested Flex Containers",
|
||||
text = "Grid with Headers (4x4)",
|
||||
textAlign = "center",
|
||||
textSize = "lg",
|
||||
width = "100%",
|
||||
})
|
||||
|
||||
-- First nested flex container
|
||||
local nestedFlex1 = FlexLove.new({
|
||||
-- Example data for schedule-like grid
|
||||
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,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
justifyContent = "space-around",
|
||||
alignItems = "center",
|
||||
gap = 10,
|
||||
height = "40%",
|
||||
})
|
||||
|
||||
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",
|
||||
positioning = "grid",
|
||||
gridRows = numRows,
|
||||
gridColumns = numColumns,
|
||||
columnGap = 2,
|
||||
rowGap = 2,
|
||||
height = "80%",
|
||||
alignItems = "stretch",
|
||||
gap = 10,
|
||||
height = "50%",
|
||||
})
|
||||
|
||||
local accentColor = Theme.getColor("primary")
|
||||
local textColor = Theme.getColor("text")
|
||||
|
||||
-- Top-left corner cell (empty)
|
||||
FlexLove.new({
|
||||
parent = nestedFlex2,
|
||||
text = "Vertical Flex Item 1",
|
||||
themeComponent = "framev3",
|
||||
textAlign = "center",
|
||||
padding = { vertical = 10 },
|
||||
parent = scheduleGrid,
|
||||
})
|
||||
|
||||
FlexLove.new({
|
||||
parent = nestedFlex2,
|
||||
text = "Vertical Flex Item 2",
|
||||
themeComponent = "framev3",
|
||||
textAlign = "center",
|
||||
padding = { vertical = 10 },
|
||||
})
|
||||
-- Column headers
|
||||
for _, header in ipairs(columnHeaders) do
|
||||
FlexLove.new({
|
||||
parent = scheduleGrid,
|
||||
text = header,
|
||||
textColor = textColor,
|
||||
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
|
||||
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
|
||||
local footer = FlexLove.new({
|
||||
|
||||
@@ -113,8 +113,9 @@ echo ""
|
||||
echo -e "${YELLOW}This will:${NC}"
|
||||
echo " 1. Update FlexLove.lua → flexlove._VERSION = \"${NEW_VERSION}\""
|
||||
echo " 2. Update README.md → first line version"
|
||||
echo " 3. Stage changes for commit"
|
||||
echo " 4. Create git tag v${NEW_VERSION}"
|
||||
echo " 3. Update docs/index.html → footer version"
|
||||
echo " 4. Stage changes for commit"
|
||||
echo " 5. Create git tag v${NEW_VERSION}"
|
||||
echo ""
|
||||
read -p "Proceed? (y/n) " -n 1 -r
|
||||
echo ""
|
||||
@@ -141,8 +142,17 @@ else
|
||||
echo -e "${YELLOW}Found: $FIRST_LINE${NC}"
|
||||
fi
|
||||
|
||||
echo -e "${CYAN}[3/4]${NC} Staging changes..."
|
||||
git add FlexLove.lua README.md
|
||||
echo -e "${CYAN}[3/5]${NC} Updating docs/index.html..."
|
||||
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 ""
|
||||
@@ -161,7 +171,7 @@ if [[ ! $REPLY =~ ^[Yy]$ ]]; then
|
||||
echo "You can:"
|
||||
echo " - Review changes: git diff --cached"
|
||||
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
|
||||
fi
|
||||
|
||||
@@ -189,13 +199,13 @@ if [[ ! $REPLY =~ ^[Yy]$ ]]; then
|
||||
echo "You can:"
|
||||
echo " - Review changes: git diff --cached"
|
||||
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
|
||||
fi
|
||||
|
||||
# Commit changes
|
||||
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 tag -a "v${NEW_VERSION}" -m "Release version ${NEW_VERSION}"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user