Example for adding existing Vue components from Ant Design Vue

[bigfatwhale]

Hi!

I'm relatively new to justpy but i'm really excited about its capabilities!

I've been trying to add Ant Design Vue components to the justpy framework. Specifically I wanted to just test convert the drawer component here.

The following is what I intend to do,

1. Create antd.html with a single line <script src="https://unpkg.com/[email protected]/dist/antd.js"></script> in my templates directory (a duplicate of the justpy default) and add it to the jinja template file main.html.

2. Write the new component's python class that looks something like this,

   class ADrawer(jp.JustpyBaseComponent):
   
    vue_type = 'antdrawer'
   
    def __init__(self, **kwargs):
   
        self.options = jp.Dict()
        self.classes = ''
        self.style = ''

However, I'm not quite sure how do I proceed given that the draw is already a Vue component. Do i write the .js code for it as well?

I took a look at quasarcomponents.py and I guess there's some leg-work to do for antdv similar to quasar.

Could you let me know if i'm going in the right direction? Even better if you kindly take me throw a quick example of how to do this for one antd component.

Thanks!

[elimintz]

Hi,

Thank you for experimenting with JustPy.
What you would like to do requires developing a Vue component also (even though ant components are Vue components). For Quasar components that file is: https://github.com/elimintz/justpy/blob/master/justpy/templates/js/quasar_component.js

You would need something similar for ant components.

Also, please take a look at: https://justpy.io/tutorial/advanced_components/

[bigfatwhale]

Thanks for the quick pointers!

Am I right to say that I need to write a wrapper class around the antd vue components?

At the same time I was also trying to extend parse_html to recognise the simple example on antd vue's page,

<template>
  <div>
    <a-button type="primary" @click="showDrawer">
      Open
    </a-button>
    <a-drawer
      title="Basic Drawer"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>

What I tried to do was the following,

import justpy as jp

antd_directives = ['v-bind']

class ADiv(jp.Div):

    slots = []

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.vue_type = 'antd_component'
        self.directives = antd_directives

    def __setattr__(self, key, value):
        if key in self.slots:
            q_slot = key[:key.index('_slot')].replace('_', '-')
            self.add_scoped_slot(q_slot, value)
        else:
            self.__dict__[key] = value

@jp.parse_dict
class AButtton(jp.Div):
    html_tag = 'a-button'

@jp.parse_dict
class ADrawer(jp.Div):
    html_tag = 'a-drawer'


html = '''
<div>
    <a-button type="primary" @click="showDrawer">
      Open
    </a-button>
    <a-drawer
      title="Basic Drawer"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer>
  </div>
'''

c = jp.parse_html(html)

However it hit some issue trying to parse ':closable="false"',

File "C:\Users\myuser.conda\envs\justpy\lib\site-packages\justpy\htmlcomponents.py", line 1481, in handle_starttag
attr[1] = eval(attr[1])
File "", line 1, in
NameError: name 'false' is not defined

Could you kindly advise how I can go about fixing this problem?

[elimintz]

Please take a look at https://github.com/elimintz/justpy/blob/master/justpy/templates/js/quasar_component.js
You need to write something similar for ant components. It is rather complex.

[bigfatwhale]

cool! let me take a look!