@pathscale/ui 2.2.1 → 2.3.0

package/dist/components/data-grid/createDataGrid.d.ts

@@ -0,0 +1,121 @@
+import { type Accessor, type JSX } from "solid-js";
+/**
+ * The imperative grid model.
+ *
+ * Ported from vue3-ui's `DataGrid` class, keeping its verbs and their
+ * positional shapes so a call site moves across unchanged:
+ *
+ * ```ts
+ * const grid = createDataGrid();
+ * grid.addColumn("id", "ID", "number");
+ * grid.addRow({ id: 1, firstName: "John" });
+ * ```
+ *
+ * Three things are deliberately different, and all three are the same bug.
+ * In vue3 `searchColumn`, `sortByColumn` and `switchPage` each rewrite the
+ * single `rows` array from `originalRows`, so any two of them compose by
+ * destroying each other: paging after a search silently restores the rows the
+ * search removed. Here `rows` is the source and everything downstream is
+ * derived — `filteredRows` -> `sortedRows` -> `pageRows` — so the three
+ * compose, and a search is no longer lost when the reader turns the page.
+ *
+ * Consequences of that, worth knowing before porting:
+ * - `searchColumn` accumulates. Two columns can filter at once; vue3 could
+ *   only ever hold the last query. `resetFilters()` clears all of them.
+ * - `sortByColumn(name)` toggles and takes a direction rather than vue3's
+ *   `ascendant: boolean`, because a bare `true` meaning "ascending" is the
+ *   kind of parameter 2.2 spent the release removing.
+ * - `switchPage(page)` takes the page. vue3's read a mutable field.
+ * - `deleteRow(index)` indexes the source rows, not what is on screen.
+ */
+export type DataGridDataType = "string" | "number" | "boolean" | "date" | "custom";
+export type DataGridRow = Record<string, unknown>;
+export type DataGridSortDirection = "ascending" | "descending";
+export type DataGridSort = {
+    column: string;
+    direction: DataGridSortDirection;
+};
+export type DataGridSelectionMode = "none" | "single" | "multiple";
+export type DataGridCellContext<Row extends DataGridRow = DataGridRow> = {
+    value: unknown;
+    row: Row;
+    column: DataGridColumn<Row>;
+    index: number;
+};
+export type DataGridColumn<Row extends DataGridRow = DataGridRow> = {
+    /** Key into the row. */
+    name: string;
+    /** Header text. vue3 called this `caption`, which collides with `<caption>`. */
+    label: string;
+    dataType: DataGridDataType;
+    visible: boolean;
+    sortable: boolean;
+    searchable: boolean;
+    sticky: boolean;
+    width?: string;
+    align?: "start" | "center" | "end";
+    /** Required in practice for `dataType: "custom"`; nothing else reads a custom cell. */
+    render?: (context: DataGridCellContext<Row>) => JSX.Element;
+    /** Overrides the dataType's ordering. Receives the raw cell values. */
+    compare?: (a: unknown, b: unknown) => number;
+};
+export type DataGridColumnOptions<Row extends DataGridRow = DataGridRow> = Partial<Omit<DataGridColumn<Row>, "name" | "label" | "dataType">>;
+export type CreateDataGridOptions<Row extends DataGridRow = DataGridRow> = {
+    columns?: readonly DataGridColumn<Row>[];
+    rows?: readonly Row[];
+    /** Stable identity for selection and keyed rendering. Defaults to `row.id`, then the index. */
+    getRowId?: (row: Row, index: number) => string;
+    /** Omit for no pagination. There is no separate `pagination` flag to disagree with it. */
+    pageSize?: number;
+    /** Omit for no checkbox column. Likewise no `checkable` flag. */
+    selection?: DataGridSelectionMode;
+    sort?: DataGridSort | null;
+    groupBy?: string | null;
+    /** Defaults for columns added later. */
+    sortable?: boolean;
+    searchable?: boolean;
+};
+export type DataGridModel<Row extends DataGridRow = DataGridRow> = {
+    addColumn(name: string, label: string, dataType?: DataGridDataType, options?: DataGridColumnOptions<Row>): void;
+    removeColumn(name: string): void;
+    addRow(row: Row, index?: number): void;
+    deleteRow(index: number): void;
+    setRows(rows: readonly Row[]): void;
+    columns: Accessor<DataGridColumn<Row>[]>;
+    visibleColumns: Accessor<DataGridColumn<Row>[]>;
+    columnsByName: Accessor<Record<string, DataGridColumn<Row>>>;
+    toggleColumn(name: string, visible?: boolean): void;
+    rows: Accessor<Row[]>;
+    filteredRows: Accessor<Row[]>;
+    sortedRows: Accessor<Row[]>;
+    pageRows: Accessor<Row[]>;
+    rowId(row: Row, index: number): string;
+    sort: Accessor<DataGridSort | null>;
+    setSort(sort: DataGridSort | null): void;
+    sortByColumn(name: string, direction?: DataGridSortDirection): void;
+    queries: Accessor<Record<string, string>>;
+    searchColumn(name: string, query: string): void;
+    resetFilters(): void;
+    filterRows(name: string, value: unknown): Row[];
+    page: Accessor<number>;
+    pageSize: Accessor<number>;
+    pageCount: Accessor<number>;
+    total: Accessor<number>;
+    switchPage(page: number): void;
+    setPageSize(size: number): void;
+    selectionMode: Accessor<DataGridSelectionMode>;
+    selectedIds: Accessor<ReadonlySet<string>>;
+    selectedRows: Accessor<Row[]>;
+    isSelected(row: Row, index: number): boolean;
+    toggleCheck(row: Row, index: number, selected?: boolean): void;
+    toggleCheckAll(selected: boolean): void;
+    groupBy: Accessor<string | null>;
+    setGroupBy(name: string | null): void;
+    /** Distinct values in a column, in first-seen order. vue3 returned an unordered Set. */
+    groups(name: string): unknown[];
+    groupedRows: Accessor<{
+        value: unknown;
+        rows: Row[];
+    }[]>;
+};
+export declare function createDataGrid<Row extends DataGridRow = DataGridRow>(options?: CreateDataGridOptions<Row>): DataGridModel<Row>;

