Support third party Vue libraries

[Smug246]

how would i go about integrating this https://github.com/neighborhood999/vue-signature-pad into a python class i looked at nipple.js but don't really understand it as im not familiar with vue

[falkoschindler]

Hi @Smug246!

This is a very good question. Actually, I'm not sure if there is an easy answer. Although we support defining custom elements using single-file components like joystick.vue, we're currently not using Vue dependencies. I tried creating an example with vue-signature-pad, but struggled to get it to work.

In contrast it is rather easy to work with the JavaScript counterpart signature-pad:

1. Download signature_pad.umd.min.js from https://github.com/szimek/signature_pad.
2. Create a file signature_pad.js:

   export default {
     template: `<canvas></canvas>`,
     mounted() {
       new SignaturePad(this.$el);
     },
   };

3. Create a Python class SignaturePad:

   class SignaturePad(ui.element, component='signature_pad.js', libraries=['signature_pad.umd.min.js']):
       pass

Now you can add a SignaturePad() to your app. Of course, we'd need to add some methods to actually interact with the pad.

[Smug246]

thanks for this. its a great start. i dont want to sound like a noob but how would i go about adding options to the signature_pad.js in terms of like a src option so i can display an image and allow a signature over it.

Edit: to be more clear i mean you know how you can put an image inside a card. just like that but with an image inside the signature canvas.

[falkoschindler]

One way would be to add a slot to the JS component (see interactive_image.js for a similar example):

export default {
  template: `
    <div style="position:relative">
      <canvas ref="canvas" style="position:absolute" />
      <slot></slot>
    </div>
  `,
  mounted() {
    new SignaturePad(this.$refs.canvas);
  },
};

Then you can insert elements like this:

with SignaturePad():
    ui.label('Signature Pad')

[Smug246]

lovely. once last question what am i doing wrong here when trying to resize the signature pad to its parent elements size.

export default {
  template: `
    <div style="position:relative">
      <canvas ref="canvas" style="position:absolute" />
      <slot></slot>
    </div>
  `,
  mounted() {
    const canvas = this.$refs.canvas;
    const signaturePad = new SignaturePad(canvas);

    const resizeCanvas = () => {
      const ratio = Math.max(window.devicePixelRatio || 1, 1);
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      signaturePad.clear();
    };

    window.addEventListener("resize", resizeCanvas);
    resizeCanvas();
  },
};

document_image = ui.image(source=document['document']).style('margin-top: 0px; margin-left: auto; margin-right: auto;')
                        with document_image:
                            SignaturePad()

result:

[falkoschindler]

Sorry, I looked into it but couldn't find an answer. Maybe you can add some borders or background colors to get a better idea of what's going on?

[falkoschindler]

It would be sooo great if NiceGUI would allow the user to use a third-party Vue library based on an NPM name. It could automatically download the library and its dependencies if they don't already exist locally. But currently we even struggle to use any custom Vue 3 components. So I'm not sure how the integration of even more Vue components could work.

[Smug246]

oh that's annoying, is vue3 a lot different to vue2 then?

[falkoschindler]

There are some incompatibilities, but I haven't looked into the details. For SFC components like joystick.vue we use vbuild, which is stuck on Vue 2 and isn't actively developed anymore. So we either need to dive into this compiler and upgrade it to Vue 3 or find another solution.

[Smug246]

i reckon maybe implement that in the future like version 1.5 when it's really needed because it's breaking changes and will need a big upgrade. i don't have the most experience but i reckon building off vbuild and making a separate module for nicegui's needs would work best so you could easily make changes and have no extra unneeded functionality

[falkoschindler]

I realized that we don't need to compile 3rd-party Vue components if we have access to a compiled JavaScript version, like a min.js or esm.js file. But I'm still working on a POC example.

[rodja]

@dclause maybe you have some insights about how we could load esm dependencies?

[dclause]

@rodja Hi ! ESM is usually made to be used with a JS build stack. But, in the nicegui, there is es-module-shims added, so it can help with supporting ESM modules.
For instance, see mermaid components: it uses an exposed library (ESM) which is loaded through this shim.

[NaMoCv]

"Do you have a demo?"

[dreweskooi]

So I try to use an js component pivottable and use instructions as outl;ined, but it requires jQuery , how do I handle that ? I tried this : class Pivottable(ui.element, component='pivottable.js', libraries=['pivot.js'], exposed_libraries=['pivot.js'],extra_libraries=['jquery-ui.js','jquery.js']):
pass
But still get in browser error message jQuery is not defined. I used the unminified files to hopefully get an idea what is wrong.

[alitrack]

@dreweskooi how about this, https://github.com/Seungwoo321/vue-pivottable

[rodja]

In #1546 we have a request to support vue-grid-layout. Should be possible as soon as we have the generic ability to wrap vue components.