### Install StippleUI.jl

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Use the Julia package manager to add StippleUI.jl to your project.

```julia
pkg> add StippleUI
```

--------------------------------

### Create a Link Button

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

This example demonstrates creating a button that functions as a hyperlink. Specify the 'type' as 'a' and provide the 'href' attribute for navigation.

```julia
btn("Go to Hello World", color = "red", type = "a", href = "hello", icon = "map", iconright = "send")
```

--------------------------------

### Integrate Quasar Component

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Use the `quasar()` function to make Quasar components available in your UI when they are not yet covered by StippleUI. This example shows how to add a button.

```julia
quasar(:btn, label = "Action!") |> println
```

--------------------------------

### StippleUI Example App Structure

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Illustrates building a reactive UI with StippleUI. It demonstrates handling input changes, Enter key presses, and button clicks to modify an output string. Requires Stipple and StippleUI packages.

```julia
using Stipple, StippleUI

@vars Inverter begin
  process = false
  input = ""
  output::String = "", READONLY
end

function handlers(model)
  on(model.input) do input
      model.output[] = input |> reverse
  end

  onbutton(model.process) do
      model.output[] = model.output[] |> reverse
  end

  model
end

function ui()
  row(cell(class = "st-module", [
    textfield(class = "q-my-md", "Input", :input, hint = "Please enter some words", @on("keyup.enter", "process = true"))

    btn(class = "q-my-md", "Action!", @click(:process), color = "primary")
    
    card(class = "q-my-md", [
      card_section(h2("Output"))
      card_section("Variant 1: {{ output }}")
      card_section(["Variant 2: ", span(class = "text-red", @text(:output))])
    ])
  ]))
end

route("/") do
  model = Inverter |> init |> handlers
  page(model, ui()) |> html
end

Genie.isrunning(:webserver) || up()
```

--------------------------------

### Complete Reactive App Example in Julia

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

This is a full working application demonstrating the canonical pattern for building a StippleUI app with reactive model, handlers, and UI. It includes state management, event handling, and UI composition.

```julia
using Stipple, StippleUI

@vars DashboardApp begin
    process   = false
    input::R{String}  = ""
    output::R{String} = "", READONLY
    tab::R{String}    = "input"
    show_help::R{Bool} = false
end

function handlers(model)
    on(model.input) do val
        model.output[] = reverse(val)
    end
    onbutton(model.process) do
        model.output[] = reverse(model.output[])
    end
    model
end

function ui()
    row(cell(class="st-module", [
        tabgroup(:tab, class="bg-primary text-white shadow-2", [
            tab(name="input",  icon="edit",        label="Input"),
            tab(name="output", icon="text_fields", label="Output")
        ]),

        tabpanelgroup(:tab, animated=true, [
            tabpanel(name="input", [
                textfield(class="q-my-md", "Enter text", :input,
                    hint="Type something to reverse it",
                    @on("keyup.enter", "process = true"),
                    clearable=true, filled=true),
                btn(class="q-my-md", "Reverse Again", @click(:process),
                    color="primary", icon="sync_alt", loading=:process)
            ]),
            tabpanel(name="output", [
                card(class="q-my-md", [
                    card_section(Html.div("Result", class="text-h6")),
                    card_section(["Output: ", span(class="text-primary", @text(:output))])
                ])
            ])
        ]),

        btn("Help", flat=true, icon="help", @click("show_help = true")),
        dialog(:show_help, [
            card([
                card_section(Html.div("How to Use", class="text-h6")),
                card_section("Type text in the Input tab. It will be reversed automatically."),
                card_actions(align="right", [btn("Close", flat=true, @click("show_help = false"))])
            ])
        ])
    ]))
end

route("/") do
    model = DashboardApp |> init |> handlers
    page(model, ui()) |> html
end

Genie.isrunning(:webserver) || up()

```

--------------------------------

### Implement Responsive Layouts with StippleUI Flexgrid

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Demonstrates using `row`, `cell`, and the `@gutter` macro for responsive layouts based on Quasar's Flexgrid system. This example creates a 3-column layout that adjusts for medium screens and larger. Requires `Stipple` and `StippleUI`.

```julia
using Stipple, StippleUI

function ui()
    # 3-column responsive layout with gutters
    row(gutter="md", [
        @gutter cell(col=12, md=4,
            card(card_section("Left panel"), flat=true, bordered=true)
        ),
        @gutter cell(col=12, md=4,
            card(card_section("Center panel"), flat=true, bordered=true)
        ),
        @gutter cell(col=12, md=4,
            card(card_section("Right panel"), flat=true, bordered=true)
        )
    ])
end

# Renders:
# <div class="row q-col-gutter-md">
#   <div class="col-12 col-md-4"><div>...</div></div>
#   ...
# </div>
```

--------------------------------

### Test Vue Parsing with Simple HTML

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Use `test_vue_parsing` to verify if HTML strings with Stipple bindings are parsed correctly. This example shows a basic binding and a simple tag.

```julia
test_vue_parsing(raw"<a :hello=\"I need $$$ R\">asap</a>")
```

