generically call methods of wrapped Quasar elements

nicegui/elements/image.js

@@ -1,6 +1,10 @@
 export default {
   template: `
-    <q-img v-bind="$attrs" :src="computed_src">
+    <q-img
+      ref="qRef"
+      v-bind="$attrs"
+      :src="computed_src"
+    >
       <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
         <slot :name="slot" v-bind="slotProps || {}" />
       </template>

nicegui/elements/input.js

@@ -1,7 +1,7 @@
 export default {
   template: `
     <q-input
-      ref="inputRef"
+      ref="qRef"
       v-bind="$attrs"
       v-model="inputValue"
       :shadow-text="shadowText"
@@ -61,20 +61,5 @@ export default {
         e.preventDefault();
       }
     },
-    resetValidation() {
-      this.$refs.inputRef.resetValidation();
-    },
-    validate(value) {
-      return this.$refs.inputRef.validate(value);
-    },
-    focus() {
-      this.$refs.inputRef.focus();
-    },
-    blur() {
-      this.$refs.inputRef.blur();
-    },
-    select() {
-      this.$refs.inputRef.select();
-    },
   },
 };

nicegui/elements/select.js

@@ -1,12 +1,17 @@
 export default {
   props: ["options"],
   template: `
-      <q-select v-bind="$attrs" :options="filteredOptions" @filter="filterFn">
-          <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
-              <slot :name="slot" v-bind="slotProps || {}" />
-          </template>
-      </q-select>
-    `,
+    <q-select
+      ref="qRef"
+      v-bind="$attrs"
+      :options="filteredOptions"
+      @filter="filterFn"
+    >
+      <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
+    </q-select>
+  `,
   data() {
     return {
       initialOptions: this.options,

nicegui/elements/table.js

@@ -1,6 +1,10 @@
 export default {
   template: `
-    <q-table v-bind="$attrs" :columns="convertedColumns">
+    <q-table
+      ref="qRef"
+      v-bind="$attrs"
+      :columns="convertedColumns"
+    >
       <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
         <slot :name="slot" v-bind="slotProps || {}" />
       </template>

nicegui/elements/upload.js

@@ -1,9 +1,12 @@
 export default {
   template: `
-    <q-uploader ref="uploader" :url="computed_url">
-        <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
-            <slot :name="slot" v-bind="slotProps || {}" />
-        </template>
+    <q-uploader
+      ref="qRef"
+      :url="computed_url"
+    >
+      <template v-for="(_, slot) in $slots" v-slot:[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
     </q-uploader>
   `,
   mounted() {
@@ -16,9 +19,6 @@ export default {
     compute_url() {
       this.computed_url = (this.url.startsWith("/") ? window.path_prefix : "") + this.url;
     },
-    reset() {
-      this.$refs.uploader.reset();
-    },
   },
   props: {
     url: String,

nicegui/templates/index.html

@@ -178,7 +178,15 @@
             document.getElementById('popup').style.opacity = 1;
           });
           window.socket.on("update", (msg) => Object.entries(msg).forEach(([id, el]) => this.elements[el.id] = el));
-          window.socket.on("run_method", (msg) => getElement(msg.id)?.[msg.name](...msg.args));
+          window.socket.on("run_method", (msg) => {
+            const element = getElement(msg.id);
+            if (element === null || element === undefined) return;
+            if (msg.name in element) {
+              element[msg.name](...msg.args);
+            } else {
+              element.$refs.qRef[msg.name](...msg.args);
+            }
+          });
           window.socket.on("run_javascript", (msg) => runJavascript(msg['code'], msg['request_id']));
           window.socket.on("open", (msg) => (location.href = msg.startsWith('/') ? "{{ prefix | safe }}" + msg : msg));
           window.socket.on("download", (msg) => download(msg.url, msg.filename));