@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/templates/table-panel.md

@@ -0,0 +1,184 @@
+# Combined tables in ExpandablePanel
+
+*Category:* Templates
+*Section:* Tables
+*Source:* https://uikit.developers.rio.cloud/#templates/table-panel
+*Captured:* 2025-12-12T12:39:34.127Z
+
+## Combined tables in ExpandablePanel
+
+### Example: Example 1
+
+Panel header tableLorem ipsum dolor
+Dolor sitAmet
+
+Head columnHead columnHead columnHead columnHead column
+
+Lorem ipsum2 Lorems
+
+Dolor sit amet1 Lorem
+
+#### Summary
+
+Panel header tableLorem ipsum dolor
+Dolor sitAmet
+
+Head columnHead columnHead columnHead columnHead column
+
+Lorem ipsum2 Lorems
+
+Dolor sit amet1 Lorem
+
+#### React (tsx)
+
+```tsx
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+
+const TablePanelExample = () => {
+    return (
+        <ExpanderPanel
+            open
+            title={
+                <table className='table table-layout-fixed width-100pct'>
+                    <thead>
+                        <tr>
+                            <td colSpan={2}>
+                                <b>Panel header table</b>
+                            </td>
+                            <td>
+                                <div>
+                                    <span className='rioglyph rioglyph-volume margin-right-3' />
+                                    <span>Lorem ipsum dolor</span>
+                                </div>
+                            </td>
+                            <td>Dolor sit</td>
+                            <td>Amet</td>
+                        </tr>
+                    </thead>
+                </table>
+            }
+            headerClassName='padding-0 position-relative'
+            iconClassName='position-absolute top-0 right-15 height-100pct display-flex align-items-center'
+            titleClassName='width-100pct margin-0 overflow-hidden'
+            bodyClassName='padding-0'
+            className='shadow-default overflow-hidden'
+        >
+            <table className='table table-head-filled table-layout-fixed'>
+                <thead>
+                    <tr>
+                        {[...Array(5)].map(() => (
+                            <th key={crypto.randomUUID()} className='ellipsis-1'>
+                                Head column
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td colSpan={2}>Lorem ipsum</td>
+                        <td>
+                            <div>
+                                <span className='rioglyph rioglyph-volume margin-right-3' />
+                                <span>2 Lorems</span>
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                    <tr>
+                        <td colSpan={2}>Dolor sit amet</td>
+                        <td>
+                            <div>
+                                <span className='rioglyph rioglyph-volume margin-right-3' />
+                                <span>1 Lorem</span>
+                            </div>
+                        </td>
+                        <td />
+                        <td />
+                    </tr>
+                </tbody>
+            </table>
+        </ExpanderPanel>
+    );
+};
+
+export default TablePanelExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="expander-panel panel panel-blank shadow-default overflow-hidden" aria-label="expander panel">
+    <div class="panel-heading open padding-0 position-relative" aria-label="panel heading">
+        <span class="title width-100pct margin-0 overflow-hidden">
+            <table class="table table-layout-fixed width-100pct">
+                <thead>
+                    <tr>
+                        <td colspan="2">
+                            <b>Panel header table</b>
+                        </td>
+                        <td>
+                            <div>
+                                <span class="rioglyph rioglyph-volume margin-right-3">
+                                </span>
+                                <span>Lorem ipsum dolor</span>
+                            </div>
+                        </td>
+                        <td>Dolor sit</td>
+                        <td>Amet</td>
+                    </tr>
+                </thead>
+            </table>
+        </span>
+        <span class="expander-icon position-absolute top-0 right-15 height-100pct display-flex align-items-center rioglyph rioglyph-chevron-down">
+        </span>
+    </div>
+    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+        <div>
+            <div class="panel-body padding-0">
+                <table class="table table-head-filled table-layout-fixed">
+                    <thead>
+                        <tr>
+                            <th class="ellipsis-1">Head column</th>
+                            <th class="ellipsis-1">Head column</th>
+                            <th class="ellipsis-1">Head column</th>
+                            <th class="ellipsis-1">Head column</th>
+                            <th class="ellipsis-1">Head column</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td colspan="2">Lorem ipsum</td>
+                            <td>
+                                <div>
+                                    <span class="rioglyph rioglyph-volume margin-right-3">
+                                    </span>
+                                    <span>2 Lorems</span>
+                                </div>
+                            </td>
+                            <td>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">Dolor sit amet</td>
+                            <td>
+                                <div>
+                                    <span class="rioglyph rioglyph-volume margin-right-3">
+                                    </span>
+                                    <span>1 Lorem</span>
+                                </div>
+                            </td>
+                            <td>
+                            </td>
+                            <td>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+```

