@pathscale/ui 2.2.2 → 2.3.0

package/dist/components/data-grid/DataGrid.generated.js

@@ -0,0 +1,408 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./DataGrid.css";
+import { For, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import button_0 from "../button/index.js";
+import checkbox_0 from "../checkbox/index.js";
+import { SortIcon, TableBody, TableCell, TableColumn, TableContent, TableFooter, TableHeader, TableRoot, TableRow, TableScrollContainer } from "../table/index.js";
+import { cellContent, columnSpan, formatCell, rangeLabel, readInputValue, searchPlaceholder } from "./DataGrid.interactions.js";
+import { CLASSES, componentRecipe } from "./DataGrid.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<caption>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<label><span></span><input>");
+const __solidLayoutDataGrid = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "model",
+        "borders",
+        "striping",
+        "sticky",
+        "interactive",
+        "size",
+        "width",
+        "flavor",
+        "caption",
+        "empty",
+        "renderExpanded",
+        "onSortChange",
+        "onPageChange",
+        "onSelectionChange",
+        "class",
+        "dataTheme"
+    ]);
+    const borders = ()=>local.borders ?? "rows";
+    const striping = ()=>local.striping ?? "none";
+    const sticky = ()=>local.sticky ?? "none";
+    const size = ()=>local.size ?? "md";
+    const searchable = ()=>local.model.visibleColumns().filter((column)=>column.searchable);
+    const selects = ()=>"none" !== local.model.selectionMode();
+    const paginates = ()=>local.model.pageSize() > 0;
+    const span = ()=>columnSpan(local.model.visibleColumns().length, selects());
+    const allOnPageSelected = ()=>{
+        const rows = local.model.pageRows();
+        if (0 === rows.length) return false;
+        return rows.every((row, index)=>local.model.isSelected(row, index));
+    };
+    const changeSort = (descriptor)=>{
+        local.model.sortByColumn(descriptor.column);
+        local.onSortChange?.(local.model.sort());
+    };
+    const changePage = (page)=>{
+        local.model.switchPage(page);
+        local.onPageChange?.(local.model.page());
+    };
+    const changeSelection = (row, index)=>{
+        local.model.toggleCheck(row, index);
+        local.onSelectionChange?.(local.model.selectedIds());
+    };
+    const changeSelectAll = (selected)=>{
+        local.model.toggleCheckAll(selected);
+        local.onSelectionChange?.(local.model.selectedIds());
+    };
+    return createComponent(TableRoot, mergeProps(()=>({
+            class: twMerge(CLASSES.root, CLASSES.borders[borders()], CLASSES.striping[striping()], CLASSES.sticky[sticky()], CLASSES.size[size()], local.interactive ? CLASSES.interactive : void 0, local.class)
+        }), {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        "data-slot": "data-grid",
+        get ["data-flavor"] () {
+            return local.flavor;
+        },
+        get ["data-width"] () {
+            return local.width;
+        },
+        get ["data-selection"] () {
+            return local.model.selectionMode();
+        }
+    }, rest, {
+        get children () {
+            return [
+                createComponent(Show, {
+                    get when () {
+                        return searchable().length > 0;
+                    },
+                    get children () {
+                        var _el$ = _tmpl$();
+                        spread(_el$, mergeProps(()=>({
+                                class: CLASSES.toolbar
+                            }), {
+                            "data-slot": "data-grid-toolbar"
+                        }), false, true);
+                        insert(_el$, createComponent(For, {
+                            get each () {
+                                return searchable();
+                            },
+                            children: (column)=>(()=>{
+                                    var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+                                    spread(_el$4, mergeProps(()=>({
+                                            class: CLASSES.search
+                                        }), {
+                                        "data-slot": "data-grid-search"
+                                    }), false, true);
+                                    spread(_el$5, mergeProps(()=>({
+                                            class: CLASSES.searchLabel
+                                        })), false, true);
+                                    insert(_el$5, ()=>searchPlaceholder(column.label));
+                                    spread(_el$6, mergeProps(()=>({
+                                            class: CLASSES.searchInput
+                                        }), {
+                                        type: "search",
+                                        get value () {
+                                            return local.model.queries()[column.name] ?? "";
+                                        },
+                                        get placeholder () {
+                                            return searchPlaceholder(column.label);
+                                        },
+                                        onInput: (event)=>local.model.searchColumn(column.name, readInputValue(event))
+                                    }), false, false);
+                                    return _el$4;
+                                })()
+                        }));
+                        return _el$;
+                    }
+                }),
+                createComponent(TableScrollContainer, {
+                    get children () {
+                        return createComponent(TableContent, {
+                            get sortDescriptor () {
+                                return local.model.sort() ?? void 0;
+                            },
+                            onSortChange: changeSort,
+                            get children () {
+                                return [
+                                    createComponent(Show, {
+                                        get when () {
+                                            return local.caption;
+                                        },
+                                        get children () {
+                                            var _el$2 = _tmpl$2();
+                                            insert(_el$2, ()=>local.caption);
+                                            return _el$2;
+                                        }
+                                    }),
+                                    createComponent(TableHeader, {
+                                        get children () {
+                                            return createComponent(TableRow, {
+                                                get children () {
+                                                    return [
+                                                        createComponent(Show, {
+                                                            get when () {
+                                                                return selects();
+                                                            },
+                                                            get children () {
+                                                                return createComponent(TableColumn, mergeProps({
+                                                                    id: "__select"
+                                                                }, ()=>({
+                                                                        class: CLASSES.selectCell
+                                                                    }), {
+                                                                    get children () {
+                                                                        return createComponent(checkbox_0, {
+                                                                            "aria-label": "Select all rows",
+                                                                            get checked () {
+                                                                                return allOnPageSelected();
+                                                                            },
+                                                                            onChange: ()=>changeSelectAll(!allOnPageSelected())
+                                                                        });
+                                                                    }
+                                                                }));
+                                                            }
+                                                        }),
+                                                        createComponent(For, {
+                                                            get each () {
+                                                                return local.model.visibleColumns();
+                                                            },
+                                                            children: (column)=>createComponent(TableColumn, mergeProps({
+                                                                    get id () {
+                                                                        return column.name;
+                                                                    },
+                                                                    get allowsSorting () {
+                                                                        return column.sortable;
+                                                                    }
+                                                                }, ()=>({
+                                                                        class: CLASSES.headerCell
+                                                                    }), {
+                                                                    get ["data-sticky"] () {
+                                                                        return column.sticky ? "true" : void 0;
+                                                                    },
+                                                                    get style () {
+                                                                        return memo(()=>!!column.width)() ? {
+                                                                            width: column.width
+                                                                        } : void 0;
+                                                                    },
+                                                                    children: (state)=>(()=>{
+                                                                            var _el$7 = _tmpl$3();
+                                                                            spread(_el$7, mergeProps(()=>({
+                                                                                    class: CLASSES.headerButton
+                                                                                })), false, true);
+                                                                            insert(_el$7, ()=>column.label, null);
+                                                                            insert(_el$7, createComponent(Show, {
+                                                                                get when () {
+                                                                                    return column.sortable;
+                                                                                },
+                                                                                get children () {
+                                                                                    return createComponent(SortIcon, {
+                                                                                        get state () {
+                                                                                            return memo(()=>"ascending" === state.sortDirection)() ? "asc" : "descending" === state.sortDirection ? "desc" : "none";
+                                                                                        }
+                                                                                    });
+                                                                                }
+                                                                            }), null);
+                                                                            return _el$7;
+                                                                        })()
+                                                                }))
+                                                        })
+                                                    ];
+                                                }
+                                            });
+                                        }
+                                    }),
+                                    createComponent(TableBody, {
+                                        get children () {
+                                            return [
+                                                createComponent(For, {
+                                                    get each () {
+                                                        return local.model.groupedRows();
+                                                    },
+                                                    children: (group)=>[
+                                                            createComponent(Show, {
+                                                                get when () {
+                                                                    return local.model.groupBy();
+                                                                },
+                                                                get children () {
+                                                                    return createComponent(TableRow, mergeProps(()=>({
+                                                                            class: CLASSES.groupRow
+                                                                        }), {
+                                                                        "data-slot": "data-grid-group-row",
+                                                                        get children () {
+                                                                            return createComponent(TableCell, {
+                                                                                get colSpan () {
+                                                                                    return span();
+                                                                                },
+                                                                                get children () {
+                                                                                    return formatCell(group.value);
+                                                                                }
+                                                                            });
+                                                                        }
+                                                                    }));
+                                                                }
+                                                            }),
+                                                            createComponent(For, {
+                                                                get each () {
+                                                                    return group.rows;
+                                                                },
+                                                                children: (row, index)=>[
+                                                                        createComponent(TableRow, {
+                                                                            get ["data-selected"] () {
+                                                                                return local.model.isSelected(row, index()) ? "true" : void 0;
+                                                                            },
+                                                                            get children () {
+                                                                                return [
+                                                                                    createComponent(Show, {
+                                                                                        get when () {
+                                                                                            return selects();
+                                                                                        },
+                                                                                        get children () {
+                                                                                            return createComponent(TableCell, mergeProps(()=>({
+                                                                                                    class: CLASSES.selectCell
+                                                                                                }), {
+                                                                                                get children () {
+                                                                                                    return createComponent(checkbox_0, {
+                                                                                                        "aria-label": "Select row",
+                                                                                                        get checked () {
+                                                                                                            return local.model.isSelected(row, index());
+                                                                                                        },
+                                                                                                        onChange: ()=>changeSelection(row, index())
+                                                                                                    });
+                                                                                                }
+                                                                                            }));
+                                                                                        }
+                                                                                    }),
+                                                                                    createComponent(For, {
+                                                                                        get each () {
+                                                                                            return local.model.visibleColumns();
+                                                                                        },
+                                                                                        children: (column)=>createComponent(TableCell, mergeProps(()=>({
+                                                                                                    class: CLASSES.cell
+                                                                                                }), {
+                                                                                                get ["data-sticky"] () {
+                                                                                                    return column.sticky ? "true" : void 0;
+                                                                                                },
+                                                                                                get ["data-align"] () {
+                                                                                                    return column.align;
+                                                                                                },
+                                                                                                get children () {
+                                                                                                    return cellContent(column, row, index());
+                                                                                                }
+                                                                                            }))
+                                                                                    })
+                                                                                ];
+                                                                            }
+                                                                        }),
+                                                                        createComponent(Show, {
+                                                                            get when () {
+                                                                                return local.renderExpanded;
+                                                                            },
+                                                                            get children () {
+                                                                                return createComponent(TableRow, {
+                                                                                    get children () {
+                                                                                        return createComponent(TableCell, {
+                                                                                            get colSpan () {
+                                                                                                return span();
+                                                                                            },
+                                                                                            get children () {
+                                                                                                return local.renderExpanded?.(row);
+                                                                                            }
+                                                                                        });
+                                                                                    }
+                                                                                });
+                                                                            }
+                                                                        })
+                                                                    ]
+                                                            })
+                                                        ]
+                                                }),
+                                                createComponent(Show, {
+                                                    get when () {
+                                                        return 0 === local.model.pageRows().length;
+                                                    },
+                                                    get children () {
+                                                        return createComponent(TableRow, {
+                                                            get children () {
+                                                                return createComponent(TableCell, mergeProps({
+                                                                    get colSpan () {
+                                                                        return span();
+                                                                    }
+                                                                }, ()=>({
+                                                                        class: CLASSES.empty
+                                                                    }), {
+                                                                    "data-slot": "data-grid-empty",
+                                                                    get children () {
+                                                                        return local.empty ?? "No rows";
+                                                                    }
+                                                                }));
+                                                            }
+                                                        });
+                                                    }
+                                                })
+                                            ];
+                                        }
+                                    })
+                                ];
+                            }
+                        });
+                    }
+                }),
+                createComponent(Show, {
+                    get when () {
+                        return paginates();
+                    },
+                    get children () {
+                        return createComponent(TableFooter, mergeProps(()=>({
+                                class: CLASSES.pagination
+                            }), {
+                            "data-slot": "data-grid-pagination",
+                            get children () {
+                                return [
+                                    (()=>{
+                                        var _el$3 = _tmpl$3();
+                                        spread(_el$3, mergeProps(()=>({
+                                                class: CLASSES.pageStatus
+                                            })), false, true);
+                                        insert(_el$3, ()=>rangeLabel(local.model.page(), local.model.pageSize(), local.model.total()));
+                                        return _el$3;
+                                    })(),
+                                    createComponent(button_0, {
+                                        variant: "ghost",
+                                        size: "sm",
+                                        "aria-label": "Previous page",
+                                        get state () {
+                                            return 0 === local.model.page() ? "disabled" : "default";
+                                        },
+                                        onClick: ()=>changePage(local.model.page() - 1),
+                                        children: "Previous"
+                                    }),
+                                    createComponent(button_0, {
+                                        variant: "ghost",
+                                        size: "sm",
+                                        "aria-label": "Next page",
+                                        get state () {
+                                            return local.model.page() >= local.model.pageCount() - 1 ? "disabled" : "default";
+                                        },
+                                        onClick: ()=>changePage(local.model.page() + 1),
+                                        children: "Next"
+                                    })
+                                ];
+                            }
+                        }));
+                    }
+                })
+            ];
+        }
+    }));
+};
+const DataGrid = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDataGrid,
+    embedded: true
+});
+const DataGrid_generated = DataGrid;
+export default DataGrid_generated;

