@xplortech/apollo-core 2.7.0 → 2.7.1

package/dist/collection/components/xpl-table/table.stories.js

@@ -1,107 +1,19 @@
 import { v4 as uuid } from "uuid";
-const SLOT_TABLE_WRAPPER_STYLE = 'box-sizing: border-box; display: block; width: 100%; max-width: min(100vw - 2rem, 960px); overflow: auto;';
-const PLACEHOLDER_AVATAR_SRC = 'https://placebear.com/128/128';
 export default {
     title: 'Components/Table',
+    argTypes: {
+        freeze: { control: { type: 'boolean' } },
+        multiselect: { control: { type: 'boolean' } },
+        striped: { control: { type: 'boolean' } },
+        columns: { control: { type: 'object' } },
+        data: { control: { type: 'object' } },
+        footer: { control: { type: 'object' } },
+        isSortable: { control: { type: 'boolean' } },
+        sortableColumns: { control: { type: 'object' } },
+    },
     parameters: {
-        controls: {
-            sort: 'none',
-        },
         actions: {
-            handles: ['tableSelect', 'sortChanged', 'rowSelectionChange', 'rowOrderChange'],
-        },
-        docs: {
-            description: {
-                component: 'Use **Slot based** for compositional `xpl-table` (`xpl-table-header`, `xpl-table-body`, …). Use **Legacy** for the deprecated `columns` / `data` API (native `<table>`). Compositional mode: `selectable`, `row-reorderable`, toolbar slots, and **header sort** (`sortable` on `xpl-table-header-cell` + `sortChanged` on the table — the story script reorders rows for demo only).',
-            },
-        },
-    },
-    argTypes: {
-        type: {
-            name: 'Type',
-            control: { type: 'select' },
-            options: ['Legacy', 'Slot based'],
-            table: { category: '00 — Mode' },
-        },
-        freeze: {
-            control: { type: 'boolean' },
-            table: { category: 'Shared' },
-        },
-        striped: {
-            control: { type: 'boolean' },
-            table: { category: 'Shared' },
-        },
-        multiselect: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        columns: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        data: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        footer: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        isSortable: {
-            control: { type: 'boolean' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        sortableColumns: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            table: { category: '01 — Legacy' },
-        },
-        selectedValues: {
-            control: { type: 'object' },
-            if: { arg: 'type', eq: 'Legacy' },
-            description: '**Legacy only** (`columns` / `data` + `multiselect`). Per-row checkbox values. Not used in slot-based mode.',
-            table: { category: '01 — Legacy' },
-        },
-        tableLabel: {
-            control: 'text',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Sets `label` / `aria-label` on `xpl-table`.',
-            table: { category: '02 — Slot: Table' },
-        },
-        showSelectable: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Adds `selectable` and a checkbox column (you must author header + row checkboxes).',
-            table: { category: '02 — Slot: Table' },
-        },
-        showRowReorderable: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Adds `row-reorderable`; Apollo injects the reorder column (grip).',
-            table: { category: '02 — Slot: Table' },
-        },
-        showToolbar: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Renders `slot="toolbar-actions-left"` on the bulk toolbar. Requires **`showSelectable`**: without `selectable`, those slots are not rendered by `xpl-table` and toolbar nodes would break the grid — the story skips them when selection is off.',
-            table: { category: '02 — Slot: Table' },
-        },
-        sortableNameColumn: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Name column uses `sortable` + `sort-key="name"`. Compositional tables emit `sortChanged` only; the story script reorders rows by the active sort-key in `event.detail` (same slug rules as `xpl-table`).',
-            table: { category: '02 — Slot: Table' },
-        },
-        showRichCells: {
-            control: 'boolean',
-            if: { arg: 'type', eq: 'Slot based' },
-            description: 'Name column shows avatar + caption (like the index.html rich demo).',
-            table: { category: '03 — Slot: Row content' },
+            handles: ['tableSelect', 'sortChanged'],
         },
     },
 };
@@ -129,7 +41,7 @@ const selectedValuesDefault = [
 ];
 const sortableColumnsDefault = [false, false, false, false, false, false];
 const footerDefault = [['Total', '676.5', '159.75', 'All Seasons', '26', '106']];