--------------------------------

### Integrate Vue and HTML Components

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Integrate Vue components or any other HTML component using the `vue()` or `xelem()` functions. This example shows a Vue calendar and a line break element.

```julia
vue(:calender, date = "today", "This is still a dream!")
```

```julia
xelem(:br)
```

--------------------------------

### StippleUI Data Table with Server-Side Features

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Renders a Quasar `q-table` with support for pagination, sorting, filtering, and row selection. This example demonstrates programmatic row selection based on a condition. Use for displaying and managing tabular data.

```julia
using Stipple, StippleUI
using DataFrames

@vars TableApp begin
    tbl::R{DataTable} = DataTable(
        DataFrame(name=["Alice","Bob","Carol"], score=[92,87,95], active=[true,false,true]),
        DataTableOptions(columns=[
            Column("name",  label="Name",  align=:left),
            Column("score", label="Score", align=:right),
            Column("active",label="Active",align=:center)
        ])
    )
    tbl_pagination::DataTablePagination = DataTablePagination(rows_per_page=10)
    tbl_selection::DataTableSelection = DataTableSelection()
    search::R{String} = ""
end

function handlers(model)
    # Programmatically select rows where score > 90
    on(model.tbl) do _
        selectrows!(model, :tbl, :tbl_selection, "score", x -> x > 90)
    end
    model
end

function ui()
    row(cell([
        table(:tbl,
            pagination=:tbl_pagination,
            filter=:search,
            selection="multiple",
            selected=:tbl_selection,
            title="Users",
            style="height: 400px;",
            # Editable "score" column, read-only others
            edit="score",
            cell_class="text-grey-8",
            change_class="text-green-8 bg-green-1"
        )
    ]))
end
```

--------------------------------

### Parse HTML to Julia/StippleUI Code

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Use `StippleUIParser` to convert Quasar/Vue HTML templates into equivalent Julia/StippleUI code, useful for porting playground examples. `prettify` reformats raw HTML strings with consistent indentation.

```julia
using StippleUI.StippleUIParser

# Convert a Quasar playground snippet to Julia
html_snippet = """
<div class="q-pa-md">
  <q-btn color="primary" label="Click me" @click="pressed = true" :loading="pressed"></q-btn>
  <q-input v-model="name" label="Your Name" hint="First and last" filled></q-input>
  <q-input v-model.number="count" label="Count" type="number" class="q-my-md"></q-input>
</div>
"""

julia_code = parse_vue_html(html_snippet, indent=2)
println(julia_code)
```

```julia
# Verify round-trip correctness interactively
test_vue_parsing("<q-select v-model=\"lang\" :options=\"langs\" label=\"Language\" filled></q-select>")
```

```julia
# Reformat messy HTML
prettify("<div class=\"row\"><div class=\"col\">A</div><div class=\"col\">B</div></div>", indent=2) |> println
```

--------------------------------

### Trigger User-Defined Event with @on

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Forward client-side events to the server using the @on macro with two Symbol arguments. This example shows how a q-uploader component can trigger the :uploaded event.

```julia
julia> uploader("Upload files", url = "/upload" , @on(:uploaded, :uploaded))
"<q-uploader url=\"/upload\" v-on:uploaded=\"function(event) { handle_event(event, 'uploaded') }\">Upload files</q-uploader>"
```

--------------------------------

### Define Quasar Flexgrid Layout

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Define Quasar's Flexgrid layout for UIs using convenient attributes like `col`, `md`, and `row`. This example demonstrates setting column sizes and responsiveness.

```julia
row(htmldiv(col = 2, md = 4)) |> println
```

--------------------------------

### Use StippleUI Helper Macros

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Utilize StippleUI helper macros, which mimic Vue.js shortcuts starting with '@'. These macros are used to add attributes with special characters or to conditionally render elements.

```julia
span(@showif(true))
```

```julia
span(@click(:mybutton))
```

--------------------------------

### Define Javascript Created Hook

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Define Javascript code to be executed when the Vue instance is created using the `@created` macro. This example logs a message to the console upon creation.

```julia
@created """    console.log('This app has just been created!')
"""
```

--------------------------------

### Define Javascript Methods for StippleUI

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Define Javascript functions that can be called manually or automatically based on events using the `@methods` macro. This example defines a logging and a squaring function.

```julia
@methods """
logdemo: function(text) {
    console.log("Text from Stipple: " + text)
    return text
},
squaredemo: function(number) {
    console.log("The square of " + number + " is " + number**2)
    return number**2
}
"""
```

--------------------------------

### DateRange

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/datepickers.md

Represents a range of dates, typically used for selecting start and end dates.

```APIDOC
## DateRange

### Description
Represents a range of dates, typically used for selecting start and end dates.

### Type
`DateRange`
```

--------------------------------

### Compose and Use StippleUI Cards

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Demonstrates composing custom cards using `card`, `card_section`, and `card_actions`, as well as using the pre-built `card_1` component. Ensure `Stipple` and `StippleUI` are imported.

