How to implement other vue components that are not supported in nicegui?

[ghost]

I read this issue #111 and the linked demo https://github.com/zauberzeug/nicegui/blob/main/examples/custom_vue_component/main.py.

But I don't entirely understand how to implement the range component. I tried the following but my understanding is limited so I am probably just making a mistake with my implementation:

range.js:

export default {
  template: "  <div class=\"q-pa-md\">\n" +
      "    <q-badge color=\"secondary\">\n" +
      "      Model: {{ standard.min }} to {{ standard.max }} (0 to 50)\n" +
      "    </q-badge>\n" +
      "\n" +
      "    <q-range\n" +
      "      v-model=\"standard\"\n" +
      "      min={{ standard.min }}" +
      "      max={{ standard.max }}" +
      "    />",

  data() {
    return {
      min: 0,
      max: 10
    };
  },
  methods: {
    handle_click() {
      this.$emit("change", this.min);
    },
    set_values(min, max) {
      this.min = min
      this.max = max
    }

  },
  props: {
    title: String,
  },
};

Range.py:

from typing import Callable, Optional

from nicegui.dependencies import register_component
from nicegui.element import Element

register_component('range', __file__, 'range.js')


class Range(Element):
    def __init__(self, title: str, min: int, max:int, *, on_change: Optional[Callable] = None) -> None:
        super().__init__('range')
        self.run_method('set_values', min, max)
        self._props['title'] = title
        self.on('change', on_change)

and in my page logic:

Range(min=1, max=10, title='Timeline')

I hope you can help me out

[falkoschindler]

Let me see...

• Minor remark: Use backticks for the multiline template string. This simplifies quotations, line breaks and other escaped characters a lot.
• Your code referred to standard (I guess copied from a Quasar example), but never defined it. I named it value and added it to the data() object.
• What confused me at first: There is the current value with .min and .max, and there is the maximum allowed range from min to max. The latter are props defined via Python class parameters min and max. I included their values in the q-badge.
• handle_click was defined but never used. I named it handle_change and added a registration @change to the q-range tag.

So the resulting JavaScript code is as follows:

export default {
  template: `
    <div class="q-pa-md">
        <q-badge color="secondary">
            {{ title }}: {{ value.min }} to {{ value.max }} ({{ min }} to {{ max }})
        </q-badge>
        <q-range
            v-model="value"
            :min="min"
            :max="max"
            @change="handle_change"
        />
    </div>
  `,
  data() {
    return {
      value: {
        min: this.min,
        max: this.max,
      },
    };
  },
  methods: {
    handle_change(value) {
      this.$emit("change", { value });
    },
  },
  props: {
    title: String,
    min: Number,
    max: Number,
  },
};

In Python I basically improved the event registration:

• Using handle_event from nicegui.event takes care of async or non-async event handlers with and without event parameter. So a recommended pattern is to wrap the msg in an EventArguments object and pass it to handle_event. But a simple self.on('change', on_change) should work as well, as long as the handler knows how to unpack the msg dictionary.
• Oh and I removed the set_values method since our data() is intialized with min and max from the props anyway.

from typing import Callable, Optional

from nicegui.dependencies import register_component
from nicegui.element import Element
from nicegui.events import ValueChangeEventArguments, handle_event

register_component('range', __file__, 'range.js')

class Range(Element):

    def __init__(self, title: str, min: int, max: int, *, on_change: Optional[Callable] = None) -> None:
        super().__init__('range')
        self._props['title'] = title
        self._props['min'] = min
        self._props['max'] = max

        def handle_change(msg: dict) -> None:
            args = ValueChangeEventArguments(sender=self, client=self.client, value=msg['args']['value'])
            handle_event(on_change, args)
        self.on('change', handle_change)

And finally, here is an example usage:

Range(min=0, max=100, title='Test', on_change=lambda e: print(e.value, flush=True))

[ghost]

Thanks you so much, this really clears things up for me.