-const legacyScript = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns, }) => `
+const script = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns }) => `
     (function() {
         const table = document.getElementById("${id}");
         table.columns = ${JSON.stringify(columns)};
@@ -140,206 +52,8 @@ const legacyScript = ({ columns, data, footer, id, selectedValues, isSortable, s
         table.isSortable = ${isSortable};
     })();
 `;
-function slotBasedSortScript(tableId) {
-    const idLiteral = JSON.stringify(tableId);
-    return `
-        <script>
-            (function () {
-                const table = document.getElementById(${idLiteral});
-                if (!table) return;
-
-                function sortKeySlug(h, columnIndex) {
-                    var sk = h.getAttribute('sort-key');
-                    var lab = (h.getAttribute('label') || '').trim();
-                    var raw = (sk || lab || '').trim();
-                    if (raw.length > 0) return raw.replace(/ /g, '-').toLowerCase();
-                    return 'column-' + columnIndex;
-                }
-
-                table.addEventListener('sortChanged', function (e) {
-                    const detail = e.detail;
-                    if (!detail || typeof detail !== 'object') return;
-
-                    var activeKey = null;
-                    var dir = null;
-                    Object.keys(detail).forEach(function (k) {
-                        var v = detail[k];
-                        if (v === 'asc' || v === 'desc') {
-                            activeKey = k;
-                            dir = v;
-                        }
-                    });
-
-                    const body = table.querySelector('xpl-table-body');
-                    const headerRow = table.querySelector('xpl-table-header xpl-table-row');
-                    if (!body || !headerRow) return;
-                    const headers = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
-                    const rows = Array.from(body.querySelectorAll('xpl-table-row'));
-
-                    function defaultOrder(row) {
-                        const rid = row.getAttribute('row-id') || '';
-                        const m = rid.match(/-(\\d+)$/);
-                        return m ? parseInt(m[1], 10) : 0;
-                    }
-
-                    if (!activeKey) {
-                        rows.sort(function (a, b) {
-                            return defaultOrder(a) - defaultOrder(b);
-                        });
-                        rows.forEach(function (r) {
-                            body.appendChild(r);
-                        });
-                        return;
-                    }
-
-                    var sortColIdx = headers.findIndex(function (h, i) {
-                        return sortKeySlug(h, i) === activeKey;
-                    });
-                    if (sortColIdx < 0) return;
-
-                    function rowKey(row) {
-                        const cells = row.querySelectorAll('xpl-table-cell');
-                        const c = cells[sortColIdx];
-                        return (c && c.textContent ? c.textContent : '')
-                            .replace(/\\s+/g, ' ')
-                            .trim()
-                            .toLowerCase();
-                    }
-                    rows.sort(function (a, b) {
-                        const cmp = rowKey(a).localeCompare(rowKey(b));
-                        return dir === 'asc' ? cmp : -cmp;
-                    });
-                    rows.forEach(function (r) {
-                        body.appendChild(r);
-                    });
-                });
-            })();
-        </script>`;
-}
-function slotBasedNameCell(showRichCells, rowIndex, name) {
-    if (!showRichCells) {
-        return `<xpl-table-cell>${name}</xpl-table-cell>`;
-    }
-    return `<xpl-table-cell>
-                <div style="display: flex; align-items: center; gap: var(--xpl-space-12);">
-                    <xpl-avatar name="${name}" src="${PLACEHOLDER_AVATAR_SRC}" size="sm"></xpl-avatar>
-                    <div style="display: flex; flex-direction: column; gap: var(--xpl-space-4); min-width: 0;">
-                        <span style="font-weight: var(--xpl-font-weight-semibold)">${name}</span>
-                        <span class="xpl-text-caption">player${rowIndex}@example.com</span>
-                    </div>
-                </div>
-            </xpl-table-cell>`;
-}
-function renderSlotBasedTable(props) {
-    const tableId = uuid();
-    const label = props.tableLabel != null && String(props.tableLabel).trim() !== ''
-        ? String(props.tableLabel)
-        : 'Team directory';
-    const labelAttr = ` label="${label.replace(/"/g, '&quot;')}"`;
-    const attrs = [
-        ` id="${tableId}"`,
-        labelAttr,
-        props.striped ? ' striped' : '',
-        props.freeze ? ' freeze' : '',
-        props.showSelectable ? ' selectable' : '',
-        props.showRowReorderable ? ' row-reorderable' : '',
-    ].join('');
-    const toolbar = props.showSelectable && props.showToolbar
-        ? `
-                    <div slot="toolbar-actions-left" style="display: inline-flex; align-items: center; gap: var(--xpl-space-8)">
-                        <xpl-button size="sm" variant="secondary" type="button">Bulk action</xpl-button>
-                    </div>`
-        : '';
-    const headerCheckbox = props.showSelectable
-        ? `<xpl-table-header-cell type="checkbox" width="48"></xpl-table-header-cell>`
-        : '';
-    const nameSort = props.sortableNameColumn ? ' sortable sort-key="name"' : '';
-    const names = ['Boston Rob Mariano', 'Parvati Shallow', 'Ozzy Lusth'];
-    const bodyRows = [1, 2, 3]
-        .map((i) => {
-        var _a;
-        const rowCheckbox = props.showSelectable
-            ? `<xpl-table-cell><xpl-checkbox></xpl-checkbox></xpl-table-cell>`
-            : '';
-        const name = (_a = names[i - 1]) !== null && _a !== void 0 ? _a : `Player ${i}`;
-        return `
-                        <xpl-table-row row-id="story-row-${i}">
-                            ${rowCheckbox}
-                            ${slotBasedNameCell(Boolean(props.showRichCells), i, name)}
-                            <xpl-table-cell>${90 + i * 7}</xpl-table-cell>
-                            <xpl-table-cell>S${10 + i}, S${20 + i}</xpl-table-cell>
-                        </xpl-table-row>`;
-    })
-        .join('');
-    return `
-        <div style="${SLOT_TABLE_WRAPPER_STYLE}">
-            <xpl-table${attrs}>
-                ${toolbar}
-                <xpl-table-header>
-                    <xpl-table-row>
-                        ${headerCheckbox}
-                        <xpl-table-header-cell label="Name"${nameSort} width="280"></xpl-table-header-cell>
-                        <xpl-table-header-cell label="Days" align="right" width="96"></xpl-table-header-cell>
-                        <xpl-table-header-cell label="Seasons"></xpl-table-header-cell>
-                    </xpl-table-row>
-                </xpl-table-header>
-                <xpl-table-body>
-                    ${bodyRows}
-                </xpl-table-body>
-            </xpl-table>
-        </div>${slotBasedSortScript(tableId)}`;
-}
-const slotBasedExample = `<div style="${SLOT_TABLE_WRAPPER_STYLE}">
-<xpl-table label="Team directory" selectable striped freeze row-reorderable>
-    <div slot="toolbar-actions-left" style="display: inline-flex; align-items: center; gap: var(--xpl-space-8)">
-        <xpl-button size="sm" variant="secondary" type="button">Bulk action</xpl-button>
-    </div>
-    <xpl-table-header>
-        <xpl-table-row>
-            <xpl-table-header-cell type="checkbox" width="48"></xpl-table-header-cell>
-            <xpl-table-header-cell label="Name" sortable sort-key="name" width="280"></xpl-table-header-cell>
-            <xpl-table-header-cell label="Days" align="right" width="96"></xpl-table-header-cell>
-            <xpl-table-header-cell label="Seasons"></xpl-table-header-cell>
-        </xpl-table-row>
-    </xpl-table-header>
-    <xpl-table-body>
-        <xpl-table-row row-id="example-1">
-            <xpl-table-cell><xpl-checkbox></xpl-checkbox></xpl-table-cell>
-            <xpl-table-cell>
-                <div style="display: flex; align-items: center; gap: var(--xpl-space-12);">
-                    <xpl-avatar name="Boston Rob" src="https://placebear.com/128/128" size="sm"></xpl-avatar>
-                    <div style="display: flex; flex-direction: column; gap: var(--xpl-space-4); min-width: 0;">
-                        <span style="font-weight: var(--xpl-font-weight-semibold)">Boston Rob Mariano</span>
-                        <span class="xpl-text-caption">boston@example.com</span>
-                    </div>
-                </div>
-            </xpl-table-cell>
-            <xpl-table-cell align="right">152</xpl-table-cell>
-            <xpl-table-cell>S4, S8, S20</xpl-table-cell>
-        </xpl-table-row>
-        <xpl-table-row row-id="example-2">
-            <xpl-table-cell><xpl-checkbox></xpl-checkbox></xpl-table-cell>
-            <xpl-table-cell>
-                <div style="display: flex; align-items: center; gap: var(--xpl-space-12);">
-                    <xpl-avatar name="Parvati Shallow" size="sm" color="green"></xpl-avatar>
-                    <div style="display: flex; flex-direction: column; gap: var(--xpl-space-4); min-width: 0;">
-                        <span style="font-weight: var(--xpl-font-weight-semibold)">Parvati Shallow</span>
-                        <span class="xpl-text-caption">parvati@example.com</span>
-                    </div>
-                </div>
-            </xpl-table-cell>
-            <xpl-table-cell align="right">149</xpl-table-cell>
-            <xpl-table-cell>S13, S16, S20</xpl-table-cell>
-        </xpl-table-row>
-    </xpl-table-body>
-</xpl-table>
-</div>`;
-export const Table = (props) => {
-    if (props.type === 'Slot based') {
-        return renderSlotBasedTable(props);
-    }
+export const Table = ({ columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, }) => {
     const id = uuid();
-    const { columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, } = props;
     let attrs = '';
     if (freeze)
         attrs += ' freeze';
@@ -354,43 +68,77 @@ export const Table = (props) => {
             <xpl-table id="${id}"${attrs}></xpl-table>
         </div>
         <script>
-            ${legacyScript({
-        id,
-        columns,
-        data,
-        footer,
-        selectedValues,
-        sortableColumns,
-        isSortable,
-    })}
+            ${script({ id, columns, data, footer, selectedValues, sortableColumns, isSortable })}
         </script>
     `;
 };
 Table.args = {
-    type: 'Slot based',
     freeze: true,
-    striped: true,
     multiselect: false,
+    striped: false,
     columns: columnsDefault,
     data: dataDefault,
     footer: footerDefault,
     selectedValues: selectedValuesDefault,
     isSortable: false,
     sortableColumns: sortableColumnsDefault,
-    tableLabel: 'Team directory',
-    showSelectable: true,
-    showRowReorderable: true,
-    showToolbar: true,
-    sortableNameColumn: true,
-    showRichCells: true,
 };
 Table.parameters = {
-    layout: 'padded',
+    layout: 'centered',
     'web-component': {
-        render: [slotBasedExample],
+        render: (({ freeze, multiselect, striped }) => {
+            let attrs = '';
+            if (freeze)
+                attrs += ' freeze';
+            if (multiselect)
+                attrs += ' multiselect';
+            if (striped)
+                attrs += ' striped';
+            return [
+                `<xpl-table${attrs}></xpl-table>`,
+                `table.columns = [
+                    "Name", "Total Days Played", ...
+                ];`,
+                `table.data = [
+                    ["Boston Rob Mariano", ...],
+                    ["Parvati Shallow", ...],
+                    ...
+                ];`,
+            ];
+        })(Table.args),
     },
     html: {
-        render: slotBasedExample,
+        render: (({ freeze, striped }) => {
+            let className = 'xpl-table';
+            if (striped)
+                className += ' xpl-table--striped';
+            if (freeze)
+                className += ' xpl-table--freeze';
+            return [
+                `WARNING: For \`multiselect\` tables, there is JS interactivity that is provided only by the web component. The code shown below does not reflect the additional \`multiselect\` table markup and interactivity.`,
+                `<div class="xpl-table-container">
+                    <table class="${className}">
+                        <thead>
+                            <th>Name</th>
+                            <th>Total Days Played</th>
+                            ...
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Boston Rob Mariano</td>
+                                <td>152</td>
+                                ...
+                            </tr>
+                            <tr>
+                                <td>Parvati Shallow</td>
+                                <td>149</td>
+                                ...
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>`,
+            ];
+        })(Table.args),
     },
     design: {
         type: 'figma',