```julia
using Stipple, StippleUI

function ui()
    row([
        # Composed card
        cell(col=4,
            card(class="my-card", bordered=true, [
                imageview(src="https://cdn.quasar.dev/img/mountains.jpg",
                    basic=true, [
                    Html.div("Mountain View", class="absolute-bottom text-h6 text-white")
                ]),
                card_section([
                    Html.div("Landscape", class="text-h6"),
                    Html.div("Swiss Alps", class="text-subtitle2 text-grey")
                ]),
                card_section("A breathtaking view of the Swiss Alps in summer."),
                card_actions(align="right", [
                    btn("Share", flat=true, color="primary"),
                    btn("Explore", flat=true, color="primary")
                ])
            ])
        ),

        # Pre-built card_1 with customization
        cell(col=4,
            card_1(
                title="Genie Framework",
                subtitle="Full-stack Julia web",
                content="Build reactive dashboards entirely in Julia.",
                show_avatar=false,
                show_separator=true
            )
        )
    ])
end
```

--------------------------------

### Implement a Modal Dialog with StippleUI

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Shows how to create a modal dialog using `dialog` controlled by a reactive boolean variable. The dialog can be persistent and includes confirmation actions. Requires `Stipple` and `StippleUI`.

```julia
using Stipple, StippleUI

@vars DialogApp begin
    show_confirm::R{Bool} = false
    confirmed::R{Bool} = false
end

function handlers(model)
    on(model.confirmed) do val
        val && println("User confirmed action!")
    end
    model
end

function ui()
    row(cell([
        btn("Open Dialog", @click("show_confirm = true"), color="negative"),

        dialog(:show_confirm, persistent=true, [
            card([
                card_section(Html.div("Are you sure?", class="text-h6")),
                card_section(class="q-pt-none",
                    "This action cannot be undone. Please confirm."),
                card_actions(align="right", [
                    btn("Cancel", flat=true, @click("show_confirm = false")),
                    btn("Confirm", color="negative", @click("confirmed = true; show_confirm = false"))
                ])
            ])
        ])
    ]))
end
```

--------------------------------

### Test Vue Parsing with Quasar Component and Pre Tag

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Demonstrates `test_vue_parsing` with a Quasar component and a nested `<pre>` tag. The `indent` parameter controls the output formatting. Note the use of `R"..."` for raw string interpolation.

```julia
test_vue_parsing(raw"<q-test :hello-world=\"I need $$$ R\"> asap\n    or\ntoday <pre>asap\n    or\ntoday </pre></q-test>"; indent = 2)
```

--------------------------------

### Create a Button with Click Handler

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Generates a Quasar button component with a click event handler. The `loading` attribute is bound to a reactive variable `:mybutton`.

```julia
btn("Just do it!", @click(:mybutton), loading = :mybutton) |> println
```

--------------------------------

### Create Tabbed Navigation with StippleUI

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Illustrates using `tabgroup`, `tab`, `tabpanelgroup`, and `tabpanel` to create tabbed interfaces. The active tab is managed by a reactive string variable. Ensure `Stipple` and `StippleUI` are imported.

```julia
using Stipple, StippleUI

@vars TabApp begin
    active_tab::R{String} = "overview"
end

function ui()
    row(cell([
        tabgroup(:active_tab,
            inlinelabel=true,
            class="bg-primary text-white shadow-2", [
            tab(name="overview",  icon="info",         label="Overview"),
            tab(name="data",      icon="table_chart",  label="Data"),
            tab(name="settings",  icon="settings",     label="Settings")
        ]),

        tabpanelgroup(:active_tab, animated=true, swipeable=true, [
            tabpanel("Content for the Overview tab.",   name="overview"),
            tabpanel("Content for the Data tab.",       name="data"),
            tabpanel("Content for the Settings tab.",   name="settings")
        ])
    ]))
end
# tabgroup: <q-tabs v-model="active_tab" inline-label class=\"...\">...</q-tabs>
# tabpanelgroup: <q-tab-panels v-model="active_tab" animated swipeable>...</q-tab-panels>
```

--------------------------------

### Create a Button with Tooltip and Click Event

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

This snippet shows how to create a button with a custom tooltip and a click event that modifies a boolean state. The tooltip includes styling and content customization.

```julia
btn("Connect to server!", color="green", textcolor="black", @click("btnConnect=!btnConnect"), [
            tooltip(contentclass="bg-indigo", contentstyle="font-size: 16px",
            style="offset: 10px 10px",  "Ports bounded to sockets!")]
         )
```

--------------------------------

### table

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Creates a DataTable component.

```APIDOC
## Function: table

### Description
A constructor function or helper to create a `DataTable` component, often used within Stipple UI layouts.

### Signature
`table(options::DataTableOptions) :: DataTable`

### Parameters
- `options` (DataTableOptions): The configuration options for the table.
```

--------------------------------

### Create a Basic Button with Click Event

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Use this snippet to create a simple button that triggers a boolean state change on click. Ensure the `@click` event is correctly bound to a reactive variable.

```julia
btn("Move Left", color = "primary", icon = "mail", @click("press_btn = true"))
```

--------------------------------

