MainUI - higher order components

Add-ons UIs
1

Hello,

I am just wondering - is there any way to create higher order components in MainUI? Do you have any examples? f7-card is a higher order component because you can pass other components to be its body.

But how to create higher order compoents by hand in mainui? Am I missing something?

Regards
Piotr

2

With enough patience and the willingness to work around very occasional limitations, there’s pretty much no limit to what you can do with the custom widgets.

I’m not quite sure exactly what you mean by “create higher order compoents by hand”, but if you mean make an new vue file that will then work as a new component type then you’d have to do that as an addition to the UI itself, not through the widget editor.

On the other hand, you can call one widget from another widget. For example, say you have a light widget with a parameter named lightItem and you want to call that several times from some other bigger widget, you would just do something like this:

- component: widget:light_widget
  config:
     lightItem: kitchenLightSwitch
- component: widget:light_widget
  config:
     lightItem: bathroomLightSwitch
3

I would like to create my own version of a card component and use it as follow:

   - component: widgets:my_own_card
      slots:
        default:
          - component: f7-list-item
            slots:
              default:

In other words - for me higher order components are not widgets which you can only configure through props but rather decorators to which you can pass “a body” in form of other components.

oh-card, 7f-card are higher order components because you can pass them theirs body through slots.

4

Got it. At present, no, there’s no way to do that directly with the widget system. The most robust way to do that would be to create PR with a new vue page in the MainUI.

1 Like