@alepha/ui 0.18.3 → 0.19.0

package/dist/demo/{core-DFgB3yU4.js → core-DRtQklr3.js}

@@ -1,5 +1,5 @@
-import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
-import { AlephaReactForm, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
+import { $atom, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
+import { AlephaReactForm, FormModel, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
 import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
@@ -18,7 +18,6 @@ import { useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
 import { DateTimeProvider } from "alepha/datetime";
-
 //#region ../../src/core/atoms/alephaSidebarAtom.ts
 const alephaSidebarAtom = $atom({
 	name: "alepha.ui.sidebar",
@@ -35,7 +34,6 @@ const alephaSidebarAtom = $atom({
 		collapsedWidth: 72
 	}
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeAtom.ts
 const alephaThemeAtom = $atom({
@@ -43,7 +41,6 @@ const alephaThemeAtom = $atom({
 	schema: t.object({ index: t.integer() }),
 	default: { index: 0 }
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
 const alephaThemeOverridesAtom = $atom({
@@ -57,14 +54,12 @@ const alephaThemeOverridesAtom = $atom({
 	}),
 	default: {}
 });
-
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
 	name: "Default",
 	description: "Default Alepha Theme"
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/editorial.ts
 /**
@@ -219,7 +214,6 @@ const editorialTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -334,7 +328,6 @@ const midnightTheme = {
 		]
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/monochrome.ts
 /**
@@ -502,7 +495,6 @@ const monochromeTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/rosePine.ts
 /**
@@ -674,7 +666,6 @@ const rosePineTheme = {
 		Badge: Badge.extend({ defaultProps: { fw: 500 } })
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/softBrutalism.ts
 /**
@@ -861,7 +852,6 @@ const softBrutalismTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/terminal.ts
 /**
@@ -1017,7 +1007,6 @@ const terminalTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
@@ -1033,7 +1022,6 @@ const alephaThemeListAtom = $atom({
 		monochromeTheme
 	]
 });
-
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
 var ThemeProvider = class ThemeProvider {
@@ -1131,7 +1119,6 @@ var ThemeProvider = class ThemeProvider {
 		}
 	}
 };
-
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
@@ -1144,7 +1131,6 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { c
 		children: options?.okLabel || "OK"
 	})
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/ConfirmDialog.tsx
 const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
@@ -1162,7 +1148,6 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment,
 		children: options?.confirmLabel || "Confirm"
 	})]
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/PromptDialog.tsx
 const PromptDialog = ({ options, onSubmit }) => {
@@ -1194,6 +1179,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 		}),
 		/* @__PURE__ */ jsxs(Flex, {
 			justify: "flex-end",
+			gap: "xs",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "subtle",
 				onClick: () => onSubmit(null),
@@ -1206,7 +1192,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region ../../src/core/services/DialogService.tsx
 var DialogService = class {
@@ -1268,8 +1253,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
-						this.close(modalId);
 						done(confirmed);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1295,8 +1280,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
-						this.close(modalId);
 						done(value);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1320,7 +1305,6 @@ var DialogService = class {
 		else modals.closeAll();
 	}
 };
-
 //#endregion
 //#region ../../src/core/services/ToastService.tsx
 var ToastService = class {
@@ -1379,7 +1363,6 @@ var ToastService = class {
 		});
 	}
 };
-
 //#endregion
 //#region ../../src/core/UiRouter.ts
 /**
@@ -1394,7 +1377,6 @@ var UiRouter = class {
 		component: AlephaMantineProvider
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useTheme.ts
 /**
@@ -1429,7 +1411,6 @@ const useTheme = () => {
 		}
 	];
 };
-
 //#endregion
 //#region ../../src/core/hooks/useToast.ts
 /**
@@ -1445,7 +1426,6 @@ const useTheme = () => {
 const useToast = () => {
 	return useInject(ToastService);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Omnibar.tsx
 const Omnibar = (props) => {
@@ -1477,7 +1457,6 @@ const Omnibar = (props) => {
 		nothingFound
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/AlephaMantineProvider.tsx
 const AlephaMantineProvider = (props) => {
@@ -1519,7 +1498,6 @@ const AlephaMantineProvider = (props) => {
 		]
 	})] });
 };
-
 //#endregion
 //#region ../../src/core/constants/ui.ts
 const ui = {
@@ -1538,14 +1516,12 @@ const ui = {
 		xl: 32
 	} }
 };
-
 //#endregion
 //#region ../../src/core/helpers/isComponentType.ts
 function isComponentType(param) {
 	if (isValidElement(param)) return false;
 	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
 }
-
 //#endregion
 //#region ../../src/core/components/buttons/ActionButton.tsx
 const ActionButton = (_props) => {
@@ -1826,7 +1802,6 @@ const ActionMenuItem = (props) => {
 		children: item.label
 	}, index);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
@@ -1842,7 +1817,6 @@ const BurgerButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
 /**
@@ -1874,7 +1848,6 @@ const DarkModeButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/LanguageButton.tsx
 const LanguageButton = (props) => {
@@ -1890,7 +1863,6 @@ const LanguageButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/OmnibarButton.tsx
 const OmnibarButton = (props) => {
@@ -1935,7 +1907,6 @@ const OmnibarButton = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useDialog.ts
 /**
@@ -1952,7 +1923,6 @@ const OmnibarButton = (props) => {
 const useDialog = () => {
 	return useInject(DialogService);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeExpertModal.tsx
 const MANTINE_COLORS = [
@@ -2161,7 +2131,6 @@ const ThemeExpertModal = () => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
@@ -2190,7 +2159,6 @@ const ThemeButton = (props) => {
 		...actionProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
 const ToggleSidebarButton = (props) => {
@@ -2212,11 +2180,10 @@ const ToggleSidebarButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex$1 = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, form, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -2240,19 +2207,27 @@ const Flex$1 = forwardRef((props, ref) => {
 	};
 	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
 	if (overflow) rest.className = `${rest.className ?? ""} overflow-auto`.trim();
+	if (form) {
+		let formProps = typeof form === "object" ? form : {};
+		if (formProps instanceof FormModel) formProps = formProps.props;
+		return /* @__PURE__ */ jsx(Flex, {
+			ref,
+			component: "form",
+			...formProps,
+			...rest
+		});
+	}
 	return /* @__PURE__ */ jsx(Flex, {
 		ref,
 		...rest
 	});
 });
 Flex$1.displayName = "Flex";
-
 //#endregion
 //#region ../../src/core/components/Heading.tsx
 const Heading = (props) => {
 	return /* @__PURE__ */ jsx("h1", { children: "Heading" });
 };
-
 //#endregion
 //#region ../../src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
@@ -2367,7 +2342,6 @@ const AppBar = (props) => {
 	});
 	return content;
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Breadcrumb.tsx
 /**
@@ -2377,7 +2351,7 @@ const AppBar = (props) => {
 * Pages should define a `label` in their `$page()` options for best results.
 * Falls back to the page name converted to Title Case.
 */
-const Breadcrumb = (props) => {
+const Breadcrumbs = (props) => {
 	const { home = "Home", separator, size = "sm", ...groupProps } = props;
 	const state = useRouterState();
 	const router = useRouter();
@@ -2422,7 +2396,6 @@ const Breadcrumb = (props) => {
 		}, crumb.href))
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Container.tsx
 const Container$1 = forwardRef((props, ref) => {
@@ -2432,7 +2405,6 @@ const Container$1 = forwardRef((props, ref) => {
 	});
 });
 Container$1.displayName = "Container";
-
 //#endregion
 //#region ../../src/core/helpers/renderIcon.tsx
 const renderIcon = (icon, size) => {
@@ -2441,7 +2413,6 @@ const renderIcon = (icon, size) => {
 	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
 	return icon;
 };
-
 //#endregion
 //#region ../../src/core/components/Text.tsx
 const INTENT_COLORS = {
@@ -2470,7 +2441,6 @@ const Text$1 = forwardRef((props, ref) => {
 	});
 });
 Text$1.displayName = "Text";
-
 //#endregion
 //#region ../../src/core/components/layout/SidebarCollapsedItem.tsx
 const SidebarCollapsedItem = (props) => {
@@ -2520,7 +2490,6 @@ const SidebarCollapsedItem = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/SidebarItem.tsx
 const SidebarItem = (props) => {
@@ -2597,7 +2566,6 @@ const SidebarItem = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
@@ -2721,7 +2689,6 @@ const Sidebar = (props) => {
 	})] });
 	return renderSidebar(false);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/DashboardShell.tsx
 const DashboardShell = (props) => {
@@ -2821,7 +2788,6 @@ const DashboardShell = (props) => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/utils/parseInput.ts
 const parseInput = (props, form) => {
@@ -2862,7 +2828,6 @@ const parseInput = (props, form) => {
 		inputProps
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlArray.tsx
 /**
@@ -3152,7 +3117,6 @@ const ControlArray = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlDate.tsx
 /**
@@ -3205,7 +3169,6 @@ const ControlDate = (props) => {
 	}
 	return null;
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlNumber.tsx
 /**
@@ -3250,7 +3213,6 @@ const ControlNumber = (props) => {
 		}
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlObject.tsx
 /**
@@ -3327,7 +3289,6 @@ const ControlObject = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlQueryBuilderHelp.tsx
 const ControlQueryBuilderHelp = (props) => {
@@ -3495,7 +3456,6 @@ const ControlQueryBuilderHelp = (props) => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlQueryBuilder.tsx
 /**
@@ -3583,7 +3543,6 @@ const ControlQueryBuilder = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlSelect.tsx
 /**
@@ -3802,7 +3761,6 @@ const useAsyncLoader = (loader, threshold, debounceMs, defaultValue) => {
 		])
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/Control.tsx
 /**
@@ -4019,7 +3977,6 @@ const Control = (_props) => {
 		...textInputProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/TypeForm.tsx
 /**
@@ -4151,7 +4108,6 @@ const TypeForm = (props) => {
 		children: content
 	});
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewerCopyButton.tsx
 const JsonViewerCopyButton = (props) => {
@@ -4171,7 +4127,6 @@ const JsonViewerCopyButton = (props) => {
 		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: props.iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: props.iconSize })
 	});
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewerShared.ts
 const SIZE_CONFIG = {
@@ -4222,7 +4177,6 @@ const getValueType = (val) => {
 	if (Array.isArray(val)) return "array";
 	return typeof val;
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewerRowNode.tsx
 const JsonViewerRowNode = (props) => {
@@ -4299,7 +4253,6 @@ const JsonViewerRowNode = (props) => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewer.tsx
 const JsonViewer = (props) => {
@@ -4463,11 +4416,6 @@ const getExpandedIds = (nodes, targetDepth, currentDepth = 0) => {
 	}
 	return ids;
 };
-
-//#endregion
-//#region ../../src/core/table/interfaces/types.ts
-const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
-
 //#endregion
 //#region ../../src/core/table/components/DataTableFilters.tsx
 const DataTableFilters = (props) => {
@@ -4505,7 +4453,6 @@ const DataTableFilters = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTablePagination.tsx
 const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, isLast, offset, numberOfElements, onPageChange, onSizeChange }) => {
@@ -4568,7 +4515,6 @@ const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, i
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/ColumnPicker.tsx
 const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
@@ -4584,7 +4530,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		let count = 0;
 		onVisibilityChange(columnEntries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (count < 8) {
 				acc[key] = true;
 				count++;
 			} else acc[key] = false;
@@ -4669,7 +4615,6 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/FilterPicker.tsx
 const getFieldLabel = (schema, key) => {
@@ -4770,7 +4715,6 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTableToolbar.tsx
 const escapeCsvField = (value) => {
@@ -4897,7 +4841,6 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/useTableSelection.ts
 const useTableSelection = (items, getItemKey, enabled) => {
@@ -4960,7 +4903,6 @@ const useTableSelection = (items, getItemKey, enabled) => {
 		isSelected: useCallback((item) => selectedKeys.has(getItemKey(item)), [selectedKeys, getItemKey])
 	};
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTable.tsx
 /**
@@ -5013,7 +4955,7 @@ const DataTable = (props) => {
 		let visibleCount = 0;
 		return entries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (visibleCount < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (visibleCount < 8) {
 				acc[key] = true;
 				visibleCount++;
 			} else acc[key] = false;
@@ -5366,8 +5308,7 @@ const DataTable = (props) => {
 							style: {
 								position: "sticky",
 								top: 0,
-								zIndex: 1,
-								backgroundColor: "var(--alepha-elevated)"
+								zIndex: 1
 							},
 							children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
 								panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
@@ -5429,7 +5370,6 @@ const DataTable = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
 /**
@@ -5518,7 +5458,6 @@ const OPERATOR_INFO = {
 		example: "status=[active,pending]"
 	}
 };
-
 //#endregion
 //#region ../../src/core/utils/icons.tsx
 /**
@@ -5560,7 +5499,6 @@ const getDefaultIcon = (params) => {
 	}
 	return /* @__PURE__ */ jsx(IconAt, { size: iconSize });
 };
-
 //#endregion
 //#region ../../src/core/utils/string.ts
 /**
@@ -5598,7 +5536,6 @@ const prettyName = (name) => {
 	const segments = name.split("/").filter((s) => s && !/^\d+$/.test(s));
 	return toTitleCase(segments[segments.length - 1] || name.replaceAll("/", ""));
 };
-
 //#endregion
 //#region ../../src/core/index.ts
 /**
@@ -5637,7 +5574,7 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
-
 //#endregion
-export { AlephaMantineProvider as _, TypeForm as a, Sidebar as c, Heading as d, Flex$1 as f, ui as g, ActionButton as h, JsonViewer as i, Text$1 as l, useDialog as m, capitalize as n, Control as o, ToggleSidebarButton as p, DataTable as r, DashboardShell as s, AlephaUI as t, Breadcrumb as u, useToast as v };
-//# sourceMappingURL=core-DFgB3yU4.js.map
+export { AlephaMantineProvider as _, TypeForm as a, Sidebar as c, Heading as d, Flex$1 as f, ui as g, ActionButton as h, JsonViewer as i, Text$1 as l, useDialog as m, capitalize as n, Control as o, ToggleSidebarButton as p, DataTable as r, DashboardShell as s, AlephaUI as t, Breadcrumbs as u, useToast as v };
+
+//# sourceMappingURL=core-DRtQklr3.js.map