### Render Generic Quasar, Vue, or HTML Elements

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Use `quasar`, `vue`, or `xelem` to render any Quasar, Vue, or HTML element with full attribute and binding support when a specific StippleUI wrapper doesn't exist. Custom colors for Quasar's palette can be defined using `csscolors`.

```julia
using Stipple, StippleUI

# Render any Quasar component by symbol
quasar(:timeline, color="primary", [
    quasar(:timeline__entry, heading=true, "2024"),
    quasar(:timeline__entry,
        title="Release",
        subtitle="January 2024",
        icon="rocket_launch",
        "StippleUI 0.24 launched with Vue 3 / Quasar 2 support.")
]) |> println
```

```julia
# Render a custom Vue component
vue(:my__chart, data=:chart_data, width="100%") |> println
```

```julia
# Custom colors for Quasar's palette
using Colors
css_str = csscolors(:brand, [RGB(0.2,0.4,0.8), RGB(0.8,0.2,0.2), RGB(0.1,0.7,0.3)])
# Use in page: btn("Go", color="brand-1"), p(class="text-brand-2", "Hello")
```

--------------------------------

### Prettify HTML Code with Indentation

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Utilize the `prettify` function to format HTML strings for improved readability. The `indent` parameter specifies the number of spaces for each indentation level. The output is piped to `println`.

```julia
prettify("<div  class=\"first\">single line<div> more\nlines</div></div>"; indent = 5) |> println
```

--------------------------------

### File Uploads with StippleUI uploader

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Integrates Quasar's file uploader with a built-in Genie upload route. Files are broadcast back to the reactive model via WebSockets. Use `@on` with `:addFileInfo` to capture original filenames in event payloads.

```julia
using Stipple, StippleUI

@vars UploaderApp begin
    uploaded_files::R{Vector{String}} = String[]
end

function handlers(model)
    @event :file_uploaded begin
        push!(model.uploaded_files[], event["name"])
        notify(model, "Uploaded: $(event["name"])")
    end
    model
end

function ui()
    row(cell([
        uploader(
            label="Upload CSV Files",
            accept=".csv",
            multiple=true,
            autoupload=true,
            hideuploadbtn=true,
            color="primary",
            @on(:uploaded, :file_uploaded, :addFileInfo)
        ),

        # Display uploaded file list
        list([
            item(R"file + ' uploaded'", @recur("file in uploaded_files"), clickable=true)
        ])
    ]))
end
```

--------------------------------

### vue

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Provides access to Vue.js functionalities within StippleUI.

```APIDOC
## vue

### Description
This module or function provides access to Vue.js functionalities, enabling advanced reactivity and component management within StippleUI applications.

### Usage
Use this for integrating custom Vue logic or accessing Vue's core features.
```

--------------------------------

### StippleUI Select Dropdown

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Renders a Quasar q-select for single or multiple selections. Supports filtering, chips, and custom option mappings. Use for choosing one or more items from a list.

```julia
using Stipple, StippleUI

@vars SelectApp begin
    chosen_lang::R{String} = "julia"
    chosen_tags::R{Vector{String}} = String[]
    languages::R{Vector{String}} = ["julia", "python", "r", "matlab"]
    tags::R{Vector{String}} = ["data", "ml", "stats", "viz", "web"]
end

function ui()
    row([
        cell(col=6,
            # Single selection dropdown
            select(:chosen_lang,
                options=:languages,
                label="Language",
                filled=true,
                emitvalue=true)
        ),
        cell(col=6,
            # Multiple selection with chips and filtering
            select(:chosen_tags,
                options=:tags,
                label="Tags",
                multiple=true,
                usechips=true,
                useinput=true,
                clearable=true,
                filled=true,
                counter=true,
                maxvalues=3)
        )
    ])
end
```

--------------------------------

### DataTableOptions

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Options for configuring the appearance and behavior of a DataTable.

```APIDOC
## Type: DataTableOptions

### Description
Provides a set of options to customize the rendering and interactivity of a `DataTable` component.

### Fields
- `id` (String): A unique identifier for the DataTable.
- `columns` (Vector{Column}): A list of `Column` objects defining the table's columns.
- `rows` (Vector{Any}): The data rows for the table.
- `pagination` (DataTablePagination): Pagination settings for the table.
- `sortable` (Bool): Whether columns are sortable.
- `filterable` (Bool): Whether columns are filterable.
- `editable` (Bool): Whether cells are editable.
```

--------------------------------

### DataTablePagination

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Configuration for pagination in a DataTable.

```APIDOC
## Type: DataTablePagination

### Description
Defines the pagination settings for a `DataTable`, allowing control over page size, current page, and total number of pages.

### Fields
- `rowsperpage` (Int): The number of rows to display per page.
- `currentpage` (Int): The currently active page number.
- `totalpages` (Int): The total number of pages available.
```

--------------------------------

### xelem

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Represents a generic StippleUI element.

```APIDOC
## xelem

### Description
Represents a generic StippleUI element, acting as a base for custom UI elements.

### Usage
This function or type is used for creating custom StippleUI components or elements that do not directly map to existing Quasar components.
```

