Add support For HTML data attributes on components

What are you building with SQLPage ?

A link sharing tool

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

I am using htmx to add interactivity to some of the components.

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

I copy the component source into my configuration/templates directory and modify it to support attributes. On sqlpage release I have to update the templates.

Describe the solution you'd like

I would like the sqlpage mainline components to support user-provided html attributes.

Describe alternatives you've considered

Decorating attributes onto DOM elements using javascript and css selectors. It's unpleasant.

Additional context

Here is an example of the datagrid component (datagrid.handlebars):

<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}{{#each attribute}} {{{this}}}{{/each}}>
   ...
    <div class="card-body">
        <div class="datagrid">
            {{#each_row}}
                <div class="datagrid-item {{title}}"{{#each attribute}} {{{this}}}{{/each}}>
                    ...
                    </div>
                </div>
            {{/each_row}}
        </div>
    </div>
</div>

and in use:

SELECT 'datagrid'             AS component
;

SELECT 'Edit Link' AS title
    , 'edit' AS icon
    , 'hx-get="/component/dropdown.sql?_sqlpage_embed&link=' || $link || '"' AS attribute
    , 'hx-target=".datagrid-item.' || $linkl || '"' AS attribute
    , 'hx-swap="outerHTML"' AS attribute
    , 'hx-trigger="click once"' AS attribute
;

There is probably a nicer way to express this - maybe with name/value json pairs - but this was a quick solution that works.

Just my 2 cents: I have been using SQLPage on a personal project (TY by the way, this project is awesome) and I wanted to add a little feature (auto-submission of form when a drop-down menu was changed). A quick and easy way to achieve that was using htmx, so I did something similar to @guspower and added some fields to my custom form component.

In my opinion this kind of integration works great and fits the SQLPage philosophy: I can add some htmx attributes to components to get tiny, self contained actions and that do not "pollute" the page. Better yet, htmx works very well with the pre-rendered nature of this project.

I think it would be really nice if we were able to get something like this proposal. Also, there is a discussion on the same topic here: https://github.com/lovasoa/SQLpage/discussions/628

sqlpage / SQLPage

Add support For HTML data attributes on components #631