new component: button

creates a row of buttons to implement easy navigation

Author: lovasoa

CHANGELOG.md

@@ -1,16 +1,17 @@
 # CHANGELOG.md
 
-## 0.14.0 (unreleased)
+## 0.14.0 (2023-10-19)
 
+ - Better support for time series in the [chart](https://sql.ophir.dev/documentation.sql?component=chart#component) component. You can now use the `time` top-attribute to display a time series chart
+ with smart x-axis labels.
+ - **New component**: [button](https://sql.ophir.dev/documentation.sql?component=button#component). This allows you to create rows of buttons that allow navigation between pages.
  - Better error messages for Microsoft SQL Server. SQLPage now displays the line number of the error, which is especially useful for debugging long migration scripts.
  - Many improvements in the official website and the documentation.
     - Most notably, the documentation now has syntax highlighting on code blocks (using [prism](https://prismjs.com/) with a custom theme made for tabler). This also illustrates the usage of external javascript and css libraries in SQLPage. See [the shell component documentation](https://sql.ophir.dev/documentation.sql?component=shell#component).
     - Better display of example queries in the documentation, with smart indentation that makes it easier to read.
- - CLarify some ambiguous error messages:
+ - Clarify some ambiguous error messages:
    - make it clearer whether the error comes from SQLPage or from the database
    - specific tokenization errors are now displayed as such
- - Better support for time series in the [chart](https://sql.ophir.dev/documentation.sql?component=chart#component) component. You can now use the `time` top-attribute to display a time series chart
- with smart x-axis labels.
 
 ## 0.13.0 (2023-10-16)
  - New [timeline](https://sql.ophir.dev/documentation.sql?component=timeline#component) component to display a timeline of events.

examples/official-site/sqlpage/migrations/18_button.sql

@@ -0,0 +1,61 @@
+-- Button Component Documentation
+
+-- Component Definition
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('button', 'hand-click', 'A versatile button component do display one or multiple button links of different styles.', '0.14.0');
+
+-- Inserting parameter information for the button component
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'button', * FROM (VALUES
+    -- Top-level parameters (for the whole button list)
+    ('justify', 'The horizontal alignment of the button list (e.g., start, end, center, between).', 'TEXT', TRUE, TRUE),
+    ('size', 'The size of the buttons (e.g., sm, lg).', 'TEXT', TRUE, TRUE),
+    ('shape', 'Shape of the buttons (e.g., pill, square)', 'TEXT', TRUE, TRUE),
+    -- Item-level parameters (for each button)
+    ('link', 'The URL to which the button should navigate when clicked.', 'URL', FALSE, TRUE),
+    ('color', 'The color of the button (e.g., red, green, blue, but also primary, warning, danger, orange, etc.).', 'TEXT', FALSE, TRUE),
+    ('title', 'The text displayed on the button.', 'TEXT', FALSE, TRUE),
+    ('disabled', 'Whether the button is disabled or not.', 'BOOLEAN', FALSE, TRUE),
+    ('outline', 'Outline color of the button (e.g. red, purple, ...)', 'TEXT', FALSE, TRUE),
+    ('space_after', 'Whether there should be extra space to the right of the button. In a line of buttons, this will put the buttons before this one on the left, and the ones after on the right.', 'BOOLEAN', FALSE, TRUE),
+    ('icon', 'An icon (from tabler-icons) to be displayed on the left side of the button.', 'TEXT', FALSE, TRUE)
+) x;
+
+-- Inserting example information for the button component
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'A basic button with a link', 
+    json('[{"component":"button"}, {"link":"/documentation.sql", "title":"Enabled"}, {"link":"#", "title":"Disabled", "disabled":true}]'))
+;
+
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'A button with a custom shape, size, and outline color',
+    json('[{"component":"button", "size":"sm", "shape":"pill" }, 
+        {"title":"Purple", "outline":"purple" }, 
+        {"title":"Orange", "outline":"orange" }, 
+        {"title":"Red", "outline":"red" }]')
+    );
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'A list of buttons aligned in the center',
+    json('[{"component":"button", "justify":"center"}, 
+        {"link":"#", "color":"light", "title":"Light"}, 
+        {"link":"#", "color":"success", "title":"Success"},
+        {"link":"#", "color":"info", "title":"Info"},
+        {"link":"#", "color":"dark", "title":"Dark"},
+        {"link":"#", "color":"warning", "title":"Warning"}]')
+    );
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'Buttons with icons and different sizes',
+    json('[{"component":"button", "size":"lg" }, 
+        {"link":"#", "outline":"azure", "title":"Edit", "icon":"edit"},
+        {"link":"#", "outline":"danger", "title":"Delete", "icon":"trash"}]')
+    );
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'A row of square buttons with spacing in between',
+    json('[{"component":"button", "shape":"square"}, 
+        {"link":"#", "color":"green", "title":"Save" },
+        {"link":"#", "color":"orange", "title":"Cancel", "space_after":true},
+        {"link":"#", "outline":"indigo", "title":"Preview" }]')
+    );

sqlpage/templates/button.handlebars

@@ -0,0 +1,17 @@
+<div class="btn-list mb-2 {{#if justify}}justify-content-{{justify}}{{/if}}">
+{{#each_row}}
+    <a href="{{link}}"
+        class="btn {{#if disabled}} disabled{{/if}}
+        {{~#if color}} btn-{{color}}{{/if}}
+        {{~#if ../size}} btn-{{../size}}{{/if}}
+        {{~#if outline}} btn-outline-{{outline}}{{/if}}
+        {{~#if ../shape}} btn-{{../shape}}{{/if}}
+        {{~#if space_after}} me-auto{{/if}}"
+        role="button">
+        {{~#if icon~}}
+            <span class="me-1">{{~icon_img icon~}}</span>
+        {{~/if~}}
+        {{~title~}}
+    </a>
+{{/each_row}}
+</div>