package/dist/components/data-grid/DataGrid.interactions.d.ts

@@ -0,0 +1,11 @@
+import type { DataGridColumn, DataGridRow } from "./createDataGrid";
+export declare const formatCell: (value: unknown) => string;
+export declare const columnSpan: (visible: number, hasSelection: boolean) => number;
+/** 1-based, for display. The model counts pages from zero. */
+export declare const pageLabel: (page: number, pageCount: number) => string;
+export declare const rangeLabel: (page: number, pageSize: number, total: number) => string;
+export declare const searchPlaceholder: (label: string) => string;
+export declare const cellContent: <Row extends DataGridRow>(column: DataGridColumn<Row>, row: Row, index: number) => string | number | boolean | Node | import("solid-js").JSX.ArrayElement | null | undefined;
+export declare const readInputValue: (event: {
+    currentTarget: HTMLInputElement;
+}) => string;

package/dist/components/data-grid/DataGrid.interactions.js

@@ -0,0 +1,25 @@
+const formatCell = (value)=>{
+    if (null == value) return "";
+    if (value instanceof Date) return value.toISOString().slice(0, 10);
+    return String(value);
+};
+const columnSpan = (visible, hasSelection)=>visible + (hasSelection ? 1 : 0);
+const pageLabel = (page, pageCount)=>`${page + 1} / ${pageCount}`;
+const rangeLabel = (page, pageSize, total)=>{
+    if (0 === total) return "0";
+    const first = page * pageSize + 1;
+    const last = Math.min(total, (page + 1) * pageSize);
+    return `${first}–${last} of ${total}`;
+};
+const searchPlaceholder = (label)=>`Search ${label}`;
+const cellContent = (column, row, index)=>{
+    if (column.render) return column.render({
+        value: row[column.name],
+        row,
+        column,
+        index
+    });
+    return formatCell(row[column.name]);
+};
+const readInputValue = (event)=>event.currentTarget.value;
+export { cellContent, columnSpan, formatCell, pageLabel, rangeLabel, readInputValue, searchPlaceholder };

