A trame package to manage and display alerts/notification while being agnostic of the widget framework you want to use. This can be use to report errors and let the user know about the completions of tasks.
Install trame_alerts using pip
pip install trame_alertsIf you are planning on using the provided vuetify UI widgets to display the alerts run the following:
pip install trame_alerts[vuetify]If you are planning on using the provided quasar UI widgets to display the alerts run the following:
pip install trame_alerts[quasar]The core component to this library is the AlertsProvider widget. This widget manages a portion of the trame state where the status of the alerts is stored, and provides easy access to set of JavaScript variables and functions to any widgets that are its descendants.
from trame.app import get_server
from trame.widgets import html, alerts
from trame.ui.html import DivLayout
server = get_server(client_type="vue3")
with DivLayout(server) as layout:
with alerts.AlertsProvider():
html.Button(
"Create Error",
click="createErrorAlert({})",
)
html.Button(
"Clear All",
click="clearAlerts",
)
with html.P(v_for="alert in allAlerts", key="alert.id"):
html.Span("[{{alert.id}}] {{alert.title}} - {{alert.text}}")
html.Button("Remove", click="removeAlert(alert.id)")
server.start()The following variables are be made available in JavaScript:
alerts: The raw content of the portion of the state where the alerts status is storedallAlerts: An array containing all the alerts that exist in the state.activeAlerts: An array containing the alerts that have not elapsed yet.elapsedAlerts: An array containing the alerts that have elapsed.createAlert: Function to create a generic alert. It takes an Alert object.createSuccessAlert: Function to create a success alert. It takes an Alert object.createWarningAlert: Function to create a warning alert. It takes an Alert object.createErrorAlert: Function to create an error alert. It takes an Alert object.createInfoAlert: Function to create an info alert. It takes an Alert object.dismissAlert: Function to dismiss an alert. It takes an alert id.removeAlert: Function to remove an alert. It takes an alert id.clearAlerts: Function to remove all the alerts. It takes no arguments.
Refer to the examples folder for minimal complete applications that use the core library as well as the vuetify and quasar UI implementation.
Build and install the core Vue components
cd vue-components/core
npm i
npm run build
cd -Build and install the vuetify Vue components
cd vue-components/vuetify
npm i
npm run build
cd -Build and install the quasar Vue components
cd vue-components/quasar
npm i
npm run build
cd -Install the library
pip install -e ".[dev,vuetify,quasar]"trame-alerts is made available under the Apache License, Version 2.0. For more details, see LICENSE
Trame | Discussions | Issues | Contact Us
Share your experience with a testimonial or with a brand approval.
This package optionally depends on trame-vuetify and trame-quasar, but does not bundle any specific external JavaScript library.