Base Component#

class ngapp.components.basecomponent.AppStatus(
capture_events: bool = False,
capture_call_stack: bool = False,
_app_id: int | None = None,
_file_id: int | None = None,
app: object = None,
components_by_id: dict[str,
object] = <factory>,
)#

Bases: object

Parameters:

  • capture_events (bool)

  • capture_call_stack (bool)

  • _app_id (int | None)

  • _file_id (int | None)

  • app (object)

  • components_by_id (dict[str, object])

class ngapp.components.basecomponent.Component(
component: str,
*ui_children: T | str,
ui_slots: dict[str, list] | None = None,
namespace: bool = False,
ui_style: str | dict | None = None,
ui_class: str | list[str] | None = None,
id: str = '',
)#

Bases: object

Base component class, the component name is passed as argument

Parameters:

  • component (str)

  • ui_children (T | str)

  • ui_slots (dict[str, list] | None)

  • namespace (bool)

  • ui_style (str | dict | None)

  • ui_class (str | list[str] | None)

  • id (str)

add_keybinding(
key: str,
callback: Callable,
local: bool = False,
keyup: bool = False,
keydown: bool = True,
split_key: str = '+',
capture: bool = False,
single: bool = False,
)#

Add key binding to component

Parameters:

  • key (str)

  • callback (Callable)

  • local (bool)

  • keyup (bool)

  • keydown (bool)

  • split_key (str)

  • capture (bool)

  • single (bool)

call_js(func: Callable, *args, **kwargs)#

This method ensures safe JavaScript execution by automatically deferring the function call until the JavaScript environment is ready. If JavaScript is already available, the function executes immediately.

Args:

func (callable): A Python function *args: Positional arguments to pass to the function when called. **kwargs: Keyword arguments to pass to the function when called.

Note:

  • Safe to call in app __init__ method (when .js is not yet available)

Example:
>>> def my_method(js):
...     return js.console.log("Hi from JS when app is initialized")
>>> self.call_js(my_method)
Parameters:

func (Callable)

create_event_handler(
function,
prevent_default: bool = True,
stop_propagation: bool = False,
stop_immediate_propagation: bool = False,
return_value: object | None = None,
)#

Create an event handler for the component.

Args:

function (Callable): The function to call when the event is triggered. prevent_default (bool): Whether to prevent the default action of the event. stop_propagation (bool): Whether to stop the propagation of the event. stop_immediate_propagation (bool): Whether to stop immediate propagation of the event. return_value (object, optional): The value to return from the event handler.

Parameters:

  • prevent_default (bool)

  • stop_propagation (bool)

  • stop_immediate_propagation (bool)

  • return_value (object | None)

dump()#

Override this method for components with a state. Dumps component state for storage on backend. Only data types which can be converted to json are allowed

property js#

Direct access to the JavaScript environment for immediate execution.

This property provides direct access to the JavaScript runtime environment, allowing you to run any JavaScript function or access any JavaScript object immediately.

Note:

  • Cannot be used in __init__ methods - use call_js() instead for deferred execution

  • Only available after the JavaScript environment is fully loaded

Example:

self.js.console.log(“Hello from Python!”)

load(data)#

Override this method for components with a state. Loads component data from backend (data argument is the return value of dump)

on(
events: str | list,
func: Callable[[Event], None] | Callable[[], None],
arg: object = None,
clear_existing: bool = False,
)#

Add event listener

Parameters:

  • events (str | list)

  • func (Callable[[Event], None] | Callable[[], None])

  • arg (object)

  • clear_existing (bool)

property quasar#

Access to the Quasar framework’s $q object and utilities.

Provides access to all Quasar framework functionality through a Python interface. The returned proxy object allows calling any method available on Quasar’s $q object as documented at: https://quasar.dev/options/the-q-object

Note:

  • Cannot be used in __init__ methods

Example:
>>> # Show a notification
>>> self.quasar.notify({
...     'message': 'Operation completed successfully!',
...     'color': 'positive',
... })
property ui_hidden#

Set display to none. Compare with below - the class hidden means the element will not show and will not take up space in the layout.

property ui_invisible#

Set visibility to hidden. Compare with above - the class invisible means the element will not show, but it will still take up space in the layout.

class ngapp.components.basecomponent.Event(
name: str,
component: 'Component',
arg: object | None = None,
value: object | None = None,
)#

Bases: object

Parameters:

  • name (str)

  • component (Component)

  • arg (object | None)

  • value (object | None)

class ngapp.components.basecomponent.Storage(component: T)#

Bases: object

Storage class for components, use it to store large chunks of data on the backend

Parameters:

component (T)

delete(key: str)#

Delete data from storage

Parameters:

key (str)

get(key: str)#

Get data from storage

Parameters:

key (str)

set(
key: str,
value: str | dict | list | bytes | object,
use_pickle=False,
)#

Set data in storage

Parameters:

  • key (str)

  • value (str | dict | list | bytes | object)