package/dist/components/data-grid/createDataGrid.js

@@ -0,0 +1,252 @@
+import { createMemo, createSignal, getOwner } from "solid-js";
+import { createStore, produce } from "solid-js/store";
+const derive = (fn)=>getOwner() ? createMemo(fn) : fn;
+const compareValues = (a, b, dataType)=>{
+    if (a === b) return 0;
+    if (null == a) return -1;
+    if (null == b) return 1;
+    if ("number" === dataType) return Number(a) - Number(b);
+    if ("boolean" === dataType) return Number(Boolean(a)) - Number(Boolean(b));
+    if ("date" === dataType) return new Date(a).getTime() - new Date(b).getTime();
+    return String(a).localeCompare(String(b));
+};
+const matches = (value, query)=>{
+    if (null == value) return false;
+    return String(value).toLowerCase().includes(query.toLowerCase());
+};
+function createDataGrid(options = {}) {
+    const columnDefaults = {
+        sortable: options.sortable ?? true,
+        searchable: options.searchable ?? false
+    };
+    const [columnStore, setColumnStore] = createStore({
+        items: [
+            ...options.columns ?? []
+        ]
+    });
+    const [rowStore, setRowStore] = createStore({
+        items: [
+            ...options.rows ?? []
+        ]
+    });
+    const [sort, writeSort] = createSignal(options.sort ?? null);
+    const [queries, setQueries] = createSignal({});
+    const [page, setPage] = createSignal(0);
+    const [pageSize, setPageSize] = createSignal(options.pageSize ?? 0);
+    const [selectedIds, setSelectedIds] = createSignal(new Set());
+    const [groupBy, setGroupBy] = createSignal(options.groupBy ?? null);
+    const selectionMode = ()=>options.selection ?? "none";
+    const identify = (row, index)=>{
+        if (options.getRowId) return options.getRowId(row, index);
+        const own = row.id;
+        return null == own ? String(index) : String(own);
+    };
+    const idByRow = derive(()=>{
+        const map = new Map();
+        rowStore.items.forEach((row, index)=>map.set(row, identify(row, index)));
+        return map;
+    });
+    const rowId = (row, index)=>idByRow().get(row) ?? identify(row, index);
+    const columns = derive(()=>columnStore.items);
+    const visibleColumns = derive(()=>columnStore.items.filter((column)=>column.visible));
+    const columnsByName = derive(()=>Object.fromEntries(columnStore.items.map((column)=>[
+                column.name,
+                column
+            ])));
+    const rows = derive(()=>rowStore.items);
+    const filteredRows = derive(()=>{
+        const active = Object.entries(queries()).filter(([, query])=>query.length > 0);
+        if (0 === active.length) return rowStore.items;
+        return rowStore.items.filter((row)=>active.every(([name, query])=>matches(row[name], query)));
+    });
+    const sortedRows = derive(()=>{
+        const descriptor = sort();
+        if (!descriptor) return filteredRows();
+        const column = columnStore.items.find((item)=>item.name === descriptor.column);
+        if (!column) return filteredRows();
+        const sign = "ascending" === descriptor.direction ? 1 : -1;
+        const compare = column.compare ?? ((a, b)=>compareValues(a, b, column.dataType));
+        return [
+            ...filteredRows()
+        ].sort((a, b)=>sign * compare(a[column.name], b[column.name]));
+    });
+    const total = derive(()=>filteredRows().length);
+    const pageCount = derive(()=>{
+        const size = pageSize();
+        if (size <= 0) return 1;
+        return Math.max(1, Math.ceil(total() / size));
+    });
+    const pageRows = derive(()=>{
+        const size = pageSize();
+        if (size <= 0) return sortedRows();
+        const start = page() * size;
+        return sortedRows().slice(start, start + size);
+    });
+    const selectedRows = derive(()=>{
+        const ids = selectedIds();
+        return rowStore.items.filter((row, index)=>ids.has(rowId(row, index)));
+    });
+    const groupedRows = derive(()=>{
+        const name = groupBy();
+        if (!name) return [
+            {
+                value: void 0,
+                rows: pageRows()
+            }
+        ];
+        const buckets = new Map();
+        for (const row of pageRows()){
+            const value = row[name];
+            const bucket = buckets.get(value);
+            if (bucket) bucket.push(row);
+            else buckets.set(value, [
+                row
+            ]);
+        }
+        return [
+            ...buckets
+        ].map(([value, groupRows])=>({
+                value,
+                rows: groupRows
+            }));
+    });
+    return {
+        addColumn (name, label, dataType = "string", columnOptions = {}) {
+            setColumnStore("items", produce((items)=>{
+                items.push({
+                    name,
+                    label,
+                    dataType,
+                    visible: true,
+                    sticky: false,
+                    ...columnDefaults,
+                    ...columnOptions
+                });
+            }));
+        },
+        removeColumn (name) {
+            setColumnStore("items", (items)=>items.filter((column)=>column.name !== name));
+        },
+        addRow (row, index) {
+            setRowStore("items", produce((items)=>{
+                if (void 0 === index) items.push(row);
+                else items.splice(index, 0, row);
+            }));
+        },
+        deleteRow (index) {
+            setRowStore("items", produce((items)=>{
+                items.splice(index, 1);
+            }));
+        },
+        setRows (next) {
+            setRowStore("items", [
+                ...next
+            ]);
+        },
+        columns,
+        visibleColumns,
+        columnsByName,
+        toggleColumn (name, visible) {
+            setColumnStore("items", (items)=>items.map((column)=>column.name === name ? {
+                        ...column,
+                        visible: visible ?? !column.visible
+                    } : column));
+        },
+        rows,
+        filteredRows,
+        sortedRows,
+        pageRows,
+        rowId,
+        sort,
+        setSort (next) {
+            writeSort(next);
+            setPage(0);
+        },
+        sortByColumn (name, direction) {
+            const current = sort();
+            const apply = (next)=>{
+                writeSort(next);
+                setPage(0);
+            };
+            if (direction) return void apply({
+                column: name,
+                direction
+            });
+            if (!current || current.column !== name) return void apply({
+                column: name,
+                direction: "ascending"
+            });
+            apply("ascending" === current.direction ? {
+                column: name,
+                direction: "descending"
+            } : null);
+        },
+        queries,
+        searchColumn (name, query) {
+            setQueries((previous)=>({
+                    ...previous,
+                    [name]: query
+                }));
+            setPage(0);
+        },
+        resetFilters () {
+            setQueries({});
+            setPage(0);
+        },
+        filterRows (name, value) {
+            return rowStore.items.filter((row)=>row[name] === value);
+        },
+        page,
+        pageSize,
+        pageCount,
+        total,
+        switchPage (next) {
+            setPage(Math.min(Math.max(next, 0), pageCount() - 1));
+        },
+        setPageSize (size) {
+            setPageSize(size);
+            setPage(0);
+        },
+        selectionMode,
+        selectedIds,
+        selectedRows,
+        isSelected (row, index) {
+            return selectedIds().has(rowId(row, index));
+        },
+        toggleCheck (row, index, selected) {
+            const id = rowId(row, index);
+            setSelectedIds((previous)=>{
+                const shouldSelect = selected ?? !previous.has(id);
+                if ("single" === selectionMode()) return shouldSelect ? new Set([
+                    id
+                ]) : new Set();
+                const next = new Set(previous);
+                if (shouldSelect) next.add(id);
+                else next.delete(id);
+                return next;
+            });
+        },
+        toggleCheckAll (selected) {
+            if (!selected) return void setSelectedIds(new Set());
+            setSelectedIds(new Set(pageRows().map((row, index)=>rowId(row, index))));
+        },
+        groupBy,
+        setGroupBy,
+        groups (name) {
+            const seen = [];
+            const known = new Set();
+            for (const row of rowStore.items){
+                const value = row[name];
+                if (null != value) {
+                    if (!known.has(value)) {
+                        known.add(value);
+                        seen.push(value);
+                    }
+                }
+            }
+            return seen;
+        },
+        groupedRows
+    };
+}
+export { createDataGrid };

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,4 @@
+export type { CreateDataGridOptions, DataGridCellContext, DataGridColumn, DataGridColumnOptions, DataGridDataType, DataGridModel, DataGridRow, DataGridSelectionMode, DataGridSort, DataGridSortDirection, } from "./createDataGrid";
+export { createDataGrid } from "./createDataGrid";
+export type { DataGridBorders, DataGridProps, DataGridSticky, DataGridStriping, } from "./DataGrid.generated";
+export { default } from "./DataGrid.generated";

