native-document 1.0.139 → 1.0.140

package/src/ui/components/table/data-table/data-table.css

@@ -0,0 +1,246 @@
+:root {
+    --data-table-font-size:          var(--description-size);
+    --data-table-cell-padding-v:     var(--space-cozy);
+    --data-table-cell-padding-h:     var(--space-comfortable);
+    --data-table-border-color:       var(--color-border-tertiary);
+    --data-table-header-color:       var(--color-text-secondary);
+    --data-table-header-bg:          var(--color-background-secondary);
+    --data-table-header-weight:      500;
+    --data-table-hover-bg:           var(--color-background-secondary);
+    --data-table-selected-bg:        var(--color-background-info);
+    --data-table-toolbar-bg:         var(--color-background-secondary);
+    --data-table-bulk-bg:            var(--color-background-info);
+    --data-table-pagination-bg:      var(--color-background-secondary);
+    --data-table-spinner-size:       24px;
+}
+
+.data-table {
+    display: flex;
+    flex-direction: column;
+    border: 0.5px solid var(--data-table-border-color);
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+    font-size: var(--data-table-font-size);
+}
+
+/* Layout */
+.data-table-layout {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Toolbar */
+.data-table-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    background: var(--data-table-toolbar-bg);
+    border-bottom: 0.5px solid var(--data-table-border-color);
+}
+
+.data-table-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    flex: 1;
+}
+
+.data-table-toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+}
+
+.data-table-search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    background: var(--color-background-primary);
+    border: 0.5px solid var(--data-table-border-color);
+    border-radius: var(--border-radius-md);
+    padding: 4px var(--space-cozy);
+    min-width: 240px;
+}
+
+.data-table-search {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(--data-table-font-size);
+    width: 100%;
+    color: var(--color-text-primary);
+}
+
+/* Bulk actions */
+.data-table-bulk {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    background: var(--data-table-bulk-bg);
+    border-bottom: 0.5px solid var(--data-table-border-color);
+}
+
+.data-table-bulk-count {
+    font-size: var(--data-table-font-size);
+    font-weight: var(--data-table-header-weight);
+    color: var(--color-text-info);
+    flex: 1;
+}
+
+.data-table-bulk-buttons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+}
+
+/* Table */
+.data-table-wrapper {
+    position: relative;
+    overflow-x: auto;
+}
+
+.data-table-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th, td {
+        padding: var(--data-table-cell-padding-v) var(--data-table-cell-padding-h);
+        text-align: left;
+        border-bottom: 0.5px solid var(--data-table-border-color);
+
+        &.is-center { text-align: center; }
+        &.is-right  { text-align: right;  }
+        &.is-pinned-left  { position: sticky; left: 0; background: inherit; }
+        &.is-pinned-right { position: sticky; right: 0; background: inherit; }
+    }
+
+    th {
+        font-weight: var(--data-table-header-weight);
+        color:       var(--data-table-header-color);
+        background:  var(--data-table-header-bg);
+        white-space: nowrap;
+    }
+
+    .data-table-th-checkbox,
+    .data-table-td-checkbox { width: 40px; }
+
+    .data-table-th-expand,
+    .data-table-td-expand   { width: 32px; }
+
+    tr.has-click {
+        cursor: pointer;
+        &:hover td { background: var(--data-table-hover-bg); }
+    }
+
+    tr.is-selected td {
+        background: var(--data-table-selected-bg);
+    }
+}
+
+/* Sort */
+.data-table-sort-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.data-table-sort-icon {
+    font-size: 11px;
+    color: var(--color-text-secondary);
+}
+
+/* Expand */
+.data-table-expand-btn {
+    cursor: pointer;
+    font-size: 11px;
+    color: var(--color-text-secondary);
+}
+
+.data-table-detail-row td {
+    background: var(--color-background-secondary);
+    padding: var(--space-comfortable);
+}
+
+/* Empty */
+.data-table-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-large);
+    color: var(--color-text-secondary);
+}
+
+/* Loading */
+.data-table-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--color-background-primary) 80%, transparent);
+}
+
+.data-table-spinner {
+    width: var(--data-table-spinner-size);
+    height: var(--data-table-spinner-size);
+    border: 2px solid var(--data-table-border-color);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: data-table-spin 0.6s linear infinite;
+}
+
+@keyframes data-table-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Pagination */
+.data-table-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--space-cozy) var(--space-comfortable);
+    background: var(--data-table-pagination-bg);
+    border-top: 0.5px solid var(--data-table-border-color);
+}
+
+.data-table-page-info {
+    font-size: var(--data-table-font-size);
+    color: var(--color-text-secondary);
+    flex: 1;
+}
+
+.data-table-pagination-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-comfortable);
+}
+
+.data-table-page-size-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    font-size: var(--data-table-font-size);
+    color: var(--color-text-secondary);
+}
+
+.data-table-page-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.data-table-page-buttons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.data-table-page-ellipsis {
+    padding: 0 4px;
+    color: var(--color-text-secondary);
+    font-size: var(--data-table-font-size);
+}