--------------------------------

### list

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/lists.md

Represents a list component, used for displaying collections of items.

```APIDOC
## list

### Description

Creates a list component.

### Usage

```julia
list("my-list", items)
```

### Parameters

* `id` (String) - The unique identifier for the list component.
* `items` (Any) - The data to be displayed in the list.
```

--------------------------------

### Form Text Inputs (`textfield`, `numberfield`, `textarea`, `filefield`)

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Use these components for text, numeric, multiline, and file inputs. They support validation, masking, and clearable controls. Two-way binding is achieved by passing a reactive model field `Symbol`.

```julia
using Stipple, StippleUI

@vars FormApp begin
    username::R{String} = ""
    age::R{Int} = 0
    bio::R{String} = ""
    query::R{String} = ""
end

function ui()
    row(cell([
        # Text input with hint and Enter-key handler
        textfield("Username", :username,
            hint="3–20 characters",
            @on("keyup.enter", "process = true"),
            rules!="[val => val.length >= 3 || 'Min 3 chars']",
            lazyrules=true, filled=true),

        # Number input (binds with v-model.number)
        numberfield("Age", :age,
            min=0, max=120,
            hint="Years",
            outlined=true, dense=true),

        # Textarea with autogrow
        textarea("Bio", :bio,
            autogrow=true, filled=true,
            hint="Tell us about yourself",
            counter=true, maxlength=500),

        # Clearable search field with prefix/suffix
        textfield("Search", :query,
            clearable=true, filled=true,
            prefix="\$", suffix=".00",
            labelcolor="primary")
    ]))
end
# numberfield renders: <q-input label="Age" type="number" v-model.number="age" ...></q-input>
```

--------------------------------

### DatePicker

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/datepickers.md

The main component for selecting a single date.

```APIDOC
## DatePicker

### Description
The main component for selecting a single date.

### Usage
Used in StippleUI applications to allow users to pick a specific date.
```

--------------------------------

### csscolors

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Provides a list or utility for CSS color definitions.

```APIDOC
## csscolors

### Description
This likely provides a collection of standard CSS color names or a utility function for handling color values within StippleUI.

### Usage
Can be used to apply standard colors to UI elements or for color-related computations.
```

--------------------------------

### Base.convert

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/datepickers.md

Converts a value from one type to another.

```APIDOC
## Base.convert

### Description
Converts a value from one type to another.

### Usage
This is a general-purpose conversion function that might be used internally or by developers for type casting.
```

--------------------------------

### Stipple.render

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/ranges.md

Function to render StippleUI components.

```APIDOC
## Stipple.render

### Description

`Stipple.render` is a key function in the Stipple framework responsible for rendering the UI components defined in your Stipple application. It takes the application's state and view definitions and generates the corresponding HTML and JavaScript for the client-side.

### Usage

This function is typically called to initialize or update the StippleUI interface, translating Julia-based UI definitions into a viewable web page.
```

--------------------------------

### item

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/lists.md

Represents an individual item within a list.

```APIDOC
## item

### Description

Creates a list item.

### Usage

```julia
item("my-item", content)
```

### Parameters

* `id` (String) - The unique identifier for the item.
* `content` (Any) - The content to be displayed within the item.
```

--------------------------------

### Create a Text Input Field

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Generates a Quasar input component for text. The `v-model` directive binds the input's value to the `:mytext` reactive variable.

```julia
textfield("Label", :mytext) |> println
```

--------------------------------

### item_section

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/lists.md

Organizes content within a list item into sections.

```APIDOC
## item_section

### Description

Creates a section within a list item.

### Usage

```julia
item_section(content)
```

### Parameters

* `content` (Any) - The content for the item section.
```

--------------------------------

### xelem_pure

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Represents a pure StippleUI element without additional wrappers.

```APIDOC
## xelem_pure

### Description
Represents a pure StippleUI element, typically a minimal wrapper around a Vue component or HTML element, without extra StippleUI-specific logic.

### Usage
Use this when you need a direct, unadorned representation of a UI element.
```

--------------------------------

### vue_pure

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Represents a pure Vue.js element without additional wrappers.

```APIDOC
## vue_pure

### Description
Represents a pure Vue.js element, allowing direct usage of Vue components or features without StippleUI's specific integrations.

### Usage
Ideal for scenarios requiring direct manipulation or integration of raw Vue.js components.
```

--------------------------------

### Stipple.render

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/datepickers.md

Renders a StippleUI application or component.

```APIDOC
## Stipple.render

### Description
Renders a StippleUI application or component.

### Usage
This function is typically used to display the UI defined in a Stipple application.
```

--------------------------------

### Apply Gutter Spacing in Flex Containers

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Apply gutter spacing between child elements in Quasar Flex containers using the `gutter` attribute. This automatically selects the correct class for rows or columns.

```julia
row(gutter = "md", htmldiv(col = 2, md = 4), "Hello World") |> println
```

--------------------------------