package/dist/components/data-grid/DataGrid.recipe.d.ts

@@ -0,0 +1,52 @@
+export declare const CLASSES: {
+    readonly root: "data-grid";
+    readonly toolbar: "data-grid__toolbar";
+    readonly search: "data-grid__search";
+    readonly searchLabel: "data-grid__search-label";
+    readonly searchInput: "data-grid__search-input";
+    readonly headerCell: "data-grid__header-cell";
+    readonly headerButton: "data-grid__header-button";
+    readonly cell: "data-grid__cell";
+    readonly selectCell: "data-grid__select-cell";
+    readonly groupRow: "data-grid__group-row";
+    readonly empty: "data-grid__empty";
+    readonly pagination: "data-grid__pagination";
+    readonly pageStatus: "data-grid__page-status";
+    readonly borders: {
+        readonly none: "data-grid--borders-none";
+        readonly rows: "data-grid--borders-rows";
+        readonly cols: "data-grid--borders-cols";
+        readonly both: "data-grid--borders-both";
+    };
+    readonly striping: {
+        readonly none: "data-grid--striping-none";
+        readonly rows: "data-grid--striping-rows";
+        readonly cols: "data-grid--striping-cols";
+    };
+    readonly sticky: {
+        readonly none: "data-grid--sticky-none";
+        readonly header: "data-grid--sticky-header";
+        readonly columns: "data-grid--sticky-columns";
+        readonly both: "data-grid--sticky-both";
+    };
+    readonly size: {
+        readonly xs: "data-grid--size-xs";
+        readonly sm: "data-grid--size-sm";
+        readonly md: "data-grid--size-md";
+        readonly lg: "data-grid--size-lg";
+        readonly xl: "data-grid--size-xl";
+    };
+    readonly interactive: "data-grid--interactive";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "data-grid";
+    readonly slots: {
+        readonly root: {};
+        readonly "data-grid": {};
+        readonly "data-grid-toolbar": {};
+        readonly "data-grid-search": {};
+        readonly "data-grid-group-row": {};
+        readonly "data-grid-empty": {};
+        readonly "data-grid-pagination": {};
+    };
+}>;