package/src/ui/components/table/data-table/pagination.js

@@ -0,0 +1,56 @@
+import {Div, Span} from "../../../../../elements";
+import { $ } from "../../../../../index";
+import {SelectField} from "../../../../components/form";
+import {Pagination} from "../../../../components/pagination";
+
+export const buildPagination = ({ pageInfo, pageSize, pageNav }) => {
+    return Div({class: 'data-table-pagination'}, [
+        pageInfo,
+        Div({class: 'data-table-pagination-right'}, [pageSize, pageNav]),
+    ]);
+};
+
+export const buildPageInfo = ($desc, instance) => {
+    const pageInfo = $.computed((total, data, pageSize, page) => {
+        total = total || data?.length || 0;
+        const pages = Math.ceil(total / pageSize);
+        return $desc.labels.results(total || 0, page || 0, pages || 0);
+    }, [$desc.$total, $desc.data, $desc.$pageSize, $desc.$currentPage ]);
+
+    return Span({class: 'data-table-page-info'}, pageInfo);
+};
+
+export const buildPageSize = ($desc, instance) => {
+    if(!$desc.pageSizes?.length) {
+        return null;
+    }
+
+    const select = SelectField({ class: 'data-table-page-size' })
+        .model($desc.$pageSize)
+        .options($desc.pageSizes)
+        .onChange((value) => {
+            const size = Number(value);
+            $desc.$pageSize.set(size);
+            $desc.$currentPage.set(1);
+            instance.emit('page', 1, size);
+        });
+
+    return Div({class: 'data-table-page-size-wrapper'}, [
+        Span({class: 'data-table-page-size-label'}, $desc.labels.rowsPerPage),
+        select,
+    ]);
+};
+
+export const buildPageNav = ($desc, instance) => {
+    return Div({class: 'data-table-page-nav'}, [
+        Pagination()
+            .currentPage($desc.$currentPage)
+            .totalItems($desc.$total)
+            .pageSize($desc.$pageSize)
+            .showFirstLast(true)
+            .showPreviousNext(true)
+            .onPageChange((page) => {
+                instance.emit('page', page, $desc.$pageSize.val());
+            })
+    ]);
+};

package/src/ui/components/table/data-table/tables.js

