@pathscale/ui 1.3.1 → 1.4.0

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

@@ -0,0 +1,566 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Table.css";
+import { createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Table.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<table>"), _tmpl$3 = /*#__PURE__*/ template("<thead>"), _tmpl$4 = /*#__PURE__*/ template("<th>"), _tmpl$5 = /*#__PURE__*/ template("<tbody>"), _tmpl$6 = /*#__PURE__*/ template("<tr>"), _tmpl$7 = /*#__PURE__*/ template("<td>"), _tmpl$8 = /*#__PURE__*/ template("<label><span></span><select>"), _tmpl$9 = /*#__PURE__*/ template("<option>");
+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);
+};
+const __solidLayoutTableRoot = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "variant",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const variant = ()=>local.variant ?? "primary";
+    return createComponent(TableContext.Provider, {
+        value: {
+            variant
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(()=>({
+                    class: twMerge(CLASSES.root.base, CLASSES.root.variant[variant()], local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "table",
+                get ["data-variant"] () {
+                    return variant();
+                }
+            }, rest), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const TableRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableRoot,
+    embedded: true
+});
+const __solidLayoutTableScrollContainer = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$();
+        spread(_el$2, mergeProps(()=>({
+                class: twMerge(CLASSES.scroll, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-scroll-container"
+        }, rest), false, true);
+        insert(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const TableScrollContainer = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableScrollContainer,
+    embedded: true
+});
+const __solidLayoutTableContent = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "sortDescriptor",
+        "onSortChange"
+    ]);
+    return createComponent(TableContentContext.Provider, {
+        get value () {
+            return {
+                sortDescriptor: ()=>local.sortDescriptor,
+                onSortChange: local.onSortChange
+            };
+        },
+        get children () {
+            var _el$3 = _tmpl$2();
+            spread(_el$3, mergeProps(()=>({
+                    class: twMerge(CLASSES.content, local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "table-content",
+                get ["data-sort-column"] () {
+                    return local.sortDescriptor?.column;
+                },
+                get ["data-sort-direction"] () {
+                    return local.sortDescriptor?.direction;
+                }
+            }, rest), false, true);
+            insert(_el$3, ()=>local.children);
+            return _el$3;
+        }
+    });
+};
+const TableContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableContent,
+    embedded: true
+});
+const __solidLayoutTableHeader = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$3();
+        spread(_el$4, mergeProps(()=>({
+                class: twMerge(CLASSES.header, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-header"
+        }, rest), false, true);
+        insert(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const TableHeader = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableHeader,
+    embedded: true
+});
+const __solidLayoutTableColumn = (_stable, p)=>{
+    const contentContext = useTableContentContext();
+    const [local, rest] = splitProps(p, [
+        "id",
+        "allowsSorting",
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "onClick",
+        "onKeyDown",
+        "tabIndex"
+    ]);
+    const isSortable = ()=>Boolean(local.allowsSorting);
+    const sortDirection = ()=>{
+        const descriptor = contentContext.sortDescriptor();
+        if (!descriptor || descriptor.column !== local.id) return;
+        return descriptor.direction;
+    };
+    const emitSortChange = ()=>{
+        if (!isSortable() || !contentContext.onSortChange) return;
+        contentContext.onSortChange({
+            column: local.id,
+            direction: "ascending" === sortDirection() ? "descending" : "ascending"
+        });
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        emitSortChange();
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if (!isSortable()) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        event.preventDefault();
+        emitSortChange();
+    };
+    const renderedChildren = ()=>{
+        if ("function" == typeof local.children) return local.children({
+            sortDirection: sortDirection()
+        });
+        return local.children;
+    };
+    return (()=>{
+        var _el$5 = _tmpl$4();
+        spread(_el$5, mergeProps(()=>({
+                class: twMerge(CLASSES.column, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-column",
+            get ["data-column-id"] () {
+                return local.id;
+            },
+            get ["data-allows-sorting"] () {
+                return isSortable() ? "true" : void 0;
+            },
+            get ["data-sort-direction"] () {
+                return sortDirection();
+            },
+            get ["aria-sort"] () {
+                return memo(()=>!!isSortable())() ? sortDirection() ?? "none" : void 0;
+            },
+            get tabIndex () {
+                return memo(()=>!!isSortable())() ? local.tabIndex ?? 0 : local.tabIndex;
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }, rest), false, true);
+        insert(_el$5, renderedChildren);
+        return _el$5;
+    })();
+};
+const TableColumn = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableColumn,
+    embedded: true
+});
+const __solidLayoutTableBody = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$6 = _tmpl$5();
+        spread(_el$6, mergeProps(()=>({
+                class: twMerge(CLASSES.body, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-body"
+        }, rest), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+};
+const TableBody = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableBody,
+    embedded: true
+});
+const __solidLayoutTableRow = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$6();
+        spread(_el$7, mergeProps(()=>({
+                class: twMerge(CLASSES.row, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-row"
+        }, rest), false, true);
+        insert(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const TableRow = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableRow,
+    embedded: true
+});
+const __solidLayoutTableCell = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$8 = _tmpl$7();
+        spread(_el$8, mergeProps(()=>({
+                class: twMerge(CLASSES.cell, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-cell"
+        }, rest), false, true);
+        insert(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const TableCell = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableCell,
+    embedded: true
+});
+const __solidLayoutTableExpandedRow = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "colSpan",
+        "cellClass",
+        "cellClassName",
+        "cellDataTheme"
+    ]);
+    return createComponent(TableRow, mergeProps(()=>({
+            class: twMerge(CLASSES.expandedRow, local.class, local.className)
+        }), {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        "data-slot": "table-expanded-row"
+    }, rest, {
+        get children () {
+            return createComponent(TableCell, mergeProps({
+                get colSpan () {
+                    return local.colSpan;
+                }
+            }, ()=>({
+                    class: twMerge(CLASSES.expandedCell, local.cellClass, local.cellClassName)
+                }), {
+                get dataTheme () {
+                    return local.cellDataTheme ?? local.dataTheme;
+                },
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    }));
+};
+const TableExpandedRow = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableExpandedRow,
+    embedded: true
+});
+const __solidLayoutTableFooter = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$();
+        spread(_el$9, mergeProps(()=>({
+                class: twMerge(CLASSES.footer, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-footer"
+        }, rest), false, true);
+        insert(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const TableFooter = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableFooter,
+    embedded: true
+});
+const __solidLayoutTablePageSize = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "class",
+        "className",
+        "dataTheme",
+        "value",
+        "options",
+        "onChange",
+        "label",
+        "selectClass",
+        "selectClassName"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$8(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+        spread(_el$0, mergeProps(()=>({
+                class: twMerge(CLASSES.pageSize, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-page-size"
+        }), false, true);
+        spread(_el$1, mergeProps(()=>({
+                class: CLASSES.pageSizeLabel
+            }), {
+            "data-slot": "table-page-size-label"
+        }), false, true);
+        insert(_el$1, ()=>local.label ?? "Rows");
+        spread(_el$10, mergeProps(rest, ()=>({
+                class: twMerge(CLASSES.pageSizeSelect, local.selectClass, local.selectClassName)
+            }), {
+            get value () {
+                return local.value;
+            },
+            onChange: (event)=>local.onChange(Number(event.currentTarget.value))
+        }), false, true);
+        insert(_el$10, ()=>local.options.map((option)=>(()=>{
+                    var _el$11 = _tmpl$9();
+                    _el$11.value = option;
+                    insert(_el$11, option);
+                    return _el$11;
+                })()));
+        return _el$0;
+    })();
+};
+const TablePageSize = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTablePageSize,
+    embedded: true
+});
+const __solidLayoutTableResizableContainer = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$12 = _tmpl$();
+        spread(_el$12, mergeProps(()=>({
+                class: twMerge(CLASSES.resizableContainer, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-resizable-container"
+        }, rest), false, true);
+        insert(_el$12, ()=>local.children);
+        return _el$12;
+    })();
+};
+const TableResizableContainer = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableResizableContainer,
+    embedded: true
+});
+const __solidLayoutTableColumnResizer = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "role",
+        "aria-orientation"
+    ]);
+    return (()=>{
+        var _el$13 = _tmpl$();
+        spread(_el$13, mergeProps({
+            get role () {
+                return local.role ?? "separator";
+            },
+            get ["aria-orientation"] () {
+                return local["aria-orientation"] ?? "vertical";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.columnResizer, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-column-resizer"
+        }, rest), false, true);
+        insert(_el$13, ()=>local.children);
+        return _el$13;
+    })();
+};
+const TableColumnResizer = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableColumnResizer,
+    embedded: true
+});
+const __solidLayoutTableLoadMore = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$14 = _tmpl$6();
+        spread(_el$14, mergeProps(()=>({
+                class: twMerge(CLASSES.loadMore, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-load-more"
+        }, rest), false, true);
+        insert(_el$14, ()=>local.children);
+        return _el$14;
+    })();
+};
+const TableLoadMore = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableLoadMore,
+    embedded: true
+});
+const __solidLayoutTableLoadMoreContent = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$15 = _tmpl$();
+        spread(_el$15, mergeProps(()=>({
+                class: twMerge(CLASSES.loadMoreContent, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-load-more-content"
+        }, rest), false, true);
+        insert(_el$15, ()=>local.children);
+        return _el$15;
+    })();
+};
+const TableLoadMoreContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTableLoadMoreContent,
+    embedded: true
+});
+const Table_generated = Object.assign(TableRoot, {
+    Root: TableRoot,
+    ScrollContainer: TableScrollContainer,
+    Content: TableContent,
+    Header: TableHeader,
+    Column: TableColumn,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell,
+    ExpandedRow: TableExpandedRow,
+    Footer: TableFooter,
+    PageSize: TablePageSize,
+    ResizableContainer: TableResizableContainer,
+    ColumnResizer: TableColumnResizer,
+    LoadMore: TableLoadMore,
+    LoadMoreContent: TableLoadMoreContent
+});
+export default Table_generated;
+export { TableBody, TableCell, TableColumn, TableColumnResizer, TableContent, TableExpandedRow, TableFooter, TableHeader, TableLoadMore, TableLoadMoreContent, TablePageSize, TableResizableContainer, TableRoot, TableRow, TableScrollContainer, useTableContentContext, useTableContext };

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

