@pathscale/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,95 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+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";
+var _tmpl$ = /*#__PURE__*/ template("<button>");
+const __solidLayoutExpandToggle = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "expanded",
+        "onToggle",
+        "size",
+        "label",
+        "disabled",
+        "class",
+        "className",
+        "onClick",
+        "dataTheme"
+    ]);
+    const iconSize = ()=>local.size ?? 16;
+    const ariaLabel = ()=>local.label ?? "Toggle row details";
+    const isDisabled = ()=>Boolean(local.disabled);
+    const handleClick = (event)=>{
+        if ("function" == typeof local.onClick) local.onClick(event);
+        else if (Array.isArray(local.onClick) && "function" == typeof local.onClick[0]) local.onClick[0](local.onClick[1], event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        local.onToggle?.();
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(rest, {
+            get type () {
+                return rest.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge("inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-base-300 bg-base-100 text-base-content transition-colors hover:bg-base-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/60", isDisabled() && "cursor-not-allowed opacity-60 hover:bg-base-100", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-expand-toggle",
+            get ["data-expanded"] () {
+                return local.expanded ? "true" : "false";
+            },
+            get ["aria-expanded"] () {
+                return local.expanded;
+            },
+            get ["aria-label"] () {
+                return ariaLabel();
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onClick: handleClick
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return local.expanded;
+            },
+            get fallback () {
+                return createComponent(icon, {
+                    name: "icon-[lucide--chevron-right]",
+                    get width () {
+                        return iconSize();
+                    },
+                    get height () {
+                        return iconSize();
+                    },
+                    "aria-hidden": "true"
+                });
+            },
+            get children () {
+                return createComponent(icon, {
+                    name: "icon-[lucide--chevron-down]",
+                    get width () {
+                        return iconSize();
+                    },
+                    get height () {
+                        return iconSize();
+                    },
+                    "aria-hidden": "true"
+                });
+            }
+        }));
+        return _el$;
+    })();
+};
+const ExpandToggle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutExpandToggle,
+    embedded: true
+});
+const ExpandToggle_generated = ExpandToggle;
+export default ExpandToggle_generated;

package/dist/components/table/InlineConfirm.generated.d.ts

@@ -0,0 +1,15 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type InlineConfirmVariant = "primary" | "danger" | "warning";
+export type InlineConfirmProps = IComponentBaseProps & {
+    prompt: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    confirmVariant?: InlineConfirmVariant;
+};
+declare const InlineConfirm: __LayoutComponent<InlineConfirmProps>;
+export default InlineConfirm;

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

