Components attributes defined by user

[ionv06]

Hi,
I thought it would be useful to have the possibility to add attributes on the html elements defined by components. That is, to the components where we can already add IDs or classes, to add other attributes. That way we would be able to easily use htmx, hyperscript or other libraries. For example, see #692, the 'htmxcontent' in dropdown component defined by me.

[lovasoa]

Hello ! Sorry for not taking part in the previous long discussion.

I understand the interest for this, but I think users who want to build their own html should write custom components.

Allowing to custom html attributes in normal components would probably confuse beginners, and be dangerous if user-generated data ends up in these attributes. SQLPage aims to be foolproof and beginner friendly, while letting more advanced users who know frontend development do their things in custom components.

If a compelling use case requires client-side interaction, I think we should build it directly into sqlpage, and document it properly.

[ionv06]

It was just an idea that I would have liked to see implemented without having to modify the template files of the components, but it is not a problem if it is not possible. A compelling use case is one where there are many components on a page, each one generated by complex queries on large databases, and you want to update the data from a single component based on user interaction, without loading the whole the page (all components) again (for example Yunus' use case with 'staffs' or validating the uniqueness of a field in a form before submit, etc). Something like in the example below (that dropdown can be a 'select' type in a 'form' component) - when changing the selection in the dropdown, only the first table is loaded again on the page - the one obtained from 'staffs'.

dropdown.handlebars

<div>
    <label for="{{name}}">{{title}} </label>

    <select name="{{name}}" 
	{{~#if htmxcontent}} {{{htmxcontent}}} {{/if~}}
	>
        {{#each_row}}
            <option value="{{value}}" > {{title}} </option>
        {{/each_row}}
    </select>
</div>

index.sql

select 'shell' as component, 'https://unpkg.com/[email protected]' as javascript;

select
    'dropdown' as component,
    'Select an item ' as title,
	'staff_id' as name,
	'hx-get="/table.sql" 
     hx-target="#tbl" 
     hx-trigger="change" ' as htmxcontent;	
SELECT 
     staff_id   AS value
    ,staff_name AS title
FROM staffs;

select 'text' as component,'Selected staff' as title;
select 'html' as component,'<div id="tbl"></div>' as html;

select 'text' as component,'All documents' as title;

select 'table' as component;
select id,user,document from documents limit 300;
 

table.sql

select 
    'shell-empty' as component;
select 'table' as component,true as sort, true as search;
select * from staffs where staff_id=$staff_id;