@@ -0,0 +1,58 @@
+export declare const CLASSES: {
+    readonly root: {
+        readonly base: "table-root";
+        readonly variant: {
+            readonly primary: "table-root--primary";
+            readonly secondary: "table-root--secondary";
+        };
+    };
+    readonly scroll: "table__scroll-container";
+    readonly content: "table__content";
+    readonly header: "table__header";
+    readonly column: "table__column";
+    readonly body: "table__body";
+    readonly row: "table__row";
+    readonly cell: "table__cell";
+    readonly expandedRow: "table__expanded-row";
+    readonly expandedCell: "table__expanded-cell";
+    readonly footer: "table__footer";
+    readonly pageSize: "table__page-size";
+    readonly pageSizeLabel: "table__page-size-label";
+    readonly pageSizeSelect: "table__page-size-select";
+    readonly resizableContainer: "table__resizable-container";
+    readonly columnResizer: "table__column-resizer";
+    readonly loadMore: "table__load-more";
+    readonly loadMoreContent: "table__load-more-content";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "table";
+    readonly slots: {
+        readonly root: {};
+        readonly table: {};
+        readonly "table-body": {};
+        readonly "table-cell": {};
+        readonly "table-column": {};
+        readonly "table-column-resizer": {};
+        readonly "table-content": {};
+        readonly "table-expand-toggle": {};
+        readonly "table-expanded-row": {};
+        readonly "table-footer": {};
+        readonly "table-header": {};
+        readonly "table-inline-confirm": {};
+        readonly "table-inline-confirm-actions": {};
+        readonly "table-inline-confirm-prompt": {};
+        readonly "table-load-more": {};
+        readonly "table-load-more-content": {};
+        readonly "table-mobile-list-view": {};
+        readonly "table-mobile-list-view-empty": {};
+        readonly "table-mobile-list-view-item": {};
+        readonly "table-mobile-list-view-list": {};
+        readonly "table-page-size": {};
+        readonly "table-page-size-label": {};
+        readonly "table-resizable-container": {};
+        readonly "table-row": {};
+        readonly "table-scroll-container": {};
+        readonly "table-sort-icon": {};
+        readonly "table-virtual-spacer-row": {};
+    };
+}>;