### Use @gutter Macro for Element Wrapping

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Use the `@gutter` macro to wrap child elements in an extra `div` when they might display incorrectly due to background settings in Quasar's Flex containers. This ensures proper margin and padding.

```julia
row(gutter = "md", @gutter htmldiv(col = 2, md = 4, "Hello World")) |> println
```

--------------------------------

### Stipple.watch

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Watches for changes in Stipple UI components.

```APIDOC
## Function: Stipple.watch

### Description
Allows the Stipple application to react to changes in specific UI elements or model properties. This can be used to trigger updates or actions when a `DataTable`'s state changes (e.g., sorting, filtering).

### Usage
Used to define reactive behavior in Stipple applications, linking frontend events to backend logic.
```

--------------------------------

### q__elem

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Represents a generic Quasar element.

```APIDOC
## q__elem

### Description
Represents a generic Quasar element, serving as a base for other Quasar components.

### Usage
This function or type is used internally or as a base for creating specific Quasar-based UI elements within StippleUI.
```

--------------------------------

### quasar

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Provides access to Quasar components within StippleUI.

```APIDOC
## quasar

### Description
This module or function provides access to the underlying Quasar component library, allowing integration of standard Quasar elements into StippleUI applications.

### Usage
Use this to render or interact with native Quasar components.
```

--------------------------------

### Interactive Button (`btn`) with Click Handler

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Use `btn` for interactive buttons. Bind a reactive boolean to `@click` to trigger server-side handlers. Supports loading states, icons, and theming.

```julia
using Stipple, StippleUI

@vars MyApp begin
    process = false
    input::R{String} = ""
    output::R{String} = "", READONLY
end

function handlers(model)
    onbutton(model.process) do
        model.output[] = reverse(model.input[])
    end
    model
end

function ui()
    row(cell(class="st-module", [
        # Basic button with click handler
        btn("Reverse", @click(:process), color="primary", icon="swap_horiz"),

        # Loading state button (spinner while processing)
        btn("Processing...", @click(:process), loading=:process, color="secondary"),

        # Link button
        btn("Quasar Docs", type="a", href="https://quasar.dev", target="_blank",
            icon="open_in_new", flat=true),

        # Round icon-only FAB button
        btn(@click(:process), round=true, color="accent", icon="play_arrow", size="lg"),

        # Button group
        btngroup([
            btn("Left",  color="primary"),
            btn("Center", color="primary"),
            btn("Right",  color="primary")
        ]),

        # Dropdown button with list items
        btndropdown(label="Options", color="primary", [
            list([
                item("Option A", clickable=true, vclosepopup=true, @click("process = true")),
                item("Option B", clickable=true, vclosepopup=true)
            ])
        ]),

        # Toggle button (radio-style selection)
        btntoggle(:process,
            options=[Stipple.opts(label="On", value=true), Stipple.opts(label="Off", value=false)],
            color="white", textcolor="primary", togglecolor="primary", rounded=true)
    ]))
end

route("/") do
    model = MyApp |> init |> handlers
    page(model, ui()) |> html
end
up()
# btn renders as: <q-btn color="primary" icon="swap_horiz" label="Reverse" v-on:click="process = true"></q-btn>
```

--------------------------------

### Parse Vue HTML to Julia Code

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Utilize the StippleUIParser to convert HTML code, particularly Vue.js templates, into their corresponding Stipple/Julia code representation. This tool aids in porting web demo code.

```julia
julia> using StippleUI.StippleUIParser
julia> doc_string = """
<template>
    <div class="q-pa-md">
    <q-scroll-area style="height: 230px; max-width: 300px;">
        <div class="row no-wrap">
            <div v-for="n in 10" :key="n" style="width: 150px" class="q-pa-sm">
                Lorem @ipsum "
                dolor sit amet consectetur adipisicing elit.
            </div>
            <q-btn color=\"primary\" label=\"Animate to \
${position}px\" @click=\"scroll = true\"></q-btn>
            <q-input hint=\"Please enter some words\" v-on:keyup.enter=\"process = true\" label=\"Input\" v-model=\"input\"></q-input>
            <q-input hint=\"Please enter a number\" label=\"Input\" v-model.number=\"numberinput\" class=\"q-my-md\"></q-input>
        </div>
    </q-scroll-area>
    </div>
</template>
"""

julia> parse_vue_html(html_string, indent = 2) |> println
```

```julia
template(
  Stipple.Html.div(class = "q-pa-md",
    scrollarea(style = "height: 230px; max-width: 300px;",
      Stipple.Html.div(class = "row no-wrap", [
        Stipple.Html.div(var"v-for" = "n in 10", key! = "n", style = "width: 150px", class = "q-pa-sm",
          "Lorem @ipsum dolor sit amet consectetur adipisicing elit."
        )
        btn(raw"Animate to ${position}px", color = "primary", var"v-on:click" = "scroll = true")
        textfield("Input", :input, hint = "Please enter some words", var"v-on:keyup.enter" = "process = true")
        numberfield("Input", :numberinput, hint = "Please enter a number", class = "q-my-md")
      ])
    )
  )
)
```

--------------------------------

### slider

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/ranges.md