package/dist/docs/templates/table-row-animation.md

@@ -0,0 +1,317 @@
+# Table row animation
+
+*Category:* Templates
+*Section:* Tables
+*Source:* https://uikit.developers.rio.cloud/#templates/table-row-animation
+*Captured:* 2025-12-12T12:39:34.893Z
+
+## Table row animation
+
+### Example: Example 1
+
+Remove rowReset table
+
+IdNameVINStatus
+
+1Lorem7354Active
+2Ipsum456457Inactive
+3Dolor895Active
+4Sit3456Active
+5Amet2445Active
+6Consectetur878Active
+
+70/100
+
+Load more
+
+#### Summary
+
+Remove rowReset table
+
+IdNameVINStatus
+
+1Lorem7354Active
+2Ipsum456457Inactive
+3Dolor895Active
+4Sit3456Active
+5Amet2445Active
+6Consectetur878Active
+
+70/100
+
+Load more
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';
+import LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';
+
+const tableData = [
+    {
+        id: 1,
+        name: 'Lorem',
+        vin: '7354',
+        status: 'Active',
+    },
+    {
+        id: 2,
+        name: 'Ipsum',
+        vin: '456457',
+        status: 'Inactive',
+    },
+    {
+        id: 3,
+        name: 'Dolor',
+        vin: '895',
+        status: 'Active',
+    },
+    {
+        id: 4,
+        name: 'Sit',
+        vin: '3456',
+        status: 'Active',
+    },
+    {
+        id: 5,
+        name: 'Amet',
+        vin: '2445',
+        status: 'Active',
+    },
+    {
+        id: 6,
+        name: 'Consectetur',
+        vin: '878',
+        status: 'Active',
+    },
+];
+
+const ROW_ANIMATION_CLASSNAME =
+    'bg-white opacity-50 pointer-events-none animated-05s repeat-1 ease-in restart slide-out-right';
+
+const ANIMATION_DURATION = 300;
+
+const TableRowAnimationExample = () => {
+    const [data, setData] = useState(tableData);
+    const [rowIdToDelete, setRowIdToDelete] = useState<number | undefined>();
+
+    const handleRemoveRow = (fatalRow: number) => {
+        setRowIdToDelete(fatalRow);
+
+        setTimeout(() => {
+            setData(data.filter(item => item.id !== fatalRow));
+            setRowIdToDelete(undefined);
+        }, ANIMATION_DURATION);
+    };
+
+    const handleReset = () => setData(tableData);
+
+    return (
+        <div>
+            <TableToolbar>
+                <div className='table-toolbar-container'>
+                    <div className='table-toolbar-group-left'>
+                        <div className='table-toolbar-column'>
+                            <div className='btn-toolbar'>
+                                <Button
+                                    bsStyle={Button.PRIMARY}
+                                    disabled={!!rowIdToDelete}
+                                    onClick={() => handleRemoveRow(3)}
+                                >
+                                    Remove row
+                                </Button>
+                                <Button onClick={handleReset}>Reset table</Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </TableToolbar>
+            <div className='overflow-hidden'>
+                <table className='table table-head-filled table-bordered'>
+                    <thead>
+                        <tr>
+                            <th>Id</th>
+                            <th>Name</th>
+                            <th>VIN</th>
+                            <th>Status</th>
+                            <th className='width-50' />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.map(item => {
+                            const rowClassName = rowIdToDelete === item.id ? ROW_ANIMATION_CLASSNAME : '';
+                            return (
+                                <tr key={item.id} className={rowClassName}>
+                                    <td>{item.id}</td>
+                                    <td>{item.name}</td>
+                                    <td>{item.vin}</td>
+                                    <td>{item.status}</td>
+                                    <td className='padding-0 text-center'>
+                                        <span>
+                                            <Button
+                                                iconOnly
+                                                bsStyle={Button.MUTED}
+                                                iconName='rioglyph-trash'
+                                                onClick={() => handleRemoveRow(item.id)}
+                                            />
+                                        </span>
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+            <LoadMoreButton
+                loaded={70}
+                total={100}
+                onLoadMore={() => {}}
+                loadMoreMessage='Load more'
+                noMoreMessage='Everything loaded'
+            />
+        </div>
+    );
+};
+
+export default TableRowAnimationExample;
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="table-toolbar">
+        <div class="table-toolbar-container">
+            <div class="table-toolbar-group-left">
+                <div class="table-toolbar-column">
+                    <div class="btn-toolbar">
+                        <button type="button" class="btn btn-primary btn-component" tabindex="0">Remove row</button>
+                        <button type="button" class="btn btn-default btn-component" tabindex="0">Reset table</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="overflow-hidden">
+        <table class="table table-head-filled table-bordered">
+            <thead>
+                <tr>
+                    <th>Id</th>
+                    <th>Name</th>
+                    <th>VIN</th>
+                    <th>Status</th>
+                    <th class="width-50">
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="">
+                    <td>1</td>
+                    <td>Lorem</td>
+                    <td>7354</td>
+                    <td>Active</td>
+                    <td class="padding-0 text-center">
+                        <span>
+                            <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                <span class="rioglyph rioglyph-trash">
+                                </span>
+                            </button>
+                        </span>
+                    </td>
+                </tr>
+                <tr class="">
+                    <td>2</td>
+                    <td>Ipsum</td>
+                    <td>456457</td>
+                    <td>Inactive</td>
+                    <td class="padding-0 text-center">
+                        <span>
+                            <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                <span class="rioglyph rioglyph-trash">
+                                </span>
+                            </button>
+                        </span>
+                    </td>
+                </tr>
+                <tr class="">
+                    <td>3</td>
+                    <td>Dolor</td>
+                    <td>895</td>
+                    <td>Active</td>
+                    <td class="padding-0 text-center">
+                        <span>
+                            <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                <span class="rioglyph rioglyph-trash">
+                                </span>
+                            </button>
+                        </span>
+                    </td>
+                </tr>
+                <tr class="">
+                    <td>4</td>
+                    <td>Sit</td>
+                    <td>3456</td>
+                    <td>Active</td>
+                    <td class="padding-0 text-center">
+                        <span>
+                            <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                <span class="rioglyph rioglyph-trash">
+                                </span>
+                            </button>
+                        </span>
+                    </td>
+                </tr>
+                <tr class="">
+                    <td>5</td>
+                    <td>Amet</td>
+                    <td>2445</td>
+                    <td>Active</td>
+                    <td class="padding-0 text-center">
+                        <span>
+                            <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                <span class="rioglyph rioglyph-trash">
+                                </span>
+                            </button>
+                        </span>
+                    </td>
+                </tr>
+                <tr class="">
+                    <td>6</td>
+                    <td>Consectetur</td>
+                    <td>878</td>
+                    <td>Active</td>
+                    <td class="padding-0 text-center">
+                        <span>
+                            <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                <span class="rioglyph rioglyph-trash">
+                                </span>
+                            </button>
+                        </span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
+        <div class="min-width-150">
+            <div class="text-center margin-bottom-3">
+                <span class="text-medium">70</span>
+                <span class="margin-left-5 margin-right-5">/</span>
+                <span class="text-medium">100</span>
+            </div>
+            <div class="progress height-2 margin-bottom-10 bg-white">
+                <div class="progress-bar" style="width: 70%;">
+                </div>
+            </div>
+            <div class="display-flex justify-content-center">
+                <button class="btn btn-link padding-right-20 margin-top--5" type="button">
+                    <span class="rioglyph rioglyph-arrow-down">
+                    </span>Load more</button>
+            </div>
+        </div>
+    </div>
+</div>
+```