fix: improved Vue example

arnog · Dec 10, 2024 · 0201632 · 0201632
1 parent d24d001
commit 0201632
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 77 deletions.
diff --git a/examples/vue/index.html b/examples/vue/index.html
@@ -2,76 +2,76 @@
 <html lang="en-US">
 
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="../style.css" />
-    <link rel="stylesheet" href="style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="../style.css" />
+  <link rel="stylesheet" href="style.css" />
+  <title>MathLive with Vue.js</title>
 </head>
 
 <body>
-    <script type="module">
-        import Vue from 'https://cdn.jsdelivr.net/npm/vue/dist/vue.esm.browser.js';
-        import * as MathLive from '/dist/mathlive.mjs';
-        import VueMathfield from '../../dist/vue-mathlive.mjs';
-        Vue.config.devtools = true;
+  <script type="module">
+    import Vue from 'https://cdn.jsdelivr.net/npm/vue/dist/vue.esm.browser.js';
+    import * as MathLive from '/dist/mathlive.mjs';
+    import VueMathfield from '../../dist/vue-mathlive.mjs';
+    Vue.config.devtools = true;
 
-        Vue.use(VueMathfield, MathLive);
-        // The default tag for mathfields is <mathlive-mathfield>
-        // A custom tag can be defined using:
-        // ```Vue.component("custom-tag", Mathfield);```
+    Vue.use(VueMathfield, MathLive);
+    // The default tag for mathfields is <mathlive-mathfield>
+    // A custom tag can be defined using:
+    // ```Vue.component("custom-tag", Mathfield);```
 
-        new Vue({
-            el: 'main',
-            data: function () {
-                return {
-                    formula: 'g(x)',
-                    keystroke: '',
-                };
-            },
-            methods: {
-                sayIt: function (event) {
-                    this.$refs['mathfield'].$el.executeCommand([
-                        'speak',
-                        'all',
-                    ]);
-                },
-                setIt: function (event) {
-                    this.formula = 'x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}';
-                },
-                ping: function () {
-                    console.log('ping');
-                },
-                displayKeystroke: function (keystroke, _ev) {
-                    this.keystroke = keystroke;
-                    return true;
-                },
-                asSpokenText: function () {
-                    return (
-                        (this.$refs['mathfield'] &&
-                            this.$refs['mathfield'].$el.getValue(
-                                'spoken'
-                            )) ||
-                        ''
-                    );
-                },
-            },
-        });
-    </script>
+    new Vue({
+      el: 'main',
+      data: function () {
+        return {
+          formula: 'g(x)',
+          keystroke: '',
+        };
+      },
+      methods: {
+        sayIt: function (event) {
+          this.$refs['mathfield'].$el.executeCommand([
+            'speak',
+            'all',
+          ]);
+        },
+        setIt: function (event) {
+          this.formula = 'x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}';
+        },
+        ping: function () {
+          console.log('ping');
+        },
+        displayKeystroke: function (keystroke, _ev) {
+          this.keystroke = keystroke;
+          return true;
+        },
+        asSpokenText: function () {
+          return (
+            (this.$refs['mathfield'] &&
+              this.$refs['mathfield'].$el.getValue(
+                'spoken'
+              )) ||
+            ''
+          );
+        },
+      },
+    });
+  </script>
 
-    <header>
-        <h1>MathLive with Vue.js</h1>
-    </header>
-    <main>
-        <mathlive-mathfield id="mf" ref="mathfield" @focus="ping"
-            :options="{virtualKeyboardMode:'onfocus', smartFence:false, fontsDirectory:'./fonts'}"
-            :on-keystroke="displayKeystroke" v-model="formula">f(x)=</mathlive-mathfield>
-        <div><label>Keystroke:&nbsp;</label><kbd>{{keystroke}}</kbd></div>
-        <div class="output">LaTeX: {{formula}}</div>
-        <div class="output">Spoken text: {{asSpokenText()}}</div>
-        <div>
-            <button v-on:click="sayIt">Say It</button>
-            <button v-on:click="setIt">Set It</button>
-        </div>
-    </main>
+  <header>
+    <h1>MathLive with Vue.js</h1>
+  </header>
+  <main>
+    <mathlive-mathfield id="mf" placeholder="\text{Enter math here}" ref="mathfield" @focus="ping"
+      :on-keystroke="displayKeystroke" v-model="formula"></mathlive-mathfield>
+    <div><label>Keystroke:&nbsp;</label><kbd>{{keystroke}}</kbd></div>
+    <div class="output">LaTeX: {{formula}}</div>
+    <div class="output">Spoken text: {{asSpokenText()}}</div>
+    <div>
+      <button v-on:click="sayIt">Say It</button>
+      <button v-on:click="setIt">Set It</button>
+    </div>
+  </main>
 </body>
 
 </html>
diff --git a/src/vue-mathlive.js b/src/vue-mathlive.js
@@ -10,10 +10,6 @@ export default {
       type: String,
       default: '',
     },
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
   },
   /*
    * To register this component, call:
@@ -60,19 +56,12 @@ export default {
         });
       }
     },
-    options: {
-      deep: true,
-      handler(newValue, oldValue) {
-        if (JSON.stringify(newValue) !== JSON.stringify(oldValue))
-          this.$el.setOptions(newValue);
-      },
-    },
   },
   mounted() {
     // A new instance is being created
     // Wait until the DOM has been constructed...
     // ... then configure the mathfield
-    this.$nextTick(() => this.$el.setOptions(this.options));
+    this.$nextTick(() => {});
   },
   methods: {
     /*

diff --git a/test/smoke/index.html b/test/smoke/index.html
@@ -41,7 +41,7 @@ <h1>Smoke Test</h1>
     </ul>
   </header>
   <main>
-    <math-field id="mf">x_{a+1}^{b+2}</math-field>
+    <math-field id="mf" placeholder="\text{Enter math here}"></math-field>
     <!-- <math-field id="mf">x_{a+1}^{b+2}</math-field> -->
     <!-- <math-field id="mf"
         >\left(r+s+\right)+\sqrt{x+1}=\frac{ab+cd}{1243+def}</math-field