Function to create a slider input component.

```APIDOC
## slider

### Description

The `slider` function is used to generate an interactive slider component for StippleUI applications. It allows users to select a value within a defined range.

### Parameters

- `range_data` (RangeData): The data object defining the slider's properties (min, max, step, value).
- `args...`: Additional arguments for customization.

### Usage

Use `slider` within your StippleUI view to provide a user-friendly way to input numerical values.
```

--------------------------------

### datepicker

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/datepickers.md

A function or component related to date picking functionality.

```APIDOC
## datepicker

### Description
A function or component related to date picking functionality.

### Usage
This might be a function to initialize or configure a date picker, or a component tag used in UI definitions.
```

--------------------------------

### Base.range

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/ranges.md

Julia's built-in function for creating ranges.

```APIDOC
## Base.range

### Description

The `Base.range` function is a core Julia function used to construct range objects. These objects represent a sequence of numbers, often defined by a start, stop, and step.

### Usage

In the context of StippleUI, `Base.range` can be used to define the possible values for range-based widgets or to generate sequences of data.
```

--------------------------------

### attributes

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Core attributes available for StippleUI components.

```APIDOC
## attributes

### Description
Core attributes available for StippleUI components.

### Usage
These attributes can typically be passed to StippleUI components to modify their behavior or appearance. Consult component-specific documentation for details on which attributes are supported.
```

--------------------------------

### Base.parse

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/ranges.md

Julia's built-in function for parsing strings into other types.

```APIDOC
## Base.parse

### Description

The `Base.parse` function is a fundamental Julia utility for converting a string representation into a value of a specified type. It is essential for handling user input or data from external sources that need to be interpreted as specific data types.

### Usage

In StippleUI, `Base.parse` can be used to convert string inputs from UI elements (like text fields) into the appropriate Julia data types for processing within your application's backend logic.
```

--------------------------------

### columns

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Retrieves all columns defined for a DataTable.

```APIDOC
## Function: columns

### Description
Returns a list of all `Column` objects defined within the `DataTable`'s options.

### Signature
`columns(dt::DataTable) :: Vector{Column}`

### Parameters
- `dt` (DataTable): The DataTable object.
```

--------------------------------

### itemlabel

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/lists.md

Alias for item_label, providing an alternative way to create item labels.

```APIDOC
## itemlabel

### Description

Alias for `item_label`. Creates a label for a list item.

### Usage

```julia
itemlabel(text)
```

### Parameters

* `text` (String) - The text content of the label.
```

--------------------------------

### itemsection

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/lists.md

Alias for item_section, providing an alternative way to create item sections.

```APIDOC
## itemsection

### Description

Alias for `item_section`. Creates a section within a list item.

### Usage

```julia
itemsection(content)
```

### Parameters

* `content` (Any) - The content for the item section.
```

--------------------------------

### StippleUI Numeric Sliders and Range Selectors

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Implements `slider` for single numeric value selection and `range` for selecting a min/max sub-range. Both support lazy updates and custom labels. Use for adjusting numerical values or ranges.

```julia
using Stipple, StippleUI

@vars SliderApp begin
    volume::R{Int} = 50
    price_range::R{RangeData{Int}} = RangeData(10:500)
end

function ui()
    row(cell([
        # Single value slider
        slider(0:1:100, :volume,
            label=true, labelalways=true,
            color="blue", markers=true),

        # Dual-handle range slider
        range(0:10:1000, :price_range,
            label=true, labelalways=true,
            color="purple",
            labelvalueleft=Symbol("'Min: $" + price_range.min"),
            labelvalueright=Symbol("'Max: $" + price_range.max"),
            dragrange=true)
    ]))
end
```

--------------------------------

### StippleUI Boolean and Choice Inputs

Source: https://context7.com/genieframework/stippleui.jl/llms.txt

Provides checkbox, toggle, and radio button components for boolean values and grouped selections. `checkbox` and `toggle` bind to `Bool` fields, while `radio` groups bind to a shared field. Use for form inputs and user preferences.

```julia
using Stipple, StippleUI

@vars ChoiceApp begin
    agree::R{Bool} = false
    notify::R{Bool} = true
    plan::R{String} = "free"
end

function ui()
    row(cell([
        # Checkbox
        checkbox("I agree to the terms", :agree, color="primary", dense=true),

        # Toggle switch
        toggle("Email notifications", :notify, color="green", leftlabel=true),

        # Radio group
        row([
            radio("Free",    :plan, val="free",    color="primary"),
            radio("Pro",     :plan, val="pro",     color="secondary"),
            radio("Enterprise", :plan, val="enterprise", color="accent")
        ])
    ]))
end
```

--------------------------------

### item_label

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/lists.md

Represents a label associated with a list item.

```APIDOC
## item_label

### Description

Creates a label for a list item.

### Usage

```julia
item_label(text)
```

### Parameters

* `text` (String) - The text content of the label.
```

--------------------------------

### Dates.parse

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/datepickers.md

Parses a string representation into a Date object.

