chore: import upstream snapshot with attribution

2026-07-13 12:31:57 +08:00
commit d718c5a372
986 changed files with 74597 additions and 0 deletions
@@ -0,0 +1,121 @@
+INSERT INTO component (name, description, icon, introduced_in_version)
+VALUES (
+        'tab',
+        'Build a tabbed interface, with each tab being a link to a page. Each tab can be in two states: active or inactive.',
+        'row-insert-bottom',
+        '0.9.5'
+    );
+INSERT INTO parameter (
+        component,
+        name,
+        description,
+        type,
+        top_level,
+        optional
+    )
+VALUES (
+        'tab',
+        'title',
+        'Text to display on the tab. If link is not set, the link will be the current page with a ''$tab'' parameter set to the tab''s title. If ''id'' is set, the page will be scrolled to the tab.',
+        'TEXT',
+        FALSE,
+        FALSE
+    ),
+    (
+        '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 and hash set to the id (if passed) - this brings us back to the location of the tab after submission.',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'tab',
+        'active',
+        'Whether the tab is active or not. Defaults to false.',
+        'BOOLEAN',
+        FALSE,
+        TRUE
+    ),
+    (
+        'tab',
+        'icon',
+        'Name of the icon to display on the tab. See tabler-icons.io for a list of available icons.',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'tab',
+        'color',
+        'Color of the tab. See preview.tabler.io/colors.html for a list of available colors.',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'tab',
+        'description',
+        'Description of the tab. This is displayed when the user hovers over the tab.',
+        'TEXT',
+        FALSE,
+        TRUE
+    ),
+    (
+        'tab',
+        'center',
+        'Whether the tabs should be centered or not. Defaults to false.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    )
+    ;
+
+INSERT INTO example (component, description, properties)
+VALUES (
+        'tab',
+        'This example shows a very basic set of three tabs. The first tab is active. You could use this at the top of a page for easy navigation.
+
+To implement contents that change based on the active tab, use the `tab` parameter in the page query string.
+For example, if the page is `/my-page.sql`, then the first tab will have a link of `/my-page.sql?tab=My+First+tab`.
+
+You could then for instance display contents coming from the database based on the value of the `tab` parameter.
+For instance: `SELECT ''text'' AS component, contents_md FROM my_page_contents WHERE tab = $tab`.
+Or you could write different queries for different tabs and use the `$tab` parameter with a static value in a where clause to switch between tabs:
+
+```sql
+select ''tab'' as component;
+select ''Projects'' as title, $tab = ''Projects'' as active;
+select ''Tasks''    as title, $tab = ''Tasks''    as active;
+
+select ''table'' as component;
+
+select * from my_projects where $tab = ''Projects'';
+select * from my_tasks    where $tab = ''Tasks'';
+```
+
+Note that the example below is completely static, and does not use the `tab` parameter to actually switch between tabs.
+View the [dynamic tabs example](/examples/tabs/).
+',
+        JSON(
+            '[
+            { "component": "tab" },
+            { "title": "This tab does not exist", "active": true, "link": "?component=tab&tab=tab_1" },
+            { "title": "I am not a true tab", "link": "?component=tab&tab=tab_2" },
+            { "title": "Do not click here", "link": "?component=tab&tab=tab_3" }
+        ]'
+        )
+    ),
+    (
+        'tab',
+        'This example shows a more sophisticated set of tabs. The tabs are centered, the active tab has a different color, and all the tabs have a custom link and icon.',
+        JSON(
+            '[
+            { "component": "tab", "center": true },
+            { "title": "Hero", "link": "?component=hero#component", "icon": "home", "description": "The hero component is a full-width banner with a title and an image." },
+            { "title": "Tab", "link": "?component=tab#component", "icon": "user", "color": "purple" },
+            { "title": "Card", "link": "?component=card#component", "icon": "credit-card" }
+        ]'
+        )
+    )
+    ;