From 4274d8f8221c2bc2f3052900186444ca8dab6af0 Mon Sep 17 00:00:00 2001 From: Matthew Vine Date: Mon, 6 Jan 2025 19:22:14 -0500 Subject: [PATCH 1/5] fix: update to use modelValue for vue3 --- vue-components/src/components/Editor.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/vue-components/src/components/Editor.js b/vue-components/src/components/Editor.js index 2521850..389e9f0 100644 --- a/vue-components/src/components/Editor.js +++ b/vue-components/src/components/Editor.js @@ -9,7 +9,7 @@ import * as monaco from "monaco-editor"; export default { name: "VSEditor", props: { - value: { + modelValue: { type: String, default: "", }, @@ -34,8 +34,8 @@ export default { }, }, watch: { - value(v) { - if (this.editor) { + modelValue(v) { + if (this.editor && this.editor.getValue() !== v) { this.editor.setValue(v); } }, @@ -102,7 +102,7 @@ export default { } this.editor = monaco.editor.create(this.$el, { - value: this.value, + value: this.modelValue, language: this.language, theme: this.theme, ...this.options, @@ -112,9 +112,10 @@ export default { provider.injectCSS(); } - this.editor.onDidChangeModelContent(() => - this.$emit("input", this.editor.getValue()) - ); + this.editor.onDidChangeModelContent(() => { + this.$emit("update:modelValue", this.editor.getValue()); + this.$emit("input", this.editor.getValue()); + }); }, beforeUnmount() { this.editor.dispose(); From 9172e3b87a3959dee4df5bcbbf912576a5bbd459 Mon Sep 17 00:00:00 2001 From: Matthew Vine Date: Mon, 6 Jan 2025 19:29:06 -0500 Subject: [PATCH 2/5] docs: remove value from python wrapper --- trame_code/widgets/code.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/trame_code/widgets/code.py b/trame_code/widgets/code.py index 3e16a1f..7f204a8 100644 --- a/trame_code/widgets/code.py +++ b/trame_code/widgets/code.py @@ -21,8 +21,8 @@ class Editor(HtmlElement): Properties: + :param v_model: :param options: - :param value: :param theme: :param language: :param textmate: @@ -40,7 +40,6 @@ def __init__(self, **kwargs): ) self._attr_names += [ "options", - "value", "theme", "language", "textmate", From d9dc6f8fe0d393e596a0eeb4a0d20d32e5aa6681 Mon Sep 17 00:00:00 2001 From: Matthew Vine Date: Mon, 6 Jan 2025 20:02:19 -0500 Subject: [PATCH 3/5] fix: bring back vue2 support --- trame_code/widgets/code.py | 7 ++++++- vue-components/src/components/Editor.js | 22 ++++++++++++++++++---- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/trame_code/widgets/code.py b/trame_code/widgets/code.py index 7f204a8..2e71044 100644 --- a/trame_code/widgets/code.py +++ b/trame_code/widgets/code.py @@ -1,5 +1,7 @@ """Module compatible with vue2 and vue3. To use it, you need to install **trame-code**""" + from trame_client.widgets.core import AbstractElement + from .. import module __all__ = [ @@ -21,8 +23,9 @@ class Editor(HtmlElement): Properties: - :param v_model: :param options: + :param value: + :param model_value: :param theme: :param language: :param textmate: @@ -40,6 +43,8 @@ def __init__(self, **kwargs): ) self._attr_names += [ "options", + "value", + ("model_value", "modelValue"), "theme", "language", "textmate", diff --git a/vue-components/src/components/Editor.js b/vue-components/src/components/Editor.js index 389e9f0..ab53e82 100644 --- a/vue-components/src/components/Editor.js +++ b/vue-components/src/components/Editor.js @@ -11,7 +11,9 @@ export default { props: { modelValue: { type: String, - default: "", + }, + value: { + type: String, }, options: { type: Object, @@ -35,7 +37,12 @@ export default { }, watch: { modelValue(v) { - if (this.editor && this.editor.getValue() !== v) { + if (this.editor && v !== undefined && this.editor.getValue() !== v) { + this.editor.setValue(v); + } + }, + value(v) { + if (this.editor && v !== undefined && this.editor.getValue() !== v) { this.editor.setValue(v); } }, @@ -112,9 +119,16 @@ export default { provider.injectCSS(); } + this.lastValue = this.editor.getValue(); + this.editor.onDidChangeModelContent(() => { - this.$emit("update:modelValue", this.editor.getValue()); - this.$emit("input", this.editor.getValue()); + const newValue = this.editor.getValue(); + if (this.lastValue === newValue) { + return; + } + this.lastValue = newValue; + this.$emit("update:modelValue", newValue); + this.$emit("input", newValue); }); }, beforeUnmount() { From b356e66608b7b0655bffa4022c8f9815ceffcdbf Mon Sep 17 00:00:00 2001 From: Matthew Vine Date: Mon, 6 Jan 2025 20:05:47 -0500 Subject: [PATCH 4/5] fix: initial value for vue2 --- vue-components/src/components/Editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vue-components/src/components/Editor.js b/vue-components/src/components/Editor.js index ab53e82..1cb8f67 100644 --- a/vue-components/src/components/Editor.js +++ b/vue-components/src/components/Editor.js @@ -109,7 +109,7 @@ export default { } this.editor = monaco.editor.create(this.$el, { - value: this.modelValue, + value: this.modelValue || this.value, language: this.language, theme: this.theme, ...this.options, From 34b443d4b02328db155a4e152516d312dbfa7090 Mon Sep 17 00:00:00 2001 From: Matthew Vine Date: Mon, 6 Jan 2025 20:07:34 -0500 Subject: [PATCH 5/5] fix: update vue2 example to use vue2 client type --- example/read-only/viewer.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/read-only/viewer.py b/example/read-only/viewer.py index 7b9e7e3..579fe9e 100644 --- a/example/read-only/viewer.py +++ b/example/read-only/viewer.py @@ -8,7 +8,7 @@ # Trame setup # ----------------------------------------------------------------------------- -server = get_server() +server = get_server(client_type="vue2") state, ctrl = server.state, server.controller