diff --git a/examples/09_advanced/custom_js/app.py b/examples/09_advanced/custom_js/app.py new file mode 100644 index 00000000..bab184c9 --- /dev/null +++ b/examples/09_advanced/custom_js/app.py @@ -0,0 +1,43 @@ +from pathlib import Path + +from trame.app import get_server +from trame.widgets import vuetify3 +from trame.ui.vuetify3 import SinglePageLayout + + +def load_my_js(server): + # must run before server start + js_file = Path(__file__).with_name("my_utils.js").resolve() + server.enable_module( + dict( + serve={"my_code": str(js_file.parent)}, scripts=[f"my_code/{js_file.name}"] + ) + ) + + +class CustomAddOnJS: + def __init__(self, server=None, table_size=10): + self.server = get_server(server, client_type="vue3") + load_my_js(self.server) + self.ui = self._build_ui() + + def _build_ui(self): + with SinglePageLayout(self.server, full_height=True) as layout: + with layout.content: + vuetify3.VTextField( + v_model=("text_1", "1.2"), + rules=("[utils.my_code.rules.number]",), + ) + vuetify3.VTextField( + v_model=("text_2", "2"), + rules=("[utils.my_code.rules.int]",), + ) + + +def main(): + app = CustomAddOnJS() + app.server.start() + + +if __name__ == "__main__": + main() diff --git a/examples/09_advanced/custom_js/my_utils.js b/examples/09_advanced/custom_js/my_utils.js new file mode 100644 index 00000000..f6236814 --- /dev/null +++ b/examples/09_advanced/custom_js/my_utils.js @@ -0,0 +1,16 @@ +window.trame.utils.my_code = { + rules: { + number(v) { + if (Number.isNaN(Number(v))) { + return "Value needs to be a number"; + } + return true; + }, + int(v) { + if (!Number.isInteger(Number(v))) { + return "Value needs to be an integer"; + } + return true; + } + } +} \ No newline at end of file