From 85795e2d364993cbbada80cc8266df4d005fcbd2 Mon Sep 17 00:00:00 2001
From: Sebastien Jourdain <sebastien.jourdain@kitware.com>
Date: Wed, 17 Jan 2024 14:57:16 -0700
Subject: [PATCH] docs(custom_js): example with custom JS

---
 examples/09_advanced/custom_js/app.py      | 43 ++++++++++++++++++++++
 examples/09_advanced/custom_js/my_utils.js | 16 ++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 examples/09_advanced/custom_js/app.py
 create mode 100644 examples/09_advanced/custom_js/my_utils.js

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