@rio-cloud/uikit-mcp 1.1.7 → 1.1.8

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

@@ -1,184 +0,0 @@
-# Combined tables in ExpandablePanel
-
-*Category:* Templates
-*Section:* Tables
-*Source:* https://uikit.developers.rio.cloud/#/templates/table-panel
-*Captured:* 2026-02-23T15:49:41.504Z
-
-## 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

@@ -1,317 +0,0 @@
-# Table row animation
-
-*Category:* Templates
-*Section:* Tables
-*Source:* https://uikit.developers.rio.cloud/#/templates/table-row-animation
-*Captured:* 2026-02-23T15:49:41.826Z
-
-## 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>
-```