package/dist/components/data-grid/index.js

@@ -0,0 +1,2 @@
+export { createDataGrid } from "./createDataGrid.js";
+export { default } from "./DataGrid.generated.js";

package/dist/components/dialog/Dialog.generated.js

@@ -385,7 +385,7 @@ const __solidLayoutDialogContent = (_stable, p)=>{
                                 get role () {
                                     return local.role ?? "dialog";
                                 },
-                                "aria-dialog": "true",
+                                "aria-modal": "true",
                                 get ["aria-labelledby"] () {
                                     return local["aria-labelledby"] ?? context.labelledBy();
                                 },

package/dist/components/table/ExpandToggle.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import { Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import icon from "../icon/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableExpandToggleRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<button>");
 const __solidLayoutExpandToggle = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -86,7 +86,7 @@ const __solidLayoutExpandToggle = (_stable, p)=>{
     })();
 };
 const ExpandToggle = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableExpandToggleRecipe,
     layout: __solidLayoutExpandToggle,
     embedded: true
 });

package/dist/components/table/InlineConfirm.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import { splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import button_0 from "../button/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableInlineConfirmRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template('<div><span class="text-sm text-base-content/70"data-slot=table-inline-confirm-prompt></span><div class="inline-flex items-center gap-2"data-slot=table-inline-confirm-actions>');
 const toButtonFlavor = (variant)=>{
     if ("danger" === variant) return "destructive";
@@ -74,7 +74,7 @@ const __solidLayoutInlineConfirm = (_stable, p)=>{
     })();
 };
 const InlineConfirm = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableInlineConfirmRecipe,
     layout: __solidLayoutInlineConfirm,
     embedded: true
 });

