window mockup

Window mockup shows a box that looks like an operating system window.

Base Window Mockup

mockup_window = SingleValueFactory("mockup-window", "Base OS window mockup") # Base mockup window component

Window Mockup Test Examples

---

source

test_mockup_window_basic_examples

 test_mockup_window_basic_examples ()

Test basic mockup_window utilities.

def test_mockup_window_basic_examples():
    """Test basic mockup_window utilities."""
    # Basic mockup_window
    assert str(mockup_window) == "mockup-window"
    
    # Test with modifiers
    assert str(mockup_window.hover) == "hover:mockup-window"
    assert str(mockup_window.md) == "md:mockup-window"
    assert str(mockup_window.dark) == "dark:mockup-window"

# Run the tests
test_mockup_window_basic_examples()

---

source

test_window_mockup_with_border_fasthtml_examples

 test_window_mockup_with_border_fasthtml_examples ()

Test window mockup with border from daisyUI v5 documentation.

def test_window_mockup_with_border_fasthtml_examples():
    """Test window mockup with border from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.sizing import w, h
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_content, grid_display
    from cjm_fasthtml_daisyui.utilities.semantic_colors import border_dui
    
    # Window mockup with border
    window_with_border = Div(
        Div(
            "Hello!",
            cls=combine_classes(
                grid_display, 
                place_content.center, 
                border.t(), 
                border_dui.base_300, 
                h._80
            )
        ),
        cls=combine_classes(mockup_window, border(), border_dui.base_300, w.full)
    )
    
    # Verify structure
    assert window_with_border.tag == "div"
    assert "mockup-window" in window_with_border.attrs['class']
    assert "border" in window_with_border.attrs['class']
    assert "border-base-300" in window_with_border.attrs['class']
    assert "w-full" in window_with_border.attrs['class']
    
    # Verify content div
    content_div = window_with_border.children[0]
    assert content_div.tag == "div"
    assert "grid" in content_div.attrs['class']
    assert "place-content-center" in content_div.attrs['class']
    assert "border-t" in content_div.attrs['class']
    assert "border-base-300" in content_div.attrs['class']
    assert "h-80" in content_div.attrs['class']
    assert content_div.children[0] == "Hello!"
    
    return window_with_border

# Run the tests
test_window_mockup_with_border_fasthtml_examples()

<div class="mockup-window border border-base-300 w-full">
  <div class="grid place-content-center border-t border-base-300 h-80">Hello!</div>
</div>

test_func = test_window_mockup_with_border_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()

---

source

test_window_mockup_with_background_fasthtml_examples

 test_window_mockup_with_background_fasthtml_examples ()

Test window mockup with background color from daisyUI v5 documentation.

def test_window_mockup_with_background_fasthtml_examples():
    """Test window mockup with background color from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.sizing import h
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_content, grid_display
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    
    # Window mockup with background color
    window_with_bg = Div(
        Div(
            "Hello!",
            cls=combine_classes(grid_display, place_content.center, h._80)
        ),
        cls=combine_classes(mockup_window, bg_dui.base_100, border(), border_dui.base_300)
    )
    
    # Verify structure
    assert window_with_bg.tag == "div"
    assert "mockup-window" in window_with_bg.attrs['class']
    assert "bg-base-100" in window_with_bg.attrs['class']
    assert "border" in window_with_bg.attrs['class']
    assert "border-base-300" in window_with_bg.attrs['class']
    
    # Verify content div
    content_div = window_with_bg.children[0]
    assert content_div.tag == "div"
    assert "grid" in content_div.attrs['class']
    assert "place-content-center" in content_div.attrs['class']
    assert "h-80" in content_div.attrs['class']
    assert content_div.children[0] == "Hello!"
    
    return window_with_bg

# Run the tests
test_window_mockup_with_background_fasthtml_examples()

<div class="mockup-window bg-base-100 border border-base-300">
  <div class="grid place-content-center h-80">Hello!</div>
</div>

test_func = test_window_mockup_with_background_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()