@alepha/ui 0.14.1 → 0.14.3

package/dist/core/index.js

@@ -3,7 +3,8 @@ import { $head, AlephaReactHead } from "@alepha/react/head";
 import { AlephaReactI18n, useI18n } from "@alepha/react/i18n";
 import { $atom, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
 import { $cookie } from "alepha/server/cookies";
-import { $page, NestedView, useAction, useActive, useEvents, useInject, useRouter, useStore } from "@alepha/react";
+import { $page, NestedView, useActive, useRouter } from "@alepha/react/router";
+import { useAction, useEvents, useInject, useStore } from "@alepha/react";
 import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Box, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, CopyButton, Divider, Fieldset, FileInput, Flex, Flex as Flex$1, Grid, Group, Input, Kbd, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, Slider, Stack, Switch, Table, TagsInput, Text, Text as Text$1, TextInput, Textarea, ThemeIcon, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
 import { Notifications, notifications } from "@mantine/notifications";
@@ -369,7 +370,7 @@ const AlephaMantineProvider = (props) => {
 			nprogress.complete();
 		},
 		"react:action:error": ({ error }) => {
-			if (error instanceof FormValidationError) return;
+			if (error instanceof FormValidationError || error instanceof TypeBoxError) return;
 			toast.danger({
 				title: error.name || "Error",
 				message: error.message ?? "An error occurred while processing your action."
@@ -410,7 +411,7 @@ var RootRouter = class {
 
 //#endregion
 //#region ../../src/core/components/data/ErrorViewer.tsx
-const getSizeConfig$1 = (size = "sm") => {
+const getSizeConfig = (size = "sm") => {
 	const configs = {
 		xs: {
 			text: "xs",
@@ -445,7 +446,7 @@ const parseStackTrace = (stack) => {
 };
 const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" }) => {
 	const [stackExpanded, setStackExpanded] = useState(false);
-	const sizeConfig = getSizeConfig$1(size);
+	const sizeConfig = getSizeConfig(size);
 	const copyIconSize = sizeConfig.icon + 2;
 	const isError = error instanceof Error;
 	const errorName = isError ? error.name : "Error";
@@ -548,297 +549,6 @@ const ErrorViewer = ({ error, showStack = true, copyable = true, size = "sm" })
 };
 var ErrorViewer_default = ErrorViewer;
 
-//#endregion
-//#region ../../src/core/components/data/JsonViewer.tsx
-const getSizeConfig = (size = "sm") => {
-	const configs = {
-		xs: {
-			text: "xs",
-			icon: 12,
-			indent: 16,
-			gap: 4,
-			iconWidth: 18
-		},
-		sm: {
-			text: "sm",
-			icon: 14,
-			indent: 20,
-			gap: 6,
-			iconWidth: 20
-		},
-		md: {
-			text: "md",
-			icon: 16,
-			indent: 24,
-			gap: 8,
-			iconWidth: 22
-		},
-		lg: {
-			text: "lg",
-			icon: 18,
-			indent: 28,
-			gap: 10,
-			iconWidth: 24
-		},
-		xl: {
-			text: "xl",
-			icon: 20,
-			indent: 32,
-			gap: 12,
-			iconWidth: 26
-		}
-	};
-	return configs[size] || configs.sm;
-};
-const JsonNode = ({ name, value, depth, maxDepth, isLast = false, isArrayItem = false, size = "sm", iconWidth }) => {
-	const [expanded, setExpanded] = useState(depth < 2);
-	const sizeConfig = getSizeConfig(size);
-	const getValueType = (val) => {
-		if (val === null) return "null";
-		if (val === void 0) return "undefined";
-		if (Array.isArray(val)) return "array";
-		return typeof val;
-	};
-	const valueType = getValueType(value);
-	const renderPrimitive = (val) => {
-		const type = getValueType(val);
-		const textProps = {
-			component: "span",
-			ff: "monospace",
-			size: sizeConfig.text
-		};
-		switch (type) {
-			case "string": return /* @__PURE__ */ jsxs(Text$1, {
-				...textProps,
-				c: "teal",
-				children: [
-					"\"",
-					val,
-					"\""
-				]
-			});
-			case "number": return /* @__PURE__ */ jsx(Text$1, {
-				...textProps,
-				c: "blue",
-				children: val
-			});
-			case "boolean": return /* @__PURE__ */ jsx(Text$1, {
-				...textProps,
-				c: "violet",
-				children: String(val)
-			});
-			case "null": return /* @__PURE__ */ jsx(Text$1, {
-				...textProps,
-				c: "dimmed",
-				children: "null"
-			});
-			case "undefined": return /* @__PURE__ */ jsx(Text$1, {
-				...textProps,
-				c: "dimmed",
-				children: "undefined"
-			});
-			default: return /* @__PURE__ */ jsx(Text$1, {
-				...textProps,
-				children: String(val)
-			});
-		}
-	};
-	const renderKey = () => {
-		if (name === void 0) return null;
-		return /* @__PURE__ */ jsx(Text$1, {
-			component: "span",
-			c: "cyan",
-			ff: "monospace",
-			fw: 500,
-			size: sizeConfig.text,
-			children: isArrayItem ? `[${name}]` : `"${name}"`
-		});
-	};
-	const comma = !isLast && /* @__PURE__ */ jsx(Text$1, {
-		component: "span",
-		c: "dimmed",
-		ff: "monospace",
-		size: sizeConfig.text,
-		children: ","
-	});
-	if (valueType === "object" || valueType === "array") {
-		const isObject = valueType === "object";
-		const entries = isObject ? Object.entries(value) : value.map((v, i) => [i, v]);
-		const isEmpty = entries.length === 0;
-		const canExpand = depth < maxDepth && !isEmpty;
-		const preview = isObject ? "{...}" : "[...]";
-		const brackets = isObject ? ["{", "}"] : ["[", "]"];
-		return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Box, {
-			style: {
-				display: "grid",
-				gridTemplateColumns: `${iconWidth}px auto`,
-				alignItems: "center"
-			},
-			children: [/* @__PURE__ */ jsx(Box, {
-				style: {
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center"
-				},
-				children: canExpand && /* @__PURE__ */ jsx(ActionIcon, {
-					size: "xs",
-					variant: "transparent",
-					c: "dimmed",
-					onClick: () => setExpanded(!expanded),
-					style: { cursor: "pointer" },
-					children: expanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: sizeConfig.icon }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sizeConfig.icon })
-				})
-			}), /* @__PURE__ */ jsxs(Box, {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: sizeConfig.gap
-				},
-				children: [
-					renderKey(),
-					name !== void 0 && /* @__PURE__ */ jsx(Text$1, {
-						component: "span",
-						c: "dimmed",
-						ff: "monospace",
-						size: sizeConfig.text,
-						children: ":"
-					}),
-					/* @__PURE__ */ jsx(Text$1, {
-						component: "span",
-						c: "dimmed",
-						ff: "monospace",
-						size: sizeConfig.text,
-						children: brackets[0]
-					}),
-					!expanded && !isEmpty && /* @__PURE__ */ jsx(Text$1, {
-						component: "span",
-						c: "dimmed",
-						ff: "monospace",
-						fs: "italic",
-						size: sizeConfig.text,
-						children: preview
-					}),
-					(isEmpty || !expanded) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text$1, {
-						component: "span",
-						c: "dimmed",
-						ff: "monospace",
-						size: sizeConfig.text,
-						children: brackets[1]
-					}), comma] }),
-					!isEmpty && !expanded && /* @__PURE__ */ jsxs(Text$1, {
-						component: "span",
-						c: "dimmed",
-						size: sizeConfig.text,
-						children: [
-							entries.length,
-							" ",
-							entries.length === 1 ? "item" : "items"
-						]
-					})
-				]
-			})]
-		}), /* @__PURE__ */ jsxs(Collapse, {
-			in: expanded && canExpand,
-			children: [/* @__PURE__ */ jsx(Box, {
-				pl: sizeConfig.indent,
-				ml: iconWidth / 2,
-				style: { borderLeft: "1px solid var(--mantine-color-default-border)" },
-				children: entries.map(([key, val], index) => /* @__PURE__ */ jsx(JsonNode, {
-					name: String(key),
-					value: val,
-					depth: depth + 1,
-					maxDepth,
-					isLast: index === entries.length - 1,
-					isArrayItem: !isObject,
-					size,
-					iconWidth
-				}, String(key)))
-			}), /* @__PURE__ */ jsxs(Box, {
-				style: {
-					display: "grid",
-					gridTemplateColumns: `${iconWidth}px auto`
-				},
-				children: [/* @__PURE__ */ jsx(Box, {}), /* @__PURE__ */ jsxs(Box, {
-					style: {
-						display: "flex",
-						gap: sizeConfig.gap
-					},
-					children: [/* @__PURE__ */ jsx(Text$1, {
-						c: "dimmed",
-						ff: "monospace",
-						size: sizeConfig.text,
-						children: brackets[1]
-					}), comma]
-				})]
-			})]
-		})] });
-	}
-	return /* @__PURE__ */ jsxs(Box, {
-		style: {
-			display: "grid",
-			gridTemplateColumns: `${iconWidth}px auto`,
-			alignItems: "center"
-		},
-		children: [/* @__PURE__ */ jsx(Box, {}), /* @__PURE__ */ jsxs(Box, {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: sizeConfig.gap
-			},
-			children: [
-				renderKey(),
-				name !== void 0 && /* @__PURE__ */ jsx(Text$1, {
-					component: "span",
-					c: "dimmed",
-					ff: "monospace",
-					size: sizeConfig.text,
-					children: ":"
-				}),
-				renderPrimitive(value),
-				comma
-			]
-		})]
-	});
-};
-const JsonViewer = ({ data, defaultExpanded = true, maxDepth = 10, copyable = true, size = "sm" }) => {
-	const sizeConfig = getSizeConfig(size);
-	const copyIconSize = sizeConfig.icon + 2;
-	return /* @__PURE__ */ jsxs(Box, {
-		pos: "relative",
-		w: "100%",
-		children: [copyable && /* @__PURE__ */ jsx(Box, {
-			pos: "absolute",
-			top: 0,
-			right: 0,
-			style: { zIndex: 1 },
-			children: /* @__PURE__ */ jsx(CopyButton, {
-				value: JSON.stringify(data, null, 2),
-				children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, {
-					label: copied ? "Copied" : "Copy JSON",
-					children: /* @__PURE__ */ jsx(ActionIcon, {
-						color: copied ? "teal" : "gray",
-						variant: "subtle",
-						onClick: copy,
-						size,
-						children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: copyIconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: copyIconSize })
-					})
-				})
-			})
-		}), /* @__PURE__ */ jsx(Box, {
-			pt: copyable ? 30 : 0,
-			style: { overflowX: "auto" },
-			children: /* @__PURE__ */ jsx(JsonNode, {
-				value: data,
-				depth: 0,
-				maxDepth,
-				size,
-				iconWidth: sizeConfig.iconWidth
-			})
-		})]
-	});
-};
-var JsonViewer_default = JsonViewer;
-
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text$1, {
@@ -1009,27 +719,6 @@ var DialogService = class {
 		else modals.closeAll();
 	}
 	/**
-	* Show a JSON editor/viewer dialog
-	*/
-	json(data, options) {
-		this.open({
-			size: "lg",
-			title: options?.title || "Json Viewer",
-			...options,
-			content: /* @__PURE__ */ jsx(Flex$1, {
-				bdrs: "md",
-				w: "100%",
-				flex: 1,
-				p: "sm",
-				bg: ui.colors.surface,
-				children: /* @__PURE__ */ jsx(JsonViewer_default, {
-					size: "xs",
-					data
-				})
-			})
-		});
-	}
-	/**
 	* Show an error viewer dialog
 	*/
 	error(error, options) {
@@ -1937,27 +1626,34 @@ const ControlNumber = (props) => {
 	} }, [props.input]);
 	if (!props.input?.props) return null;
 	const { type, ...inputPropsWithoutType } = props.input.props;