```APIDOC
## Dates.parse

### Description
Parses a string representation into a Date object.

### Parameters
#### Path Parameters
- **date_string** (string) - Required - The string to parse into a date.

### Returns
- `Date` - The parsed date object.
```

--------------------------------

### btn Component

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

The StippleUI 'btn' component is a button with extra features, including shape options (rectangle, round), a material ripple effect, and a loading/spinner effect for user feedback during app execution delays. It emits a '@click' event when clicked or tapped, unless disabled or in a loading state.

```APIDOC
## btn Component

### Description
The StippleUI 'btn' component is a versatile button that offers enhanced features such as a material ripple effect, optional loading states with spinners, and different shapes (rectangle or round). It's designed to provide user feedback during potentially delayed operations.

### Method
StippleUI Component (Julia Function)

### Endpoint
N/A (Component-based)

### Parameters
#### Behavior
- **loading** (Bool) - Puts the button into a loading state, displaying a spinner. Can be overridden with a 'loading' slot.
- **percentage** (Union{Int, Float64}) - A percentage value between 0.0 and 100.0 to be used with the 'loading' prop, displaying a progress bar.
- **darkpercentage** (Bool) - If true, the progress bar will have a dark color. Used with 'percentage' and 'loading' props.

#### Content
- **label** (Union{String, Int}) - The text displayed on the button.
- **icon** (String) - The name of an icon to display on the button, following Quasar conventions. Use 'none' to render no icon.
- **iconright** (String) - Similar to 'icon', but for an icon displayed to the right of the label.
- **nocaps** (Bool) - If true, prevents the label text from being converted to uppercase.
- **nowrap** (Bool) - If true, prevents the label text from wrapping to the next line.
- **align** (String) - Alignment of the label or content (e.g., 'left', 'right', 'center').
- **stack** (Bool) - If true, stacks the icon and label vertically.
- **stretch** (Bool) - When used in a flexbox parent, stretches the button to the parent's height.

#### General
- **type** (String) - Defines the native button type attribute ('submit', 'reset', 'button'), renders the component with an 'a' tag, or uses 'href' with a media tag.
- **tabindex** (Union{Int, String}) - HTML tabindex attribute value.

#### Navigation
- **href** (String) - Native 'a' link href attribute. Has priority over 'to' and 'replace' props.
- **target** (String) - Native 'a' link target attribute. Used with 'to' or 'href' props.

#### State
- **padding** (String) - Custom padding for the button (e.g., '10px 20px').
- **color** (String) - Color name for the component from the Quasar Color Palette.
- **textcolor** (String) - Overrides the text color using a name from the Quasar Color Palette.
- **dense** (Bool) - Enables dense mode, reducing the component's occupied space.

### Request Example
```julia
btn("Move Left", color = "primary", icon = "mail", @click("press_btn = true"))
btn("Go to Hello World", color = "red", type = "a", href = "hello", icon = "map", iconright = "send")
btn("Connect to server!", color="green", textcolor="black", @click("btnConnect=!btnConnect"), [
 tooltip(contentclass="bg-indigo", contentstyle="font-size: 16px",
 style="offset: 10px 10px", "Ports bounded to sockets!")]
)
```

### Response
#### Success Response (Implicit)
- The 'btn' component renders a button element with the specified properties.

#### Response Example
(No explicit response example provided, as this is a UI component.)
```

--------------------------------

### Define User-Defined Event

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Use the @event macro to define custom events that execute Julia code when triggered from the client. This is typically used in conjunction with client-side components like q-uploader.

```julia
@event :uploaded begin
    println("Files have been uploaded!")
end
```

```julia
@event MyApp :uploaded begin
    println("Files have been uploaded to MyApp!")
end
```

--------------------------------

### ATTRIBUTES_MAPPINGS

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/API.md

Provides mappings for various attributes used in StippleUI components.

```APIDOC
## ATTRIBUTES_MAPPINGS

### Description
Provides mappings for various attributes used in StippleUI components.

### Usage
This is a data structure or constant that defines how attributes are mapped. Refer to specific component documentation for its usage.
```

--------------------------------

### DataTable

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Represents a data table component for displaying tabular data.

```APIDOC
## Type: DataTable

### Description
A component for displaying data in a tabular format, supporting features like sorting, filtering, and pagination.

### Fields
- `options` (DataTableOptions): The configuration options for the DataTable.
```

--------------------------------

### Column

Source: https://github.com/genieframework/stippleui.jl/blob/main/docs/src/API/tables.md

Represents a single column in a DataTable.

```APIDOC
## Type: Column

### Description
Represents a single column in a `DataTable`. It typically holds the data for that column and its associated metadata.

### Fields
- `data` (Any): The actual data for the column.
- `name` (String): The name of the column.
- `type` (DataType): The data type of the column's elements.
```

--------------------------------

### Define Javascript Created Hook for Explicit Models

Source: https://github.com/genieframework/stippleui.jl/blob/main/README.md

Define Javascript code for the 'created' hook within an explicit StippleUI model using the `@created` macro. This allows for model-specific initialization logic.

```julia
@created MyApp """    console.log('This app has just been created!')
"""
```