VCard Title Font-Weight Not Rendering as Expected in vue3

[proy30]

I'm testing the following code:

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as vuetify

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with SinglePageLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="d-flex justify-center align-center",
            style="height: 100%;",
        ):
            with vuetify.VCard(style="max-width: 400px;"):
                vuetify.VCardTitle("Centered Card")
                with vuetify.VCardText():
                    vuetify.VTextField(
                        v_model=("text_value", ""),
                        label="Some text",
                        placeholder="Type here...",
                        variant="outlined"
                    )

server.start()

using vue3:

using vue2:

The issue is that the default font-weight for VCardTitle is set to 500, but it isn’t visibly applied. I only notice a change when I adjust the font-weight to 550.

Any insights on what might be causing this discrepancy?

[proy30]

Additionally, with the following code I am unable to figure out why the vuetify.VSpacer() is sending the icon button to the next row rather than pushing it to the right side of the same row as the title (like it does in vue2):

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as vuetify

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with SinglePageLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="d-flex justify-center align-center",
            style="height: 100%;",
        ):
            with vuetify.VCard(width=500):
                with vuetify.VCardTitle("Centered Card"):
                    vuetify.VSpacer()
                    vuetify.VBtn(icon="mdi-refresh", density="compact")
                vuetify.VDivider()
                with vuetify.VCardText():
                    vuetify.VTextField(
                        v_model=("text_value", ""),
                        label="Some text",
                        placeholder="Type here...",
                        variant="outlined"
                    )

server.start()

[jourdain]

You may want to use https://play.vuetifyjs.com/ to explore and test your vuetify code

[proy30]

Thanks very much for the resource—it helped me resolve the VSpacer issue.

I'm still experiencing some difficulty with getting the desired font-weight on the card title (please see attached image). I'll keep experimenting on my side, but can you confirm whether this behavior is expected and not an issue with Trame?

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as vuetify

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with SinglePageLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer(
            fluid=True,
            classes="d-flex justify-center align-center",
            style="height: 100%;",
        ):
            with vuetify.VCard():
                with vuetify.VCardTitle(
                    "Centered Card",
                    classes="d-flex align-center flex-wrap",
                    style="font-weight: 500 !important"
                ):
                    vuetify.VSpacer()
                    vuetify.VBtn(icon="mdi-refresh", density="compact")
                vuetify.VDivider()
                with vuetify.VCardText():
                    vuetify.VTextField(
                        v_model=("text_value", ""),
                        label="Some text",
                        placeholder="Type here...",
                        variant="outlined",
                    )

server.start()

[jourdain]

The issue seems to be related to the fonts not being loaded/available. You can fix that by adding a style entry

server.enable_module({
    "styles":["https://fonts.googleapis.com/css?family=Roboto:300,400,500"]
})

[proy30]

Thank you!

[proy30]

Hi @jourdain, I hope this is another question that you can answer simply. The following code worked for me in vue2, but not in vue3. I have not been able to locate the proper syntax needed on the click property and I'm not sure if there is a special way Trame handles it. My goal is to have the VBtn act as the VFileInput.

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import html, vuetify3 as vuetify

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

state.upload = None

with SinglePageLayout(server) as layout:

    with layout.content:
        with vuetify.VContainer(fluid=True, classes="pa-4"):
            with vuetify.VFileInput(
                v_model=("upload",),
                style="display: none;",
                ref="upload_file",
            ):
                pass
            with html.Div(style="position: relative;"):
                vuetify.VBtn(
                    "Upload",
                    click="$refs.upload_file.$refs.input.click()",
                )

if __name__ == "__main__":
    server.start()

I am receiving JS Error => TypeError: Cannot read properties of undefined (reading '$refs').

[jourdain]

Ah, yes I know why... I could not keep the exact same API for the refs with vue3.

In vue3, you need to replace $refs by trame.refs.

[proy30]

Yep, the following worked: click="trame.refs.upload_file.click()"

Thank you!