-	if (props.sliderProps) return /* @__PURE__ */ jsx(Input.Wrapper, {
-		...inputProps,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				height: 32,
-				padding: 8
-			},
-			children: /* @__PURE__ */ jsx(Slider, {
-				...inputProps,
-				ref,
-				id,
-				...inputPropsWithoutType,
-				...props.sliderProps,
-				value,
-				onChange: (val) => {
-					setValue(val);
-					props.input.set(val);
-				}
+	if (props.sliderProps) {
+		const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
+		const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
+		return /* @__PURE__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					height: 32,
+					padding: 8
+				},
+				children: /* @__PURE__ */ jsx(Slider, {
+					...inputProps,
+					ref,
+					id,
+					...inputPropsWithoutType,
+					...props.sliderProps,
+					value,
+					min,
+					max,
+					label: () => value,
+					onChange: (val) => {
+						setValue(val);
+						props.input.set(val);
+					}
+				})
 			})
-		})
-	});
+		});
+	}
 	return /* @__PURE__ */ jsx(NumberInput, {
 		...inputProps,
 		ref,
@@ -2599,6 +2295,7 @@ const Control = (_props) => {
 	}
 	if (props.number || props.input.schema && "type" in props.input.schema && (props.input.schema.type === "number" || props.input.schema.type === "integer")) {
 		const controlNumberProps = typeof props.number === "object" ? props.number : {};
+		if (props.slider) controlNumberProps.sliderProps ??= {};
 		return /* @__PURE__ */ jsx(ControlNumber_default, {
 			input: props.input,
 			title: props.title,
@@ -2631,6 +2328,7 @@ const Control = (_props) => {
 	}
 	if (props.input.schema && "enum" in props.input.schema && props.input.schema.enum || isArray && !isArrayOfObjects || props.select) {
 		const opts = typeof props.select === "object" ? props.select : {};
+		if (props.segmented) opts.segmented ??= {};
 		return /* @__PURE__ */ jsx(ControlSelect_default, {
 			input: props.input,
 			title: props.title,
@@ -2647,7 +2345,9 @@ const Control = (_props) => {
 				id,
 				color: "blue",
 				defaultChecked: props.input.props.defaultValue,
-				...props.input.props,
+				onChange: (event) => {
+					props.input.set(event.currentTarget.checked);
+				},
 				...switchProps
 			});
 		}
@@ -2777,7 +2477,7 @@ var Control_default = Control;
 * ```
 */
 const TypeForm = (props) => {
-	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps } = props;
+	const { form, columns = 3, children, controlProps, fieldControlProps, skipFormElement = false, skipSubmitButton = false, submitButtonProps, fill = true } = props;
 	const schema = props.schema || form.options.schema;
 	if (!schema?.properties) return null;
 	const supportedFields = Object.keys(schema.properties);
@@ -2818,7 +2518,7 @@ const TypeForm = (props) => {
 	const content = /* @__PURE__ */ jsxs(Flex$1, {
 		direction: "column",
 		gap: "sm",
-		flex: props.fill ? 1 : void 0,
+		flex: fill ? 1 : void 0,
 		...props.flexProps,
 		children: [/* @__PURE__ */ jsx(Flex$1, {
 			direction: "column",
@@ -2854,7 +2554,7 @@ const TypeForm = (props) => {
 	if (skipFormElement) return content;
 	return /* @__PURE__ */ jsx(Flex$1, {
 		component: "form",
-		flex: props.fill ? 1 : void 0,
+		flex: fill ? 1 : void 0,
 		...form.props,
 		...props.flexProps,
 		children: content
@@ -2937,7 +2637,7 @@ var ToggleSidebarButton_default = ToggleSidebarButton;
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
 	const router = useRouter();
-	const { top = [], bottom = [], onItemClick } = props;
+	const { onItemClick } = props;
 	const renderNode = (item, key) => {
 		if ("type" in item) {
 			if (item.type === "spacer") return /* @__PURE__ */ jsx(Flex$1, { h: 16 }, key);
@@ -2982,11 +2682,10 @@ const Sidebar = (props) => {
 		}, key);
 	};
 	const getSidebarNodes = () => {
-		if (props.menu) return props.menu;
+		if (props.items) return props.items;
 		if (props.autoPopulateMenu) {
-			const items = router.concretePages.map((page) => ({
+			const items = router.concretePages.filter((page) => !page.can || page.can()).map((page) => ({
 				label: page.label ?? page.name,
-				description: page.description?.slice(0, 32),
 				icon: renderIcon(page.icon),
 				href: router.path(page.name)
 			}));
@@ -2994,11 +2693,12 @@ const Sidebar = (props) => {
 				const startsWith = props.autoPopulateMenu.startsWith;
 				return items.filter((item) => item.href?.startsWith(startsWith));
 			}
+			return items;
 		}
 		return [];
 	};
 	const padding = "md";
-	const gap = props.menu ? props.gap : "xs";
+	const gap = props.items ? props.gap : "xs";
 	const menu = useMemo(() => getSidebarNodes(), []);
 	return /* @__PURE__ */ jsxs(Flex$1, {
 		flex: 1,
@@ -3007,11 +2707,11 @@ const Sidebar = (props) => {
 		className: "overflow-auto",
 		...props.flexProps,
 		children: [
-			/* @__PURE__ */ jsxs(Flex$1, {
+			/* @__PURE__ */ jsx(Flex$1, {
 				gap,
 				px: padding,
 				direction: "column",
-				children: [top.map((item, index) => renderNode(item, index)), menu.filter((it) => it.position === "top").map((item, index) => renderNode(item, index + top.length))]
+				children: menu.filter((it) => it.position === "top").map((item, index) => renderNode(item, index))
 			}),
 			/* @__PURE__ */ jsx(Flex$1, {
 				gap,
@@ -3021,11 +2721,11 @@ const Sidebar = (props) => {
 				className: "overflow-auto",
 				children: menu.filter((it) => !it.position).map((item, index) => renderNode(item, index))
 			}),
-			/* @__PURE__ */ jsxs(Flex$1, {
+			/* @__PURE__ */ jsx(Flex$1, {
 				gap,
 				px: padding,
 				direction: "column",
-				children: [bottom.map((item, index) => renderNode(item, index)), menu.filter((it) => it.position === "bottom").map((item, index) => renderNode(item, index + bottom.length))]
+				children: menu.filter((it) => it.position === "bottom").map((item, index) => renderNode(item, index))
 			})
 		]
 	});
@@ -3941,5 +3641,5 @@ const AlephaUI = $module({
 });
 
 //#endregion
-export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlArray_default as ControlArray, ControlDate_default as ControlDate, ControlNumber_default as ControlNumber, ControlObject_default as ControlObject, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, JsonViewer_default as JsonViewer, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, TypeForm_default as TypeForm, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, ui, useDialog, useToast };
+export { ActionButton_default as ActionButton, AdminShell_default as AdminShell, AlephaMantineProvider_default as AlephaMantineProvider, AlephaUI, AlertDialog_default as AlertDialog, AppBar_default as AppBar, BurgerButton_default as BurgerButton, ClipboardButton_default as ClipboardButton, ConfirmDialog_default as ConfirmDialog, Control_default as Control, ControlArray_default as ControlArray, ControlDate_default as ControlDate, ControlNumber_default as ControlNumber, ControlObject_default as ControlObject, ControlQueryBuilder_default as ControlQueryBuilder, ControlSelect_default as ControlSelect, DarkModeButton_default as DarkModeButton, DataTable_default as DataTable, DialogService, Flex, LanguageButton_default as LanguageButton, OPERATOR_INFO, Omnibar_default as Omnibar, OmnibarButton_default as OmnibarButton, PromptDialog_default as PromptDialog, RootRouter, Sidebar, Text, ThemeButton_default as ThemeButton, ThemeProvider, ToastService, TypeForm_default as TypeForm, alephaThemeAtom, alephaThemeListAtom, capitalize, defaultTheme, extractSchemaFields, getDefaultIcon, getOperatorsForField, midnightTheme, prettyName, ui, useDialog, useToast };
 //# sourceMappingURL=index.js.map