diff --git a/CHANGELOG.md b/CHANGELOG.md index fabe8f86..19588d0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,9 @@ - Optimize queries like `select 'xxx' as component, sqlpage.some_function(...) as parameter` to avoid making an unneeded database query. This is especially important for the performance of `sqlpage.run_sql` and the `dynamic` component. + - New `dropdown` row-level property in the [`form` component](https://sql.ophir.dev/documentation.sql?component=form#component) + - ![select dropdown in form](https://github.com/lovasoa/SQLpage/assets/552629/5a2268d3-4996-49c9-9fb5-d310e753f844) + - ![multiselect input](https://github.com/lovasoa/SQLpage/assets/552629/e8d62d1a-c851-4fef-8c5c-a22991ffadcf) ## 0.20.2 (2024-04-01) diff --git a/examples/official-site/examples/show_variables.sql b/examples/official-site/examples/show_variables.sql new file mode 100644 index 00000000..8ed3c63a --- /dev/null +++ b/examples/official-site/examples/show_variables.sql @@ -0,0 +1,19 @@ +SELECT 'shell' as component, 'SQLPage' as title, + 'chart' as menu_item, + 'layouts' as menu_item, + 'tabs' as menu_item, + 'show_variables' as menu_item; + +select 'list' as component, 'POST variables' as title, + 'Here is the list of POST variables sent to this page. + Post variables are accessible with `:variable_name`.' as description_md, + 'No POST variable.' as empty_title; +select key as title, ':' || key || ' = ' || "value" as description +from json_each(sqlpage.variables('post')); + +select 'list' as component, 'GET variables' as title, + 'Here is the list of GET variables sent to this page. + Get variables are accessible with `$variable_name`.' as description_md, + 'No GET variable.' as empty_title; +select key as title, '$' || key || ' = ' || "value" as description +from json_each(sqlpage.variables('get')); \ No newline at end of file diff --git a/examples/official-site/examples/tabs.sql b/examples/official-site/examples/tabs.sql index 329779f6..c3fd50e1 100644 --- a/examples/official-site/examples/tabs.sql +++ b/examples/official-site/examples/tabs.sql @@ -1,3 +1,9 @@ +SELECT 'shell' as component, 'SQLPage' as title, + 'chart' as menu_item, + 'layouts' as menu_item, + 'tabs' as menu_item, + 'show_variables' as menu_item; + create table if not exists tab_example_cards as select 'Leaf' as title, 'Leaf_1_web' as img, 'f4' as prefix, 'green' as color, 'Autumn''s dance begins, Crimson leaves in breezy waltz, Nature''s fleeting art.' as description union all select 'Caterpillar', 'Caterpillar_of_box_tree_moth%2C_Germany_2019', 'a9', 'green', 'Caterpillar crawls, silent transformation unfolds.' union all diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index d064c586..4194c24b 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -299,9 +299,9 @@ SELECT )) as options FROM fruits ``` -', json('[{"component":"form"}, '|| - '{"name": "Fruit", "type": "select", "dropdown": true, "value": 1, "options": '|| - '"[{\"label\": \"Orange\", \"value\": 0}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3}]"} +', json('[{"component":"form", "action":"examples/show_variables.sql"}, + {"name": "Fruit", "type": "select", "dropdown": true, "value": 1, "options": + "[{\"label\": \"Orange\", \"value\": 0}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3}]"} ]')), ('form', '### Multi-select You can authorize the user to select multiple options by setting the `multiple` property to `true`. @@ -337,7 +337,7 @@ left join my_user_options on my_options.id = my_user_options.option_id and my_user_options.user_id = $user_id ``` -', json('[{"component":"form"}, +', json('[{"component":"form", "action":"examples/show_variables.sql"}, {"label": "Fruits", "name": "fruits[]", "type": "select", "multiple": true, "create_new":true, "placeholder": "Good fruits...", "dropdown": true, "description": "press ctrl to select multiple values", "options": "[{\"label\": \"Orange\", \"value\": 0, \"selected\": true}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3, \"selected\": true}]"} ]')),