Allow Custom Components to embed Standard Components

[guspower]

What are you building with SQLPage ?

A project wiki.

What is your problem ? A description of the problem, not the solution you are proposing.

I am using htmx to render modal dialogs for data entry.

At the moment I am using three custom components for this:

• the htmx enriched button
• the modal header
• the modal footer

Having to render a header, then my content using standard components, then the footer feels a bit off. It would be really cool if a custom component could render other components inside themselves somehow - that the caller could somehow supply the body.

What are you currently doing ? Since your solution is not implemented in SQLPage currently, what are you doing instead ?

Separate header, footer as detailed above.

Describe the solution you'd like

Honestly I don't really know the cleanest way to express this. Being able to supply the body of a component using a subselect? I'm not sure. I guess I'm hopeful to have a set of smaller components that can be assembled by a custom component rather than having to specify everything on the custom component. I suspect this would be a total can of worms though.

Describe alternatives you've considered

Copy and pasting standard component template code into my own custom templates - it's not maintainable or pretty. The card component doesn't really work for this scenario either.

[lovasoa]

Could you post an example of what you are doing, or even publish your application on github ? I'd like to understand your use case better before diving into a solution.

[guspower]

Yes of course.

1. Modal button

I take the existing button component and copy it, inserting the following markup:

modal-button.handlebars :

...
        </a>
        {{/if}}

        <div id="{{id}}"
             class="modal modal-blur fade"
             style="display: none"
             aria-hidden="false"
             tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content"></div>
            </div>
        </div>

    {{/each_row}}
</div>

so I am basically inserting this extra markup as the htmx model target for each button, the rest of the component remains unchanged. I have a few instances where I've copied the standard component wholesale and not changed it a whole lot - I just added another section of markup inside or swap something out.

2. Modal Form

Then I have 2 components for the modal itself :
modal-header.handlebars :

<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">{{title}}</h5>
        </div>
        <div class="modal-body">

modal-footer.handlebars :

        </div>
        <div class="modal-footer">
            {{#if close_button}}<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>{{/if}}
        </div>
    </div>
</div>

I call them in sequence like so:

SELECT 'modal-header' AS component,
       'Associated Projects' AS title;

-- modal content here
SELECT
    'form'             AS component;
-- modal content end

SELECT 'modal-footer' AS component,
       TRUE AS close_button;

You can see that the templates have "dangling" tags but if used in the right order I can get the effect I was looking for. I did use a shell to construct the modal form as an alternative, which seems cleaner, but that means I can't embed it in the page and have to call out using ajax to get it. Another alternative I've used has been to use javascript to render and insert templates into the standard components in the browser, but that always makes me sad.

Anyway doing this had me thinking about other components I've modified - like putting htmx controls into tables - and I thought I'd just share where I'm at in case you had any design ideas in this area.

[lovasoa]

Thank you for the example ! I see what you mean, now.

I think the best way to realize this is to reuse the card dynamic loading logic.
See: https://github.com/sqlpage/SQLPage/blob/main/sqlpage/sqlpage.js#L4-L22

Your modal component could contain the equivalent of a card with dynamic content, and be called like this instead of being split in two:

SELECT 'modal-header' AS component,
       'Associated Projects' AS title,
       'my_form.sql' as embed,
       TRUE AS close_button;

SQLPage could do a better job at standardizing and documenting this so that it can be used by custom component authors.