Exported source
list_ui = SingleValueFactory("list", "A vertical flex layout to include list rows") # List container
list_row = SingleValueFactory("list-row", "The item inside list - a horizontal grid layout to include data") # List rowlist
List is a vertical layout to display information in rows.
Base List
The base list components:
List Modifiers
List modifier utilities for controlling column layout:
Exported source
list_modifiers = SimpleFactory(
{
"col_wrap": "list-col-wrap",
"col_grow": "list-col-grow"
},
"List modifiers for column layout (wrap to next line, fill remaining space)"
) # List modifiersList Test Examples
test_list_basic_examples
test_list_basic_examples ()
Test basic list utilities.
Exported source
def test_list_basic_examples():
"""Test basic list utilities."""
# Basic components
assert str(list_ui) == "list"
assert str(list_row) == "list-row"
# With modifiers
assert str(list_ui.hover) == "hover:list"
assert str(list_row.md) == "md:list-row"
assert str(list_ui.dark) == "dark:list"
# Run the tests
test_list_basic_examples()test_list_modifiers_examples
test_list_modifiers_examples ()
Test list modifier utilities.
Exported source
def test_list_modifiers_examples():
"""Test list modifier utilities."""
assert str(list_modifiers.col_wrap) == "list-col-wrap"
assert str(list_modifiers.col_grow) == "list-col-grow"
# With responsive modifiers
assert str(list_modifiers.col_wrap.hover) == "hover:list-col-wrap"
assert str(list_modifiers.col_grow.md) == "md:list-col-grow"
# Run the tests
test_list_modifiers_examples()test_list_basic_fasthtml_examples
test_list_basic_fasthtml_examples ()
Test basic list example: second column grows (default behavior) from daisyUI v5 documentation.
Exported source
def test_list_basic_fasthtml_examples():
"""Test basic list example: second column grows (default behavior) from daisyUI v5 documentation."""
from fasthtml.common import Ul, Li, Div, Img, Button
from fasthtml.svg import Svg, Path, G
from cjm_fasthtml_tailwind.utilities.sizing import size_util
from cjm_fasthtml_tailwind.utilities.spacing import p
from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, tracking, uppercase
from cjm_fasthtml_tailwind.utilities.effects import opacity, shadow
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
# Create SVG icons as reusable components
play_icon = Svg(
G(
Path(d="M6 3L20 12 6 21 6 3z"),
stroke_linejoin="round",
stroke_linecap="round",
stroke_width="2",
fill="none",
stroke="currentColor"
),
cls=str(size_util("[1.2em]")),
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 24 24"
)
heart_icon = Svg(
G(
Path(d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"),
stroke_linejoin="round",
stroke_linecap="round",
stroke_width="2",
fill="none",
stroke="currentColor"
),
cls=str(size_util("[1.2em]")),
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 24 24"
)
# List with second column growing (default behavior)
list_second_column_grows = Ul(
Li("Most played songs this week", cls=combine_classes(p._4, p.b._2, font_size.xs, opacity._60, tracking.wide)),
Li(
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/1@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Dio Lupa"),
Div("Remaining Reason", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
Button(
heart_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
Li(
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/4@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Ellie Beilish"),
Div("Bears of a fever", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
Button(
heart_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
Li(
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/3@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Sabrino Gardener"),
Div("Cappuccino", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
Button(
heart_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
cls=combine_classes(list_ui, bg_dui.base_100, border_radius.box, shadow.md)
)
# Verify list structure
assert "list" in list_second_column_grows.attrs['class']
assert "bg-base-100" in list_second_column_grows.attrs['class']
assert "rounded-box" in list_second_column_grows.attrs['class']
assert "shadow-md" in list_second_column_grows.attrs['class']
# Verify header
header = list_second_column_grows.children[0]
assert header.tag == "li"
assert "p-4" in header.attrs['class']
assert "pb-2" in header.attrs['class']
assert "text-xs" in header.attrs['class']
assert "opacity-60" in header.attrs['class']
assert "tracking-wide" in header.attrs['class']
assert header.children[0] == "Most played songs this week"
# Verify first song row
first_row = list_second_column_grows.children[1]
assert first_row.tag == "li"
assert "list-row" in first_row.attrs['class']
assert len(first_row.children) == 4 # Image, text content, play button, heart button
# Verify image column
image_col = first_row.children[0]
assert image_col.tag == "div"
assert image_col.children[0].tag == "img"
assert "size-10" in image_col.children[0].attrs['class']
assert "rounded-box" in image_col.children[0].attrs['class']
assert image_col.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/1@94.webp"
# Verify text column (second column that grows by default)
text_col = first_row.children[1]
assert text_col.tag == "div"
assert len(text_col.children) == 2
assert text_col.children[0].tag == "div"
assert text_col.children[0].children[0] == "Dio Lupa"
assert text_col.children[1].tag == "div"
assert text_col.children[1].children[0] == "Remaining Reason"
assert "text-xs" in text_col.children[1].attrs['class']
assert "uppercase" in text_col.children[1].attrs['class']
assert "font-semibold" in text_col.children[1].attrs['class']
assert "opacity-60" in text_col.children[1].attrs['class']
# Verify play button
play_btn = first_row.children[2]
assert play_btn.tag == "button"
assert "btn" in play_btn.attrs['class']
assert "btn-square" in play_btn.attrs['class']
assert "btn-ghost" in play_btn.attrs['class']
assert play_btn.children[0].tag == "svg"
assert "size-[1.2em]" in play_btn.children[0].attrs['class']
# Verify heart button
heart_btn = first_row.children[3]
assert heart_btn.tag == "button"
assert "btn" in heart_btn.attrs['class']
assert "btn-square" in heart_btn.attrs['class']
assert "btn-ghost" in heart_btn.attrs['class']
assert heart_btn.children[0].tag == "svg"
assert "size-[1.2em]" in heart_btn.children[0].attrs['class']
# Verify second song row has different content
second_row = list_second_column_grows.children[2]
assert "list-row" in second_row.attrs['class']
assert second_row.children[1].children[0].children[0] == "Ellie Beilish"
assert second_row.children[1].children[1].children[0] == "Bears of a fever"
# Verify third song row has different content
third_row = list_second_column_grows.children[3]
assert "list-row" in third_row.attrs['class']
assert third_row.children[1].children[0].children[0] == "Sabrino Gardener"
assert third_row.children[1].children[1].children[0] == "Cappuccino"
# Return the created element in a Div
return Div(list_second_column_grows)
# Run the tests
test_list_basic_fasthtml_examples()<div>
<ul class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="list-row">
<div>
<img src="https://img.daisyui.com/images/profile/demo/1@94.webp" class="size-10 rounded-box"> </div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg></button> </li>
<li class="list-row">
<div>
<img src="https://img.daisyui.com/images/profile/demo/4@94.webp" class="size-10 rounded-box"> </div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg></button> </li>
<li class="list-row">
<div>
<img src="https://img.daisyui.com/images/profile/demo/3@94.webp" class="size-10 rounded-box"> </div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg></button> </li>
</ul>
</div>test_func = test_list_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)
@rt
def index():
return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()test_list_column_grow_fasthtml_examples
test_list_column_grow_fasthtml_examples ()
Test list example: third column grows from daisyUI v5 documentation.
Exported source
def test_list_column_grow_fasthtml_examples():
"""Test list example: third column grows from daisyUI v5 documentation."""
from fasthtml.common import Ul, Li, Div, Img, Button
from fasthtml.svg import Svg, Path, G
from cjm_fasthtml_tailwind.utilities.sizing import size_util
from cjm_fasthtml_tailwind.utilities.spacing import p
from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, tracking, tabular_nums, font_weight, uppercase
from cjm_fasthtml_tailwind.utilities.effects import opacity, shadow
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
# Create reusable play icon
play_icon = Svg(
G(
Path(d="M6 3L20 12 6 21 6 3z"),
stroke_linejoin="round",
stroke_linecap="round",
stroke_width="2",
fill="none",
stroke="currentColor"
),
cls=str(size_util("[1.2em]")),
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 24 24"
)
# List with third column growing using list-col-grow
list_third_column_grows = Ul(
Li("Most played songs this week", cls=combine_classes(p._4, p.b._2, font_size.xs, opacity._60, tracking.wide)),
Li(
Div("01", cls=combine_classes(font_size._4xl, font_weight.thin, opacity._30, tabular_nums)),
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/1@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Dio Lupa"),
Div("Remaining Reason", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60)),
cls=str(list_modifiers.col_grow)
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
Li(
Div("02", cls=combine_classes(font_size._4xl, font_weight.thin, opacity._30, tabular_nums)),
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/4@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Ellie Beilish"),
Div("Bears of a fever", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60)),
cls=str(list_modifiers.col_grow)
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
Li(
Div("03", cls=combine_classes(font_size._4xl, font_weight.thin, opacity._30, tabular_nums)),
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/3@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Sabrino Gardener"),
Div("Cappuccino", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60)),
cls=str(list_modifiers.col_grow)
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
cls=combine_classes(list_ui, bg_dui.base_100, border_radius.box, shadow.md)
)
# Verify list structure
assert "list" in list_third_column_grows.attrs['class']
assert "bg-base-100" in list_third_column_grows.attrs['class']
assert "rounded-box" in list_third_column_grows.attrs['class']
assert "shadow-md" in list_third_column_grows.attrs['class']
# Verify header
header = list_third_column_grows.children[0]
assert header.tag == "li"
assert "p-4" in header.attrs['class']
assert "pb-2" in header.attrs['class']
assert "text-xs" in header.attrs['class']
assert "opacity-60" in header.attrs['class']
assert header.children[0] == "Most played songs this week"
# Verify first song row
first_row = list_third_column_grows.children[1]
assert first_row.tag == "li"
assert "list-row" in first_row.attrs['class']
assert len(first_row.children) == 4 # Number, image, text content (with col-grow), play button
# Verify number column (first column)
number_col = first_row.children[0]
assert number_col.tag == "div"
assert number_col.children[0] == "01"
assert "text-4xl" in number_col.attrs['class']
assert "font-thin" in number_col.attrs['class']
assert "opacity-30" in number_col.attrs['class']
assert "tabular-nums" in number_col.attrs['class']
# Verify image column (second column)
image_col = first_row.children[1]
assert image_col.tag == "div"
assert image_col.children[0].tag == "img"
assert "size-10" in image_col.children[0].attrs['class']
assert "rounded-box" in image_col.children[0].attrs['class']
assert image_col.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/1@94.webp"
# Verify text column (third column that grows with list-col-grow)
text_col = first_row.children[2]
assert text_col.tag == "div"
assert "list-col-grow" in text_col.attrs['class']
assert len(text_col.children) == 2
assert text_col.children[0].tag == "div"
assert text_col.children[0].children[0] == "Dio Lupa"
assert text_col.children[1].tag == "div"
assert text_col.children[1].children[0] == "Remaining Reason"
assert "text-xs" in text_col.children[1].attrs['class']
assert "uppercase" in text_col.children[1].attrs['class']
assert "font-semibold" in text_col.children[1].attrs['class']
assert "opacity-60" in text_col.children[1].attrs['class']
# Verify play button (fourth column)
play_btn = first_row.children[3]
assert play_btn.tag == "button"
assert "btn" in play_btn.attrs['class']
assert "btn-square" in play_btn.attrs['class']
assert "btn-ghost" in play_btn.attrs['class']
assert play_btn.children[0].tag == "svg"
assert "size-[1.2em]" in play_btn.children[0].attrs['class']
# Verify second song row structure
second_row = list_third_column_grows.children[2]
assert "list-row" in second_row.attrs['class']
assert second_row.children[0].children[0] == "02"
assert "list-col-grow" in second_row.children[2].attrs['class']
assert second_row.children[2].children[0].children[0] == "Ellie Beilish"
assert second_row.children[2].children[1].children[0] == "Bears of a fever"
# Verify third song row structure
third_row = list_third_column_grows.children[3]
assert "list-row" in third_row.attrs['class']
assert third_row.children[0].children[0] == "03"
assert "list-col-grow" in third_row.children[2].attrs['class']
assert third_row.children[2].children[0].children[0] == "Sabrino Gardener"
assert third_row.children[2].children[1].children[0] == "Cappuccino"
# Verify all rows have the col-grow modifier on the text column
for i in range(1, 4): # Rows 1, 2, 3 (skip header)
row = list_third_column_grows.children[i]
text_column = row.children[2] # Third column (index 2)
assert "list-col-grow" in text_column.attrs['class']
# Return the created element in a Div
return Div(list_third_column_grows)
# Run the tests
test_list_column_grow_fasthtml_examples()<div>
<ul class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
<div>
<img src="https://img.daisyui.com/images/profile/demo/1@94.webp" class="size-10 rounded-box"> </div>
<div class="list-col-grow">
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button> </li>
<li class="list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
<div>
<img src="https://img.daisyui.com/images/profile/demo/4@94.webp" class="size-10 rounded-box"> </div>
<div class="list-col-grow">
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button> </li>
<li class="list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
<div>
<img src="https://img.daisyui.com/images/profile/demo/3@94.webp" class="size-10 rounded-box"> </div>
<div class="list-col-grow">
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button> </li>
</ul>
</div>test_func = test_list_column_grow_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)
@rt
def index():
return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()test_list_column_wrap_fasthtml_examples
test_list_column_wrap_fasthtml_examples ()
Test list example: third column wraps to next row from daisyUI v5 documentation.
Exported source
def test_list_column_wrap_fasthtml_examples():
"""Test list example: third column wraps to next row from daisyUI v5 documentation."""
from fasthtml.common import Ul, Li, Div, Img, Button, P
from fasthtml.svg import Svg, Path, G
from cjm_fasthtml_tailwind.utilities.sizing import size_util
from cjm_fasthtml_tailwind.utilities.spacing import p
from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, tracking, uppercase
from cjm_fasthtml_tailwind.utilities.effects import opacity, shadow
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
# Create reusable SVG icons
play_icon = Svg(
G(
Path(d="M6 3L20 12 6 21 6 3z"),
stroke_linejoin="round",
stroke_linecap="round",
stroke_width="2",
fill="none",
stroke="currentColor"
),
cls=str(size_util("[1.2em]")),
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 24 24"
)
heart_icon = Svg(
G(
Path(d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"),
stroke_linejoin="round",
stroke_linecap="round",
stroke_width="2",
fill="none",
stroke="currentColor"
),
cls=str(size_util("[1.2em]")),
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 24 24"
)
# List with third column wrapping to next row using list-col-wrap
list_column_wraps = Ul(
Li("Most played songs this week", cls=combine_classes(p._4, p.b._2, font_size.xs, opacity._60, tracking.wide)),
Li(
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/1@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Dio Lupa"),
Div("Remaining Reason", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
),
P(
'"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa\'s most iconic tracks.',
cls=combine_classes(list_modifiers.col_wrap, font_size.xs)
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
Button(
heart_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
Li(
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/4@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Ellie Beilish"),
Div("Bears of a fever", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
),
P(
'"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.',
cls=combine_classes(list_modifiers.col_wrap, font_size.xs)
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
Button(
heart_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
Li(
Div(
Img(
src="https://img.daisyui.com/images/profile/demo/3@94.webp",
cls=combine_classes(size_util(10), border_radius.box)
)
),
Div(
Div("Sabrino Gardener"),
Div("Cappuccino", cls=combine_classes(font_size.xs, uppercase, font_weight.semibold, opacity._60))
),
P(
'"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song\'s success propelled Sabrino into the spotlight, solidifying their status as a rising star.',
cls=combine_classes(list_modifiers.col_wrap, font_size.xs)
),
Button(
play_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
Button(
heart_icon,
cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
),
cls=str(list_row)
),
cls=combine_classes(list_ui, bg_dui.base_100, border_radius.box, shadow.md)
)
# Verify list structure
assert "list" in list_column_wraps.attrs['class']
assert "bg-base-100" in list_column_wraps.attrs['class']
assert "rounded-box" in list_column_wraps.attrs['class']
assert "shadow-md" in list_column_wraps.attrs['class']
# Verify header
header = list_column_wraps.children[0]
assert header.tag == "li"
assert "p-4" in header.attrs['class']
assert "pb-2" in header.attrs['class']
assert "text-xs" in header.attrs['class']
assert "opacity-60" in header.attrs['class']
assert header.children[0] == "Most played songs this week"
# Verify first song row
first_row = list_column_wraps.children[1]
assert first_row.tag == "li"
assert "list-row" in first_row.attrs['class']
assert len(first_row.children) == 5 # Image, text content, description (col-wrap), play button, heart button
# Verify image column (first column)
image_col = first_row.children[0]
assert image_col.tag == "div"
assert image_col.children[0].tag == "img"
assert "size-10" in image_col.children[0].attrs['class']
assert "rounded-box" in image_col.children[0].attrs['class']
assert image_col.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/1@94.webp"
# Verify text column (second column)
text_col = first_row.children[1]
assert text_col.tag == "div"
assert len(text_col.children) == 2
assert text_col.children[0].tag == "div"
assert text_col.children[0].children[0] == "Dio Lupa"
assert text_col.children[1].tag == "div"
assert text_col.children[1].children[0] == "Remaining Reason"
assert "text-xs" in text_col.children[1].attrs['class']
assert "uppercase" in text_col.children[1].attrs['class']
assert "font-semibold" in text_col.children[1].attrs['class']
assert "opacity-60" in text_col.children[1].attrs['class']
# Verify description column (third column that wraps with list-col-wrap)
desc_col = first_row.children[2]
assert desc_col.tag == "p"
assert "list-col-wrap" in desc_col.attrs['class']
assert "text-xs" in desc_col.attrs['class']
assert '"Remaining Reason" became an instant hit' in desc_col.children[0]
assert "making it one of Dio Lupa's most iconic tracks." in desc_col.children[0]
# Verify play button (fourth column)
play_btn = first_row.children[3]
assert play_btn.tag == "button"
assert "btn" in play_btn.attrs['class']
assert "btn-square" in play_btn.attrs['class']
assert "btn-ghost" in play_btn.attrs['class']
assert play_btn.children[0].tag == "svg"
assert "size-[1.2em]" in play_btn.children[0].attrs['class']
# Verify heart button (fifth column)
heart_btn = first_row.children[4]
assert heart_btn.tag == "button"
assert "btn" in heart_btn.attrs['class']
assert "btn-square" in heart_btn.attrs['class']
assert "btn-ghost" in heart_btn.attrs['class']
assert heart_btn.children[0].tag == "svg"
assert "size-[1.2em]" in heart_btn.children[0].attrs['class']
# Verify second song row structure
second_row = list_column_wraps.children[2]
assert "list-row" in second_row.attrs['class']
assert second_row.children[1].children[0].children[0] == "Ellie Beilish"
assert second_row.children[1].children[1].children[0] == "Bears of a fever"
assert "list-col-wrap" in second_row.children[2].attrs['class']
assert '"Bears of a Fever" captivated audiences' in second_row.children[2].children[0]
assert "earning Ellie critical acclaim." in second_row.children[2].children[0]
# Verify third song row structure
third_row = list_column_wraps.children[3]
assert "list-row" in third_row.attrs['class']
assert third_row.children[1].children[0].children[0] == "Sabrino Gardener"
assert third_row.children[1].children[1].children[0] == "Cappuccino"
assert "list-col-wrap" in third_row.children[2].attrs['class']
assert '"Cappuccino" quickly gained attention' in third_row.children[2].children[0]
assert "solidifying their status as a rising star." in third_row.children[2].children[0]
# Verify all rows have the col-wrap modifier on the description column
for i in range(1, 4): # Rows 1, 2, 3 (skip header)
row = list_column_wraps.children[i]
desc_column = row.children[2] # Third column (index 2)
assert "list-col-wrap" in desc_column.attrs['class']
assert "text-xs" in desc_column.attrs['class']
assert desc_column.tag == "p"
# Return the created element in a Div
return Div(list_column_wraps)
# Run the tests
test_list_column_wrap_fasthtml_examples()<div>
<ul class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="list-row">
<div>
<img src="https://img.daisyui.com/images/profile/demo/1@94.webp" class="size-10 rounded-box"> </div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<p class="list-col-wrap text-xs">"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa's most iconic tracks.</p>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg></button> </li>
<li class="list-row">
<div>
<img src="https://img.daisyui.com/images/profile/demo/4@94.webp" class="size-10 rounded-box"> </div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<p class="list-col-wrap text-xs">"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.</p>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg></button> </li>
<li class="list-row">
<div>
<img src="https://img.daisyui.com/images/profile/demo/3@94.webp" class="size-10 rounded-box"> </div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<p class="list-col-wrap text-xs">"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song's success propelled Sabrino into the spotlight, solidifying their status as a rising star.</p>
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg></button><button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1.2em]"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg></button> </li>
</ul>
</div>test_func = test_list_column_wrap_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)
@rt
def index():
return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()