@@ -0,0 +1,363 @@
+import {
+    Div,
+    ForEachArray,
+    Input,
+    ShowIf,
+    Span, Switch,
+    Table,
+    TBody,
+    TBodyCell,
+    Td,
+    THead,
+    THeadCell,
+    TRow
+} from "../../../../../elements";
+import { $ } from "../../../../../index";
+
+export const buildTable = ($desc, instance, visibleColumns) => {
+    const thead = buildTHead($desc, instance, visibleColumns);
+    const tbody = buildTBody($desc, instance, visibleColumns);
+
+    return Div({class: 'data-table-wrapper'}, [
+        Table({class: 'data-table-table'}, [thead, tbody]),
+        buildLoading($desc),
+    ]);
+};
+
+export const buildTHead = ($desc, instance, visibleColumns) => {
+    const cells = [];
+
+    if($desc.selectable != null) {
+        const checkbox = Input({type: 'checkbox'});
+        checkbox.nd.onChange((e) => {
+            if(e.target.checked) {
+                $desc.$selectedRows.set([...$desc.data.val()]);
+            } else {
+                $desc.$selectedRows.clear();
+            }
+        });
+        cells.push(ShowIf($desc.selectable, () => THeadCell({class: 'data-table-th-checkbox'}, checkbox)));
+    }
+
+    if($desc.expandable != null) {
+        cells.push(THeadCell({class: 'data-table-th-expand'}, ''));
+    }
+
+    const dynamicCells = ForEachArray(visibleColumns, (column) => {
+        const $descCol  = column.$description;
+        const isSortable = $descCol.sortable !== undefined && $descCol.sortable !== null;
+
+        const content = isSortable
+            ? buildSortHeader($desc, instance, column)
+            : $descCol.header;
+
+        const classes = {
+            'is-sortable': isSortable
+        };
+
+        if($descCol.align) {
+            if($descCol.align.__$Observable) {
+                classes['_'] = $descCol.align.transform((v) => `is-align-${v}`)
+            } else {
+                classes[`is-align-${$descCol.align}`] = true
+            }
+        }
+        if($descCol.pinned) {
+            if($descCol.pinned.__$Observable) {
+                classes['__'] = $descCol.pinned.transform((v) => `is-pinned-${v}`)
+            } else {
+                classes[`is-pinned-${$descCol.pinned}`] = true
+            }
+        }
+
+        return THeadCell({ class: classes}, content);
+    });
+    cells.push(dynamicCells);
+
+    return THead({}, TRow({}, cells));
+};
+
+export const buildSortHeader = ($desc, instance, column) => {
+    const key    = column.$description.key;
+    const $sort  = $desc.$sort;
+
+    const itemSortData = { columnKey: key, direction: null };
+
+    // TODO: Refactor this code
+    const $direction = $('');
+
+    const btn = Div({class: 'data-table-sort-header'}, [
+        Span({}, column.$description.header),
+        Span({class: 'data-table-sort-icon'}, $direction.transform(direction => {
+            if(direction === 'asc') {
+                return '↑';
+            }
+            if(direction === 'desc') {
+                return '↓';
+            }
+            return '↕';
+        })),
+    ]);
+
+    $direction.subscribe((direction) => {
+        if(!direction) {
+            $sort.removeItem(itemSortData);
+            return;
+        }
+        if(!$sort.includes(itemSortData)) {
+            $sort.push(itemSortData);
+        }
+
+        instance.emit('sort', $sort.val());
+    });
+
+    btn.nd.onClick(() => {
+        if(!$direction.val()) {
+            $direction.set('asc');
+            return;
+        }
+        if($direction.val() === 'asc') {
+            $direction.set('desc');
+            return;
+        }
+
+        $direction.set(null);
+    });
+
+    return btn;
+};
+
+export const buildTBody = ($desc, instance, visibleColumns) => {
+    const tbody   = TBody([
+        buildEmpty($desc, visibleColumns),
+    ]);
+
+    const createRow = buildRow.bind(null, $desc, instance, visibleColumns);
+
+    if(!$desc.data?.__$isObservableArray) {
+        const data = $desc.data || [];
+        for(let i = 0, length = data.length; i < length; i++) {
+            tbody.append(createRow(data[i]));
+        }
+        return tbody;
+    }
+
+    for(let i = 0, length = $desc.data.length; i < length; i++) {
+        tbody.append(createRow($desc.data.at(i)));
+    }
+
+    const mutations = {
+        toFragment: (args) => {
+            const fragment = document.createDocumentFragment();
+
+            for(let i = 0, length = args.length; i < length; i++) {
+                fragment.append(createRow(args[i]));
+            }
+
+            return fragment;
+        },
+        set: () => {
+            mutations.clear();
+            mutations.push($desc.data.val());
+        },
+        push: (args) => {
+            tbody.append(mutations.toFragment(args));
+        },
+        unshift: (args) => {
+            const first = tbody.firstChild;
+            tbody.insertBefore(mutations.toFragment(args), first);
+        },
+        splice: (args) => {
+            const [start, deleteCount, ...newRows] = args;
+            const rows = [...tbody.children];
+            for(let i = 0; i < deleteCount; i++) {
+                rows[start + i]?.remove();
+            }
+            if(newRows.length === 0) {
+                return;
+            }
+            const ref = tbody.children[start] || null;
+            tbody.insertBefore(mutations.toFragment(newRows), ref);
+        },
+        remove: (args) => {
+            tbody.children[args[0]]?.remove();
+        },
+        swap: (args) => {
+            const [a, b] = args;
+            const rows   = [...tbody.children];
+            const elA    = rows[a];
+            const elB    = rows[b];
+            if(!elA || !elB) {
+                return;
+            }
+            const refB   = elB.nextSibling;
+            tbody.insertBefore(elA, refB);
+            tbody.insertBefore(elB, rows[a]);
+        },
+        clear: () => {
+            tbody.innerHTML = '';
+        },
+        merge: (args) => {
+            return mutations.push(args);
+        },
+    };
+
+    $desc.data.subscribe((_, __, operations) => {
+        const handler = mutations[operations.action];
+        if(handler) {
+            handler(operations.args);
+        }
+    });
+
+    return tbody;
+};
+
+export const buildEmpty = ($desc, visibleColumns) => {
+    if(!$desc.empty) return null;
+
+    let colspan
+    if(visibleColumns.__$Observable) {
+        colspan = visibleColumns.transform((columns) => {
+            return columns.length
+                + ($desc.selectable ? 1 : 0)
+                + ($desc.expandable ? 1 : 0)
+        })
+    } else {
+        colspan = visibleColumns.length
+            + ($desc.selectable ? 1 : 0)
+            + ($desc.expandable ? 1 : 0);
+    }
+
+    const content = (typeof $desc.empty === 'function')
+        ? $desc.empty()
+        : Span({class: 'data-table-empty-text'}, $desc.empty);
+
+    return ShowIf($desc.data?.is(items => items.length === 0), () => {
+        return TRow(Td({ colspan }, [
+            Div({ class: 'data-table-empty' }, content)
+        ]));
+    });
+};
+
+export const buildLoading = ($desc) => {
+
+    return ShowIf($desc.loading, () => {
+        return Div({ class: 'data-table-loading' }, Span({class: 'data-table-spinner'}))
+    });
+};
+
+
+export const buildRow = ($desc, instance, visibleColumns, row) => {
+    const cells = [];
+
+    if($desc.selectable) {
+        const $isSelected = $desc.$selectedRows.is((rows) => rows.includes(row));
+        const checkbox = Input({type: 'checkbox', checked: $isSelected });
+        checkbox
+            .nd
+            .onChange((e) => {
+                if(e.target.checked) {
+                    $desc.$selectedRows.push(row);
+                } else {
+                    $desc.$selectedRows.removeItem(row);
+                }
+                instance.emit('select', $desc.$selectedRows.val());
+            });
+
+        cells.push(
+            ShowIf($desc.selectable,
+                () => TBodyCell({class: 'data-table-td-checkbox'}, checkbox)
+            )
+        );
+    }
+
+    // Expandable
+    let detailRow = null;
+    if($desc.expandable) {
+        const $isExpanded = $(false);
+        const toggleBtn   = Span({class: 'data-table-expand-btn',},
+            Switch($isExpanded, $desc.isExpandedIcon, $desc.isNotExpandedIcon)
+        );
+
+        toggleBtn.nd.onClick(() => {
+            $isExpanded.toggle();
+            if($isExpanded.val() && !detailRow) {
+                detailRow = ShowIf($isExpanded, buildDetailRow($desc, visibleColumns, row));
+                tr.parentNode.insertBefore(detailRow, tr.nextSibling);
+            }
+        });
+
+        cells.push(TBodyCell({class: 'data-table-td-expand'}, toggleBtn));
+    }
+
+    const dynamicCells = ForEachArray(visibleColumns, (column) => {
+        const $descCol = column.$description;
+        const value = row[$descCol.key];
+        const content = $descCol.render
+            ? $descCol.render(value, row)
+            : value ?? '';
+
+        const classes = {};
+        if($descCol.align) {
+            if($descCol.align.__$Observable) {
+                classes['_'] = $descCol.align.transform((v) => `is-align-${v}`);
+            } else {
+                classes[`is-align-${$descCol.align}`] = true;
+            }
+        }
+        if($descCol.pinned) {
+            if($descCol.pinned.__$Observable) {
+                classes['__'] = $descCol.pinned.transform((v) => `is-pinned-${v}`);
+            } else {
+                classes[`is-pinned-${$descCol.pinned}`] = true;
+            }
+        }
+
+        return TBodyCell({ class: classes, }, content)
+    });
+
+    cells.push(dynamicCells);
+
+    const rowExtraProps = $desc.rowProps?.(row) || {};
+
+    const tr = TRow({
+        class: {
+            'has-click':  !!$desc.onRowClick,
+            'is-selected': $desc.$selectedRows.transform(rows => rows.includes(row)),
+        },
+        ...rowExtraProps,
+    }, cells);
+
+    if($desc.onRowClick) {
+        tr.nd.onClick(() => $desc.onRowClick(row));
+    }
+    if($desc.onRowDoubleClick) {
+        tr.nd.onDblClick(() => $desc.onRowDoubleClick(row));
+    }
+    if($desc.onRowHover) {
+        tr.nd.onMouseEnter(() => $desc.onRowHover(row));
+    }
+
+    return tr;
+};
+
+export const buildDetailRow = ($desc, visibleColumns, row) => {
+    let colspan;
+    if(visibleColumns.__$Observable) {
+        colspan = visibleColumns.transform((columns) => {
+            return columns.length
+                + ($desc.selectable ? 1 : 0)
+                + ($desc.expandable ? 1 : 0);
+        })
+    } else {
+        colspan = visibleColumns.length
+            + ($desc.selectable ? 1 : 0)
+            + ($desc.expandable ? 1 : 0);
+    }
+
+    const content = $desc.expandable(row);
+
+    return TRow({class: 'data-table-detail-row'},
+        TBodyCell({colspan, class: 'data-table-detail-cell'}, content)
+    );
+};