@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,19 +1,107 @@
 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'],
+            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' },
         },
     },
 };
@@ -41,7 +129,7 @@ const selectedValuesDefault = [
 ];
 const sortableColumnsDefault = [false, false, false, false, false, false];
 const footerDefault = [['Total', '676.5', '159.75', 'All Seasons', '26', '106']];
-const script = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns }) => `
+const legacyScript = ({ columns, data, footer, id, selectedValues, isSortable, sortableColumns, }) => `
     (function() {
         const table = document.getElementById("${id}");
         table.columns = ${JSON.stringify(columns)};
@@ -52,8 +140,206 @@ const script = ({ columns, data, footer, id, selectedValues, isSortable, sortabl
         table.isSortable = ${isSortable};
     })();
 `;
-export const Table = ({ columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, }) => {
+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);
+    }
     const id = uuid();
+    const { columns, data, footer, freeze, multiselect, selectedValues, striped, isSortable, sortableColumns, } = props;
     let attrs = '';
     if (freeze)
         attrs += ' freeze';
@@ -68,77 +354,43 @@ export const Table = ({ columns, data, footer, freeze, multiselect, selectedValu
             <xpl-table id="${id}"${attrs}></xpl-table>
         </div>
         <script>
-            ${script({ id, columns, data, footer, selectedValues, sortableColumns, isSortable })}
+            ${legacyScript({
+        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: 'centered',
+    layout: 'padded',
     'web-component': {
-        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),
+        render: [slotBasedExample],
     },
     html: {
-        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),
+        render: slotBasedExample,
     },
     design: {
         type: 'figma',

package/dist/collection/components/xpl-table/utils/move-row-dom.js

@@ -0,0 +1,50 @@
+export function getNearestTableBodyRowFromNode(node) {
+    const el = node instanceof HTMLElement ? node : null;
+    if (!el) {
+        return null;
+    }
+    const row = el.closest('xpl-table-row');
+    return row != null ? row : null;
+}
+export function getNextVisibleTableBodyRowAfter(element) {
+    const parent = element.parentElement;
+    if (!parent)
+        return null;
+    const siblings = Array.from(parent.children);
+    const idx = siblings.indexOf(element);
+    if (idx === -1)
+        return null;
+    for (let i = idx + 1; i < siblings.length; i += 1) {
+        const n = siblings[i];
+        if (n.tagName.toLowerCase() === 'xpl-table-row' && !n.hasAttribute('hidden')) {
+            return n;
+        }
+    }
+    return null;
+}
+export function moveRowInTableBody(body, draggedRow, dropTargetRow) {
+    if (draggedRow === dropTargetRow || draggedRow.parentElement !== body) {
+        return;
+    }
+    if (dropTargetRow.parentElement !== body) {
+        return;
+    }
+    const visible = Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row' && !c.hasAttribute('hidden'));
+    const fromIndex = visible.indexOf(draggedRow);
+    const toIndex = visible.indexOf(dropTargetRow);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+        return;
+    }
+    if (fromIndex < toIndex) {
+        const nextVisible = getNextVisibleTableBodyRowAfter(dropTargetRow);
+        if (nextVisible) {
+            body.insertBefore(draggedRow, nextVisible);
+        }
+        else {
+            body.insertBefore(draggedRow, null);
+        }
+    }
+    else {
+        body.insertBefore(draggedRow, dropTargetRow);
+    }
+}

package/dist/collection/components/xpl-table/utils/table-internal.js

@@ -0,0 +1,58 @@
+export const XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT = 'xplTableColumnWidthsChange';
+export const TABLE_HEADER_CELL_MIN_WIDTH_PX = 48;
+export const getGridColumnWidthFromHeaderCell = (cell) => {
+    var _a, _b;
+    if (cell.tagName.toLowerCase() !== 'xpl-table-header-cell') {
+        return 'auto';
+    }
+    const host = cell;
+    const fromProp = typeof host.columnWidth === 'string' ? host.columnWidth.trim() : '';
+    const fromAttr = (_b = (_a = cell.getAttribute('column-width')) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+    const columnTrack = fromProp || fromAttr;
+    if (columnTrack.length > 0) {
+        return columnTrack;
+    }
+    const w = host.width;
+    if (typeof w === 'number' && Number.isFinite(w) && w > 0) {
+        return `${Math.max(TABLE_HEADER_CELL_MIN_WIDTH_PX, w)}px`;
+    }
+    const raw = cell.getAttribute('width');
+    if (raw === null || raw === '') {
+        return 'auto';
+    }
+    if (/^\s*\d+(\.\d+)?\s*$/.test(raw)) {
+        const n = Number.parseFloat(raw);
+        if (Number.isFinite(n) && n > 0) {
+            return `${Math.max(TABLE_HEADER_CELL_MIN_WIDTH_PX, n)}px`;
+        }
+        return 'auto';
+    }
+    return raw.trim();
+};
+export const SELECTION_MARK = 'data-xpl-selection-managed';
+export const ROW_REORDER_MARK = 'data-xpl-row-reorder-managed';
+export const getSortAffordanceIconName = (sortDirection) => {
+    if (sortDirection === 'asc')
+        return 'arrow-up';
+    return 'arrow-down';
+};
+export const cycleSortDirection = (current) => {
+    switch (current) {
+        case 'asc':
+            return 'desc';
+        case 'desc':
+            return null;
+        default:
+            return 'asc';
+    }
+};
+export const getIconType = (sortType) => {
+    switch (sortType) {
+        case 'asc':
+            return 'arrow-up';
+        case 'desc':
+            return 'arrow-down';
+        default:
+            return 'dash';
+    }
+};

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

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class XplTableBody {
+    render() {
+        return (h(Host, { key: '7320d9e105bbd49c3ce38b8c199b965a3863440c', role: "rowgroup", class: "xpl-table-body" }, h("slot", { key: '3df8f5a49bca0c8b50126cb41e59e1209e57fc6b' })));
+    }
+    static get is() { return "xpl-table-body"; }
+}