diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 5bbaf374..8f8b1297 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -193,7 +193,7 @@ INSERT INTO component(name, icon, description) VALUES INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'form', * FROM (VALUES -- top level ('method', 'Set this to ''GET'' to pass the form contents directly as URL parameters. If the user enters a value v in a field named x, submitting the form will load target.sql?x=v. If target.sql contains SELECT $x, it will display the value v.', 'TEXT', TRUE, TRUE), - ('action', 'An optional link to a target page that will handle the results of the form. By default the target page is the current page. Setting it to the name of a different sql file will load that file when the user submits the form.', 'TEXT', TRUE, TRUE), + ('action', 'An optional link to a target page that will handle the results of the form. By default the target page is the current page with the id of the form (if passed) used as hash - this will bring us back to the location of the form after submission. Setting it to the name of a different sql file will load that file when the user submits the form.', 'TEXT', TRUE, TRUE), ('title', 'A name to display at the top of the form. It will be displayed in a larger font size at the top of the form.', 'TEXT', TRUE, TRUE), ('validate', 'The text to display in the button at the bottom of the form that submits the values. Omit this property to let the browser display the default form validation text, or set it to the empty string to remove the button completely.', 'TEXT', TRUE, TRUE), ('validate_color', 'The color of the button at the bottom of the form that submits the values. Omit this property to use the default color.', 'COLOR', TRUE, TRUE), @@ -730,3 +730,4 @@ On other engines (such as SQLite), you can use the [`dynamic`](?component=dynami "css": "/prism-tabler-theme.css", "footer": "Official [SQLPage](https://sql.ophir.dev) documentation" }]')); + diff --git a/examples/official-site/sqlpage/migrations/13_tab.sql b/examples/official-site/sqlpage/migrations/13_tab.sql index e631500f..3f4c456a 100644 --- a/examples/official-site/sqlpage/migrations/13_tab.sql +++ b/examples/official-site/sqlpage/migrations/13_tab.sql @@ -24,7 +24,7 @@ VALUES ( ( 'tab', 'link', - 'Link to the page to display when the tab is clicked. By default, the link refers to the current page, with a ''tab'' parameter set to the tab''s title.', + 'Link to the page to display when the tab is clicked. By default, the link refers to the current page, with a ''tab'' parameter set to the tab''s title and hash set to the id (if passed) - this brings us back to the location of the tab after submission.', 'TEXT', FALSE, TRUE @@ -106,4 +106,4 @@ View the [dynamic tabs example](examples/tabs.sql). ]' ) ) - ; \ No newline at end of file + ; diff --git a/examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql b/examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql new file mode 100644 index 00000000..a7888b0a --- /dev/null +++ b/examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql @@ -0,0 +1,52 @@ +INSERT INTO parameter(component, top_level, name, description, type, optional) +SELECT *, 'id', 'id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).', 'TEXT', TRUE +FROM (VALUES + ('alert', TRUE), + ('breadcrumb', TRUE), + ('chart', TRUE), + -- ('code', TRUE), + ('csv', TRUE), + ('datagrid', TRUE), + ('hero', TRUE), + ('list', TRUE), + ('list', FALSE), + ('map', TRUE), + ('tab', FALSE), + ('table', TRUE), + ('timeline', TRUE), + ('timeline', FALSE), + -- ('title', TRUE), + ('tracking', TRUE), + ('text', TRUE) +); + +INSERT INTO parameter(component, top_level, name, description, type, optional) +SELECT *, 'id', 'id attribute injected as an anchor in HTML. It can be used for scrolling to this item through links (use "#id" in link url).', 'TEXT', TRUE +FROM (VALUES + ('steps', TRUE) +); + +INSERT INTO parameter(component, top_level, name, description, type, optional) +SELECT *, 'class', 'class attribute added to the container in HTML. It can be used to apply custom styling to this item through css.', 'TEXT', TRUE +FROM (VALUES + ('alert', TRUE), + ('breadcrumb', TRUE), + ('button', TRUE), + ('card', FALSE), + ('chart', TRUE), + -- ('code', TRUE), + ('csv', TRUE), + ('datagrid', TRUE), + ('divider', TRUE), + ('form', TRUE), + ('list', TRUE), + ('list', FALSE), + ('map', TRUE), + ('tab', FALSE), + ('table', TRUE), + ('timeline', TRUE), + ('timeline', FALSE), + -- ('title', TRUE), + ('tracking', TRUE) +); + diff --git a/sqlpage/templates/alert.handlebars b/sqlpage/templates/alert.handlebars index 3c8802e6..1d261e04 100644 --- a/sqlpage/templates/alert.handlebars +++ b/sqlpage/templates/alert.handlebars @@ -1,9 +1,14 @@ -