package/dist/components/data-grid/DataGrid.recipe.js

@@ -0,0 +1,96 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    root: "data-grid",
+    toolbar: "data-grid__toolbar",
+    search: "data-grid__search",
+    searchLabel: "data-grid__search-label",
+    searchInput: "data-grid__search-input",
+    headerCell: "data-grid__header-cell",
+    headerButton: "data-grid__header-button",
+    cell: "data-grid__cell",
+    selectCell: "data-grid__select-cell",
+    groupRow: "data-grid__group-row",
+    empty: "data-grid__empty",
+    pagination: "data-grid__pagination",
+    pageStatus: "data-grid__page-status",
+    borders: {
+        none: "data-grid--borders-none",
+        rows: "data-grid--borders-rows",
+        cols: "data-grid--borders-cols",
+        both: "data-grid--borders-both"
+    },
+    striping: {
+        none: "data-grid--striping-none",
+        rows: "data-grid--striping-rows",
+        cols: "data-grid--striping-cols"
+    },
+    sticky: {
+        none: "data-grid--sticky-none",
+        header: "data-grid--sticky-header",
+        columns: "data-grid--sticky-columns",
+        both: "data-grid--sticky-both"
+    },
+    size: {
+        xs: "data-grid--size-xs",
+        sm: "data-grid--size-sm",
+        md: "data-grid--size-md",
+        lg: "data-grid--size-lg",
+        xl: "data-grid--size-xl"
+    },
+    interactive: "data-grid--interactive"
+};
+const componentRecipe = recipe({
+    component: "data-grid",
+    slots: {
+        root: {},
+        "data-grid": {},
+        "data-grid-toolbar": {},
+        "data-grid-search": {},
+        "data-grid-group-row": {},
+        "data-grid-empty": {},
+        "data-grid-pagination": {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            "data-grid": {
+                base: "",
+                axes: {}
+            },
+            "data-grid-toolbar": {
+                base: "",
+                axes: {}
+            },
+            "data-grid-search": {
+                base: "",
+                axes: {}
+            },
+            "data-grid-group-row": {
+                base: "",
+                axes: {}
+            },
+            "data-grid-empty": {
+                base: "",
+                axes: {}
+            },
+            "data-grid-pagination": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 6,
+            "data-grid": 0,
+            "data-grid-toolbar": 5,
+            "data-grid-search": 4,
+            "data-grid-group-row": 2,
+            "data-grid-empty": 1,
+            "data-grid-pagination": 3
+        }
+    }
+});
+export { CLASSES, componentRecipe };