add missing props from issue 428

[AnnMarieW]

#428

• Adds acceptValueOnBlur to TagsInput.
• Adds gradient to LineChart
• Adds hideWithOnePage to Pagination
• Adds name to Avatar
• Adds disabled to NumberInput

Notes

• I tried to add withKeyboardEvents prop but it had no effect, the up/down arrows still worked. I'll leave that open for now in Add missing props #428, but it may not be necessary to add since it's possible to not display the arrow keys, and/or disable the input field.
• All of these props are passthrough props, so tests aren't required. Included a sample app here for each new prop to show they work.
• Updated the docstrings for each component

[AnnMarieW]

TagsInput sample app:

Demos acceptValueOnBlur=False

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, State, callback, html
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

component = html.Div(
    [
        dmc.Text(id="tags-input-value"),
        dmc.TagsInput(
            label="Select frameworks",
            placeholder="Select all you like!",
            id="framework-tags-input",
            value=["ng", "vue"],
            acceptValueOnBlur=False,
            w=400,
            mb=10,
        ),
        
    ]
)


@callback(
    Output("tags-input-value", "children"), Input("framework-tags-input", "value")
)
def select_value(value):
    return ", ".join(value)


app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

Here's the gradient example for the LineChart docs

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer
_dash_renderer._set_react_version("18.2.0")


data = [
    {"date": "Jan", "temperature": -25},
    {"date": "Feb", "temperature": -10},
    {"date": "Mar", "temperature": 5},
    {"date": "Apr", "temperature": 15},
    {"date": "May", "temperature": 30},
    {"date": "Jun", "temperature": 15},
    {"date": "Jul", "temperature": 30},
    {"date": "Aug", "temperature": 40},
    {"date": "Sep", "temperature": 15},
    {"date": "Oct", "temperature": 20},
    {"date": "Nov", "temperature": 0},
    {"date": "Dec", "temperature": -10},
]

component = dmc.LineChart(
    h=300,
    data=data,
    series=[{"name": "temperature", "label": "Avg. Temperature"}],
    dataKey="date",
    type="gradient",
    gradientStops=[
        {"offset": 0, "color": "red.6"},
        {"offset": 20, "color": "orange.6"},
        {"offset": 40, "color": "yellow.5"},
        {"offset": 70, "color": "lime.5"},
        {"offset": 80, "color": "cyan.5"},
        {"offset": 100, "color": "blue.5"},
    ],
    strokeWidth=5,
    curveType="natural",
    yAxisProps={"domain": [-25, 40]},
    p="lg"
)


app = Dash(external_stylesheets=dmc.styles.ALL)

app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

Here's the hideWithOnePage for Pagination
There are two Pagination components defined, and the one with hideWithOnePage=True is not displayed

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, State
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

component = dmc.Stack(
    [
        dmc.Pagination(total=1, hideWithOnePage=True, value=1),
        dmc.Pagination(total=1, hideWithOnePage=False, value=1, my=15),

    ]
)

app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

Avatar - colors auto-generated based on initials when color="initials" and using the new name prop

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, State
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)


names = [
    "John Doe",
    "Jane Mol",
    "Alex Lump",
    "Sarah Condor",
    "Mike Johnson",
    "Kate Kok",
    "Tom Smith",
]

avatars = [dmc.Avatar(name=name, color="initials") for name in names]

component = dmc.Group(avatars)

app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

Disabled NumberInput

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, State
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

component = dmc.NumberInput(disabled=True, label="Disabled input", placeholder="Disabled input", p="lg"),


app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[github-actions]

Generated link: snehilvj/dash-mantine-components-440

[alexcjohnson]

💃