package/dist/components/table/MobileListView.generated.js

@@ -4,7 +4,7 @@ import { For, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { Empty } from "../empty/index.js";
 import icon from "../icon/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableMobileListViewRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><ul>"), _tmpl$2 = /*#__PURE__*/ template("<li class=py-8 data-slot=table-mobile-list-view-empty>"), _tmpl$3 = /*#__PURE__*/ template("<li>");
 const __solidLayoutMobileListView = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -103,7 +103,7 @@ const __solidLayoutMobileListView = (_stable, p)=>{
     })();
 };
 const MobileListView = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableMobileListViewRecipe,
     layout: __solidLayoutMobileListView,
     embedded: true
 });

package/dist/components/table/SortIcon.generated.js

@@ -3,7 +3,7 @@ import { defineComponent } from "solid-layouts/application-boundary";
 import { Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import icon from "../icon/index.js";
-import { componentRecipe } from "./Table.recipe.js";
+import { tableSortIconRecipe } from "./Table.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutSortIcon = (_stable, p)=>{
     const [local, rest] = splitProps(p, [
@@ -65,7 +65,7 @@ const __solidLayoutSortIcon = (_stable, p)=>{
     })();
 };
 const SortIcon = defineComponent({
-    recipe: componentRecipe,
+    recipe: tableSortIconRecipe,
     layout: __solidLayoutSortIcon,
     embedded: true
 });

package/dist/components/table/Table.context.d.ts

@@ -0,0 +1,23 @@
+import { type Accessor, type JSX } from "solid-js";
+export type TableVariant = "primary" | "secondary";
+export type TableSortDirection = "ascending" | "descending";
+export type TableSortDescriptor = {
+    column: string;
+    direction: TableSortDirection;
+};
+export type TableColumnRenderProps = {
+    sortDirection: TableSortDirection | undefined;
+};
+export type TableColumnChildren = JSX.Element | ((props: TableColumnRenderProps) => JSX.Element);
+export type TableContextValue = {
+    variant: Accessor<TableVariant>;
+};
+export declare const TableContext: import("solid-js").Context<TableContextValue | undefined>;
+export type TableContentContextValue = {
+    sortDescriptor: Accessor<TableSortDescriptor | undefined>;
+    onSortChange?: (descriptor: TableSortDescriptor) => void;
+};
+export declare const TableContentContext: import("solid-js").Context<TableContentContextValue | undefined>;
+export declare const useTableContext: () => TableContextValue;
+export declare const useTableContentContext: () => TableContentContextValue;
+export declare const invokeEventHandler: (handler: unknown, event: Event) => void;

package/dist/components/table/Table.context.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "solid-js";
+const TableContext = createContext();
+const TableContentContext = createContext();
+const useTableContext = ()=>{
+    const context = useContext(TableContext);
+    if (context) return context;
+    return {
+        variant: ()=>"primary"
+    };
+};
+const useTableContentContext = ()=>{
+    const context = useContext(TableContentContext);
+    if (context) return context;
+    return {
+        sortDescriptor: ()=>void 0
+    };
+};
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+export { TableContentContext, TableContext, invokeEventHandler, useTableContentContext, useTableContext };

package/dist/components/table/Table.d.ts

@@ -0,0 +1,18 @@
+declare const _default: import("solid-js").Component<import("./TableRoot.generated").TableRootProps> & {
+    Root: import("solid-js").Component<import("./TableRoot.generated").TableRootProps>;
+    ScrollContainer: import("solid-js").Component<import("./TableScrollContainer.generated").TableScrollContainerProps>;
+    Content: import("solid-js").Component<import("./TableContent.generated").TableContentProps>;
+    Header: import("solid-js").Component<import("./TableHeader.generated").TableHeaderProps>;
+    Column: import("solid-js").Component<import("./TableColumn.generated").TableColumnProps>;
+    Body: import("solid-js").Component<import("./TableBody.generated").TableBodyProps>;
+    Row: import("solid-js").Component<import("./TableRow.generated").TableRowProps>;
+    Cell: import("solid-js").Component<import("./TableCell.generated").TableCellProps>;
+    ExpandedRow: import("solid-js").Component<import("./TableExpandedRow.generated").TableExpandedRowProps>;
+    Footer: import("solid-js").Component<import("./TableFooter.generated").TableFooterProps>;
+    PageSize: import("solid-js").Component<import("./TablePageSize.generated").TablePageSizeProps>;
+    ResizableContainer: import("solid-js").Component<import("./TableResizableContainer.generated").TableResizableContainerProps>;
+    ColumnResizer: import("solid-js").Component<import("./TableColumnResizer.generated").TableColumnResizerProps>;
+    LoadMore: import("solid-js").Component<import("./TableLoadMore.generated").TableLoadMoreProps>;
+    LoadMoreContent: import("solid-js").Component<import("./TableLoadMoreContent.generated").TableLoadMoreContentProps>;
+};
+export default _default;

package/dist/components/table/Table.js

@@ -0,0 +1,33 @@
+import TableBody_generated from "./TableBody.generated.js";
+import TableCell_generated from "./TableCell.generated.js";
+import TableColumn_generated from "./TableColumn.generated.js";
+import TableColumnResizer_generated from "./TableColumnResizer.generated.js";
+import TableContent_generated from "./TableContent.generated.js";
+import TableExpandedRow_generated from "./TableExpandedRow.generated.js";
+import TableFooter_generated from "./TableFooter.generated.js";
+import TableHeader_generated from "./TableHeader.generated.js";
+import TableLoadMore_generated from "./TableLoadMore.generated.js";
+import TableLoadMoreContent_generated from "./TableLoadMoreContent.generated.js";
+import TablePageSize_generated from "./TablePageSize.generated.js";
+import TableResizableContainer_generated from "./TableResizableContainer.generated.js";
+import TableRoot_generated from "./TableRoot.generated.js";
+import TableRow_generated from "./TableRow.generated.js";
+import TableScrollContainer_generated from "./TableScrollContainer.generated.js";
+const Table = Object.assign(TableRoot_generated, {
+    Root: TableRoot_generated,
+    ScrollContainer: TableScrollContainer_generated,
+    Content: TableContent_generated,
+    Header: TableHeader_generated,
+    Column: TableColumn_generated,
+    Body: TableBody_generated,
+    Row: TableRow_generated,
+    Cell: TableCell_generated,
+    ExpandedRow: TableExpandedRow_generated,
+    Footer: TableFooter_generated,
+    PageSize: TablePageSize_generated,
+    ResizableContainer: TableResizableContainer_generated,
+    ColumnResizer: TableColumnResizer_generated,
+    LoadMore: TableLoadMore_generated,
+    LoadMoreContent: TableLoadMoreContent_generated
+});
+export default Table;