@@ -0,0 +1,87 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+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";
+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 toButtonVariant = (variant)=>{
+    if ("danger" === variant) return "danger";
+    if ("warning" === variant) return "secondary";
+    return "primary";
+};
+const __solidLayoutInlineConfirm = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "prompt",
+        "confirmLabel",
+        "cancelLabel",
+        "onConfirm",
+        "onCancel",
+        "loading",
+        "disabled",
+        "confirmVariant",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const isBusy = ()=>Boolean(local.loading);
+    const isDisabled = ()=>Boolean(local.disabled) || isBusy();
+    const confirmVariant = ()=>toButtonVariant(local.confirmVariant ?? "primary");
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        spread(_el$, mergeProps(rest, ()=>({
+                class: twMerge("inline-flex flex-wrap items-center gap-2", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-inline-confirm"
+        }), false, true);
+        insert(_el$2, ()=>local.prompt);
+        insert(_el$3, createComponent(button_0, {
+            size: "sm",
+            get variant () {
+                return confirmVariant();
+            },
+            get isPending () {
+                return isBusy();
+            },
+            get isDisabled () {
+                return isDisabled();
+            },
+            get onClick () {
+                return local.onConfirm;
+            },
+            get ["aria-label"] () {
+                return local.confirmLabel;
+            },
+            get children () {
+                return local.confirmLabel;
+            }
+        }), null);
+        insert(_el$3, createComponent(button_0, {
+            size: "sm",
+            variant: "ghost",
+            get isDisabled () {
+                return isDisabled();
+            },
+            get onClick () {
+                return local.onCancel;
+            },
+            get ["aria-label"] () {
+                return local.cancelLabel;
+            },
+            get children () {
+                return local.cancelLabel;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const InlineConfirm = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInlineConfirm,
+    embedded: true
+});
+const InlineConfirm_generated = InlineConfirm;
+export default InlineConfirm_generated;

package/dist/components/table/MobileListView.generated.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MobileListViewProps<TRow> = IComponentBaseProps & {
+    rows: TRow[];
+    renderRow?: (row: TRow, index: number) => JSX.Element;
+    empty?: JSX.Element;
+    listClass?: string;
+    itemClass?: string;
+    children?: (row: TRow, index: number) => JSX.Element;
+    emptyTitle?: string;
+    emptyIcon?: string;
+};
+declare const _default: <TRow>(props: MobileListViewProps<TRow>) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,112 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { For, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { EmptyState } from "../empty-state/index.js";
+import icon from "../icon/index.js";
+import { componentRecipe } 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, [
+        "rows",
+        "renderRow",
+        "empty",
+        "listClass",
+        "itemClass",
+        "children",
+        "emptyTitle",
+        "emptyIcon",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const renderRow = (row, index)=>{
+        if (local.renderRow) return local.renderRow(row, index);
+        if (local.children) return local.children(row, index);
+        return null;
+    };
+    const emptyContent = ()=>{
+        if (local.empty) return local.empty;
+        if (!local.emptyTitle) return null;
+        return createComponent(EmptyState, {
+            get children () {
+                return [
+                    createComponent(EmptyState.Icon, {
+                        get children () {
+                            return createComponent(icon, {
+                                get name () {
+                                    return local.emptyIcon ?? "icon-[mdi--inbox-outline]";
+                                },
+                                width: 24,
+                                height: 24
+                            });
+                        }
+                    }),
+                    createComponent(EmptyState.Title, {
+                        get children () {
+                            return local.emptyTitle;
+                        }
+                    })
+                ];
+            }
+        });
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        spread(_el$, mergeProps(rest, ()=>({
+                class: twMerge("w-full", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-mobile-list-view"
+        }), false, true);
+        spread(_el$2, mergeProps(()=>({
+                class: twMerge("divide-y divide-base-content/10", local.listClass)
+            }), {
+            "data-slot": "table-mobile-list-view-list"
+        }), false, true);
+        insert(_el$2, createComponent(Show, {
+            get when () {
+                return local.rows.length > 0;
+            },
+            get fallback () {
+                return createComponent(Show, {
+                    get when () {
+                        return emptyContent();
+                    },
+                    get children () {
+                        var _el$3 = _tmpl$2();
+                        insert(_el$3, emptyContent);
+                        return _el$3;
+                    }
+                });
+            },
+            get children () {
+                return createComponent(For, {
+                    get each () {
+                        return local.rows;
+                    },
+                    children: (row, index)=>local.renderRow ? (()=>{
+                            var _el$4 = _tmpl$3();
+                            spread(_el$4, mergeProps(()=>({
+                                    class: local.itemClass
+                                }), {
+                                "data-slot": "table-mobile-list-view-item"
+                            }), false, true);
+                            insert(_el$4, ()=>renderRow(row, index()));
+                            return _el$4;
+                        })() : renderRow(row, index())
+                });
+            }
+        }));
+        return _el$;
+    })();
+};
+const MobileListView = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutMobileListView,
+    embedded: true
+});
+const MobileListView_generated = MobileListView;
+export default MobileListView_generated;

package/dist/components/table/SortIcon.generated.d.ts

@@ -0,0 +1,13 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SortIconState = "asc" | "desc" | "none";
+export type SortIconProps = IComponentBaseProps & {
+    state: SortIconState;
+    size?: number;
+    ascIcon?: JSX.Element;
+    descIcon?: JSX.Element;
+    neutralIcon?: JSX.Element;
+};
+declare const SortIcon: __LayoutComponent<SortIconProps>;
+export default SortIcon;

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

@@ -0,0 +1,74 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+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";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
+const __solidLayoutSortIcon = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "state",
+        "size",
+        "ascIcon",
+        "descIcon",
+        "neutralIcon",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const iconSize = ()=>local.size ?? 16;
+    const iconName = ()=>{
+        if ("asc" === local.state) return "icon-[lucide--arrow-up]";
+        if ("desc" === local.state) return "icon-[lucide--arrow-down]";
+        return "icon-[lucide--arrow-up-down]";
+    };
+    const customIcon = ()=>{
+        if ("asc" === local.state) return local.ascIcon;
+        if ("desc" === local.state) return local.descIcon;
+        return local.neutralIcon;
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(rest, ()=>({
+                class: twMerge("inline-flex shrink-0 items-center justify-center", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-sort-icon",
+            get ["data-state"] () {
+                return local.state;
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return customIcon();
+            },
+            get fallback () {
+                return createComponent(icon, {
+                    get name () {
+                        return iconName();
+                    },
+                    get width () {
+                        return iconSize();
+                    },
+                    get height () {
+                        return iconSize();
+                    }
+                });
+            },
+            get children () {
+                return customIcon();
+            }
+        }));
+        return _el$;
+    })();
+};
+const SortIcon = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSortIcon,
+    embedded: true
+});
+const SortIcon_generated = SortIcon;
+export default SortIcon_generated;

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

@@ -0,0 +1,94 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Table.css";
+import { type Accessor, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type TableVariant = "primary" | "secondary";
+type TableSortDirection = "ascending" | "descending";
+type TableSortDescriptor = {
+    column: string;
+    direction: TableSortDirection;
+};
+type TableColumnRenderProps = {
+    sortDirection: TableSortDirection | undefined;
+};
+type TableColumnChildren = JSX.Element | ((props: TableColumnRenderProps) => JSX.Element);
+type TableContextValue = {
+    variant: Accessor<TableVariant>;
+};
+type TableContentContextValue = {
+    sortDescriptor: Accessor<TableSortDescriptor | undefined>;
+    onSortChange?: (descriptor: TableSortDescriptor) => void;
+};
+export declare const useTableContext: () => TableContextValue;
+export declare const useTableContentContext: () => TableContentContextValue;
+export type TableRootProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    variant?: TableVariant;
+};
+declare const TableRoot: __LayoutComponent<TableRootProps>;
+export type TableScrollContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableScrollContainer: __LayoutComponent<TableScrollContainerProps>;
+export type TableContentProps = JSX.HTMLAttributes<HTMLTableElement> & IComponentBaseProps & {
+    sortDescriptor?: TableSortDescriptor;
+    onSortChange?: (descriptor: TableSortDescriptor) => void;
+};
+declare const TableContent: __LayoutComponent<TableContentProps>;
+export type TableHeaderProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
+declare const TableHeader: __LayoutComponent<TableHeaderProps>;
+export type TableColumnProps = Omit<JSX.ThHTMLAttributes<HTMLTableCellElement>, "id" | "children"> & IComponentBaseProps & {
+    id: string;
+    allowsSorting?: boolean;
+    children?: TableColumnChildren;
+};
+declare const TableColumn: __LayoutComponent<TableColumnProps>;
+export type TableBodyProps = JSX.HTMLAttributes<HTMLTableSectionElement> & IComponentBaseProps;
+declare const TableBody: __LayoutComponent<TableBodyProps>;
+export type TableRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
+declare const TableRow: __LayoutComponent<TableRowProps>;
+export type TableCellProps = JSX.TdHTMLAttributes<HTMLTableCellElement> & IComponentBaseProps;
+declare const TableCell: __LayoutComponent<TableCellProps>;
+export type TableExpandedRowProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps & {
+    colSpan: number;
+    cellClass?: string;
+    cellClassName?: string;
+    cellDataTheme?: string;
+};
+declare const TableExpandedRow: __LayoutComponent<TableExpandedRowProps>;
+export type TableFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableFooter: __LayoutComponent<TableFooterProps>;
+export type TablePageSizeProps = Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> & IComponentBaseProps & {
+    value: number;
+    options: readonly number[];
+    onChange: (value: number) => void;
+    label?: JSX.Element;
+    selectClass?: string;
+    selectClassName?: string;
+};
+declare const TablePageSize: __LayoutComponent<TablePageSizeProps>;
+export type TableResizableContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableResizableContainer: __LayoutComponent<TableResizableContainerProps>;
+export type TableColumnResizerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableColumnResizer: __LayoutComponent<TableColumnResizerProps>;
+export type TableLoadMoreProps = JSX.HTMLAttributes<HTMLTableRowElement> & IComponentBaseProps;
+declare const TableLoadMore: __LayoutComponent<TableLoadMoreProps>;
+export type TableLoadMoreContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TableLoadMoreContent: __LayoutComponent<TableLoadMoreContentProps>;
+export type { TableVariant, TableSortDirection, TableSortDescriptor, TableColumnRenderProps, };
+export { TableRoot, TableScrollContainer, TableContent, TableHeader, TableColumn, TableBody, TableRow, TableCell, TableExpandedRow, TableFooter, TablePageSize, TableResizableContainer, TableColumnResizer, TableLoadMore, TableLoadMoreContent, };
+declare const _default: __LayoutComponent<TableRootProps> & {
+    Root: __LayoutComponent<TableRootProps>;
+    ScrollContainer: __LayoutComponent<TableScrollContainerProps>;
+    Content: __LayoutComponent<TableContentProps>;
+    Header: __LayoutComponent<TableHeaderProps>;
+    Column: __LayoutComponent<TableColumnProps>;
+    Body: __LayoutComponent<TableBodyProps>;
+    Row: __LayoutComponent<TableRowProps>;
+    Cell: __LayoutComponent<TableCellProps>;
+    ExpandedRow: __LayoutComponent<TableExpandedRowProps>;
+    Footer: __LayoutComponent<TableFooterProps>;
+    PageSize: __LayoutComponent<TablePageSizeProps>;
+    ResizableContainer: __LayoutComponent<TableResizableContainerProps>;
+    ColumnResizer: __LayoutComponent<TableColumnResizerProps>;
+    LoadMore: __LayoutComponent<TableLoadMoreProps>;
+    LoadMoreContent: __LayoutComponent<TableLoadMoreContentProps>;
+};
+export default _default;