better documentation

Author: lovasoa

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)
 

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'));

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

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}]"}
     ]')),