@alepha/ui 0.18.2 → 0.18.3

package/src/core/styles.css

@@ -111,9 +111,19 @@
 }
 
 /* ------------------------------------------------------------------------------------------------------------------ */
-/* Modal Customizations */
+/* our custom "minimal" variant for <Button/> - from Blueprint */
+.mantine-Button-root[data-variant="minimal"] {
+  background-color: transparent;
+  color: var(--mantine-color-text);
+}
+
+.mantine-Button-root[data-variant="minimal"]:hover {
+  /* imitate the hover effect of <Table/> rows */
+  background-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
+}
+
+/* ------------------------------------------------------------------------------------------------------------------ */
 
-/* Custom modal scale animation */
 @keyframes modalScaleIn {
   from {
     opacity: 0;

package/src/core/table/components/ColumnPicker.tsx

@@ -76,7 +76,7 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
       <Popover.Target>
         <div>
           <ActionButton
-            variant="subtle"
+            variant={"minimal"}
             icon={IconColumns}
             onClick={() => setOpened((o) => !o)}
           />
@@ -104,14 +104,14 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
             <Flex gap={4}>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleShowAll}
               >
                 All
               </ActionButton>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleDefault}
               >
                 Default

package/src/core/table/components/DataTable.tsx

@@ -1,5 +1,5 @@
 import { ActionButton, Flex, isComponentType, Text, ui } from "@alepha/ui";
-import { Checkbox, Drawer, Table, UnstyledButton } from "@mantine/core";
+import { Checkbox, Drawer, Loader, Table, UnstyledButton } from "@mantine/core";
 import {
   IconArrowDown,
   IconArrowsSort,
@@ -98,13 +98,19 @@ const DataTable = <T extends object, Filters extends TObject>(
   const [items, setItems] = useState<MaybePage<T>>(
     typeof props.items === "function" ? { content: [] } : props.items,
   );
+  const itemsRef = useRef(items);
+  const [loaded, setLoaded] = useState(
+    typeof props.items !== "function" || !props.submitOnInit,
+  );
 
-  const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
+  const defaultSize = props.defaultSize || (props.infinityScroll ? 100 : 10);
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(String(defaultSize));
   const [currentPage, setCurrentPage] = useState(0);
   const alepha = useInject(Alepha);
+  itemsRef.current = items;
   const sentinelRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Column visibility state
   const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>(
@@ -221,7 +227,7 @@ const DataTable = <T extends object, Filters extends TObject>(
               sort?: string;
             },
             {
-              items: items.content,
+              items: itemsRef.current.content,
             },
           );
 
@@ -236,6 +242,7 @@ const DataTable = <T extends object, Filters extends TObject>(
           }
 
           setCurrentPage(values.page);
+          if (!loaded) setLoaded(true);
         }
       },
       onReset: async () => {
@@ -261,13 +268,33 @@ const DataTable = <T extends object, Filters extends TObject>(
           value,
           form as unknown as FormModel<Filters>,
         );
+
+        if (props.skipSubmitOnChange) return;
+
+        form.input.page.set(0);
+
+        const delay = props.debounce ?? 300;
+        if (delay > 0) {
+          if (debounceRef.current) clearTimeout(debounceRef.current);
+          debounceRef.current = setTimeout(() => {
+            form.submit();
+          }, delay);
+        } else {
+          await form.submit();
+        }
       },
     },
-    [items],
+    [],
   );
 
   const dt = useInject(DateTimeProvider);
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
   useEffect(() => {
     if (props.submitOnInit) {
       form.submit();
@@ -358,9 +385,9 @@ const DataTable = <T extends object, Filters extends TObject>(
           </Text>
           {col.sortable && (
             <Flex c="dimmed">
-              {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.sm} />}
-              {sortDir === "desc" && <IconArrowDown size={ui.sizes.icon.sm} />}
-              {sortDir === null && <IconArrowsSort size={ui.sizes.icon.sm} />}
+              {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.xs} />}
+              {sortDir === "desc" && <IconArrowDown size={ui.sizes.icon.xs} />}
+              {sortDir === null && <IconArrowsSort size={ui.sizes.icon.xs} />}
             </Flex>
           )}
         </Flex>
@@ -428,9 +455,21 @@ const DataTable = <T extends object, Filters extends TObject>(
             alepha,
           } as DataTableColumnContext<Filters>;
 
+          const content = col.value?.(item as T, ctx);
+
           return (
             <Table.Td key={key} style={col.fit ? FIT_STYLE : undefined}>
-              {col.value?.(item as T, ctx)}
+              {col.action ? (
+                <ActionButton
+                  td={"inherit"}
+                  unstyled
+                  {...col.action(item as T)}
+                >
+                  {content}
+                </ActionButton>
+              ) : (
+                content
+              )}
             </Table.Td>
           );
         })}
@@ -453,7 +492,7 @@ const DataTable = <T extends object, Filters extends TObject>(
                 onClick={(e) => e.stopPropagation()}
               >
                 <ActionButton
-                  variant="subtle"
+                  variant={"minimal"}
                   size="xs"
                   icon={IconDotsVertical}
                   menu={{
@@ -471,7 +510,14 @@ const DataTable = <T extends object, Filters extends TObject>(
                           ) : (
                             (Icon as ReactNode)
                           ),
-                        onClick: (action as any).onClick,
+                        onClick: (action as any).onClick
+                          ? async () => {
+                              await (action as any).onClick();
+                              if (!action.skipRefresh) {
+                                await form.submit();
+                              }
+                            }
+                          : undefined,
                         color: action.color,
                       };
                     }),
@@ -538,8 +584,16 @@ const DataTable = <T extends object, Filters extends TObject>(
         )}
       </Flex>
 
-      <Flex col rounded bordered elevated shadowed={"xs"}>
-        <Flex className="overflow-auto">
+      <Flex
+        col
+        rounded
+        bordered
+        elevated
+        shadowed={"xs"}
+        flex={1}
+        style={{ minHeight: 0 }}
+      >
+        <Flex className="overflow-auto" flex={1} style={{ minHeight: 0 }} col>
           <Table
             aria-label="Data table"
             withRowBorders
@@ -547,10 +601,12 @@ const DataTable = <T extends object, Filters extends TObject>(
             {...props.tableProps}
           >
             <Table.Thead
+              bdrs={"md"}
               style={{
                 position: "sticky",
                 top: 0,
                 zIndex: 1,
+                backgroundColor: "var(--alepha-elevated)",
               }}
             >
               <Table.Tr>
@@ -560,25 +616,27 @@ const DataTable = <T extends object, Filters extends TObject>(
                 {props.rowActions && <Table.Th style={FIT_STYLE} />}
               </Table.Tr>
             </Table.Thead>
-            <Table.Tbody
-              style={{
-                opacity: form.submitting ? 0.5 : 1,
-                transition: "opacity 150ms ease",
-              }}
-            >
-              {rows}
-              {items.content.length === 0 && (
+            <Table.Tbody>
+              {!loaded || form.submitting ? (
+                <Table.Tr>
+                  <Table.Td colSpan={totalColumns || 1} py="sm">
+                    <Flex justify="center" p={"md"}>
+                      <Loader size="sm" type="dots" />
+                    </Flex>
+                  </Table.Td>
+                </Table.Tr>
+              ) : rows.length === 0 ? (
                 <Table.Tr>
-                  <Table.Td
-                    colSpan={totalColumns || 1}
-                    py="xl"
-                    style={{ textAlign: "center" }}
-                  >
-                    <Text c="dimmed" size="sm">
-                      {form.submitting ? "Loading…" : "No results"}
-                    </Text>
+                  <Table.Td colSpan={totalColumns || 1} py="xl">
+                    <Flex justify="center">
+                      <Text c="dimmed" size="sm">
+                        {props.emptyLabel ?? "No results"}
+                      </Text>
+                    </Flex>
                   </Table.Td>
                 </Table.Tr>
+              ) : (
+                rows
               )}
             </Table.Tbody>
           </Table>
@@ -590,8 +648,10 @@ const DataTable = <T extends object, Filters extends TObject>(
           <DataTablePagination
             page={page}
             size={size}
-            totalPages={items.page?.totalPages ?? 1}
+            totalPages={items.page?.totalPages}
             totalElements={items.page?.totalElements}
+            isFirst={items.page?.isFirst}
+            isLast={items.page?.isLast}
             offset={items.page?.offset ?? 0}
             numberOfElements={items.content.length}
             onPageChange={(value) => {

package/src/core/table/components/DataTableFilters.tsx

@@ -1,5 +1,4 @@
-import { ui } from "@alepha/ui";
-import { Flex } from "@mantine/core";
+import { Flex } from "@alepha/ui";
 import { type TObject, t } from "alepha";
 import type { FormModel } from "alepha/react/form";
 import { useMemo } from "react";
@@ -16,12 +15,9 @@ export interface DataTableFiltersProps {
   filterVisibility: FilterVisibility;
 }
 
-const DataTableFilters = ({
-  schema,
-  form,
-  typeFormProps,
-  filterVisibility,
-}: DataTableFiltersProps) => {
+const DataTableFilters = (props: DataTableFiltersProps) => {
+  const { schema, form, typeFormProps, filterVisibility } = props;
+
   const visibleSchema = useMemo(() => {
     const visibleKeys = Object.keys(schema.properties).filter(
       (key) => filterVisibility[key] !== false,
@@ -47,9 +43,8 @@ const DataTableFilters = ({
   }
 
   return (
-    <Flex w="100%" p="xs" m="xs" bdrs="md" bg={ui.colors.surface}>
+    <Flex surface flex={1} mt={-4} p="xs" m="xs" bdrs="md">
       <TypeForm
-        size={"xs"}
         {...typeFormProps}
         skipSubmitButton
         fill
@@ -60,7 +55,7 @@ const DataTableFilters = ({
           sm: 2,
           md: 3,
           lg: 4,
-          xl: 6,
+          xl: 5,
         }}
       />
     </Flex>

package/src/core/table/components/DataTablePagination.tsx

@@ -4,8 +4,10 @@ import { Pagination, Select } from "@mantine/core";
 export interface DataTablePaginationProps {
   page: number;
   size: string;
-  totalPages: number;
+  totalPages?: number;
   totalElements?: number;
+  isFirst?: boolean;
+  isLast?: boolean;
   offset: number;
   numberOfElements: number;
   onPageChange: (page: number) => void;
@@ -17,6 +19,8 @@ const DataTablePagination = ({
   size,
   totalPages,
   totalElements,
+  isFirst,
+  isLast,
   offset,
   numberOfElements,
   onPageChange,
@@ -24,6 +28,7 @@ const DataTablePagination = ({
 }: DataTablePaginationProps) => {
   const from = numberOfElements > 0 ? offset + 1 : 0;
   const to = offset + numberOfElements;
+  const hasTotal = totalPages != null;
 
   return (
     <Flex
@@ -68,8 +73,9 @@ const DataTablePagination = ({
         <Flex>
           <Pagination
             size={"sm"}
-            withEdges
-            total={totalPages}
+            withEdges={hasTotal}
+            withPages={hasTotal}
+            total={hasTotal ? totalPages : isLast !== false ? page : page + 1}
             value={page}
             onChange={onPageChange}
           />

package/src/core/table/components/DataTableToolbar.tsx

@@ -151,7 +151,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
         />
         {withExport && (
           <ActionButton
-            variant="subtle"
+            variant={"minimal"}
             icon={IconDownload}
             menu={{
               items: [
@@ -177,7 +177,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
               {selectedItems.length} selected
             </Badge>
             <ActionButton
-              variant="subtle"
+              variant={"minimal"}
               size="compact-sm"
               icon={IconX}
               onClick={onClearSelection}
@@ -214,7 +214,11 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
             props
           ),
         )}
-        <ActionButton variant="subtle" icon={IconRefresh} onClick={onRefresh} />
+        <ActionButton
+          variant={"minimal"}
+          icon={IconRefresh}
+          onClick={onRefresh}
+        />
       </Flex>
     </Flex>
   );

package/src/core/table/components/FilterPicker.tsx

@@ -74,7 +74,7 @@ const FilterPicker = ({
       <Popover.Target>
         <div>
           <ActionButton
-            variant="subtle"
+            variant={"minimal"}
             icon={IconFilter}
             onClick={() => setOpened((o) => !o)}
           />
@@ -102,14 +102,14 @@ const FilterPicker = ({
             <Flex gap={4}>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleShowAll}
               >
                 All
               </ActionButton>
               <ActionButton
                 size="compact-xs"
-                variant="subtle"
+                variant={"minimal"}
                 onClick={handleHideAll}
               >
                 None

package/src/core/table/interfaces/types.ts

@@ -29,6 +29,11 @@ export type DataTableRowAction = ActionProps & {
    */
   label?: string;
   visible?: boolean;
+  /**
+   * When true, skip the automatic table refresh after a successful onClick.
+   * By default, the table re-fetches data after every row action completes.
+   */
+  skipRefresh?: boolean;
 };
 
 // -----------------------------------------------------------------------------
@@ -70,6 +75,11 @@ export interface DataTableColumn<T extends object, Filters extends TObject> {
    * Hide this column by default. Users can show it via the column picker.
    */
   defaultHidden?: boolean;
+  /**
+   * Wrap the cell content with an ActionButton. Defaults to `variant="unstyled"`.
+   * Receives the row item to generate per-row action props (e.g., dynamic href).
+   */
+  action?: (item: T) => ActionProps;
 }
 
 // -----------------------------------------------------------------------------
@@ -136,6 +146,20 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
     form: FormModel<Filters>,
   ) => void;
 
+  /**
+   * Skip auto-submit when filter values change.
+   * When true, filters update form state but do not trigger a refetch.
+   * The user must manually refresh (e.g. via the toolbar refresh button).
+   */
+  skipSubmitOnChange?: boolean;
+
+  /**
+   * Debounce delay in milliseconds for filter auto-submit.
+   * Defaults to 300ms. Set to 0 to disable debounce.
+   * Ignored when skipSubmitOnChange is true.
+   */
+  debounce?: number;
+
   /**
    * Optional filters to apply to the data.
    */
@@ -206,6 +230,11 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
   // Mantine Props
   // -------------------------------------------------------------------------------------------------------------------
 
+  /**
+   * Label shown when the table has no results. Defaults to "No results".
+   */
+  emptyLabel?: string;
+
   /**
    * Props to pass to the Mantine Table component.
    */

package/src/core/utils/icons.tsx

@@ -31,8 +31,8 @@ export const getDefaultIcon = (params: {
   isArray?: boolean;
   size?: IconSize;
 }): ReactElement => {
-  const { type, format, name, isEnum, isArray, size = "sm" } = params;
-  const iconSize = ui.sizes.icon[size];
+  const { type, format, name, isEnum, isArray, size = "xs" } = params;
+  const iconSize = ui.sizes.icon[size] - 4; // TODO: better mapping
 
   // Format-based icons (highest priority)
   if (format) {

package/src/demo/DemoRouter.ts

@@ -121,7 +121,7 @@ export class DemoRouter {
     icon: IconForms,
     path: "/form",
     label: "Form",
-    children: () => [this.demoTypeForm],
+    children: () => [this.demoTypeForm, this.demoControlSelect],
   });
 
   demoTypeForm = $page({
@@ -131,6 +131,13 @@ export class DemoRouter {
     lazy: () => import("./components/core/DemoTypeForm.tsx"),
   });
 
+  demoControlSelect = $page({
+    icon: IconForms,
+    path: "/control-select",
+    label: "ControlSelect",
+    lazy: () => import("./components/core/DemoControlSelect.tsx"),
+  });
+
   // Table Components
   demoTable = $page({
     icon: IconTable,

package/src/demo/components/DemoLayout.tsx

@@ -13,12 +13,14 @@ const DemoLayout = () => {
   return (
     <AlephaMantineProvider>
       <DashboardShell
+        fill
         appShellProps={{
           withBorder: false,
           bg: ui.colors.background,
         }}
         appShellHeaderProps={{
           bg: "transparent",
+          style: { backdropFilter: "blur(10px)" },
         }}
         appBarProps={{
           items: [
@@ -58,7 +60,10 @@ const DemoLayout = () => {
             },
             {
               ...router.node("demoForm"),
-              children: [router.node("demoTypeForm")],
+              children: [
+                router.node("demoTypeForm"),
+                router.node("demoControlSelect"),
+              ],
             },
             {
               ...router.node("demoTable"),
@@ -70,7 +75,12 @@ const DemoLayout = () => {
             },
             {
               ...router.node("demoAuth"),
-              children: [router.node("demoLogin"), router.node("demoRegister")],
+              children: [
+                router.node("demoLogin"),
+                router.node("demoRegister"),
+                router.node("demoResetPassword"),
+                router.node("demoVerifyEmail"),
+              ],
             },
             {
               position: "bottom",

package/src/demo/components/auth/DemoLogin.tsx

@@ -1,9 +1,14 @@
 import { Login } from "@alepha/ui/auth";
 import { t } from "alepha";
-import type { RealmConfig } from "alepha/api/users";
+import type { FieldRequirement, RealmConfig } from "alepha/api/users";
 import Showcase from "../shared/Showcase.tsx";
 
 const showcaseSchema = t.object({
+  variant: t.string({
+    title: "Variant",
+    default: "card",
+    enum: ["card", "split"],
+  }),
   showCredentials: t.boolean({
     title: "Credentials",
     default: true,
@@ -19,20 +24,20 @@ const showcaseSchema = t.object({
     default: false,
     $control: { switch: true },
   }),
-  usernameEnabled: t.boolean({
-    title: "Username Login",
-    default: true,
-    $control: { switch: true },
+  username: t.string({
+    title: "Username",
+    default: "optional",
+    enum: ["none", "optional", "required"],
   }),
-  emailEnabled: t.boolean({
-    title: "Email Login",
-    default: true,
-    $control: { switch: true },
+  email: t.string({
+    title: "Email",
+    default: "optional",
+    enum: ["none", "optional", "required"],
   }),
-  phoneEnabled: t.boolean({
-    title: "Phone Login",
-    default: false,
-    $control: { switch: true },
+  phoneNumber: t.string({
+    title: "Phone Number",
+    default: "none",
+    enum: ["none", "optional", "required"],
   }),
   registrationAllowed: t.boolean({
     title: "Show Sign Up",
@@ -55,9 +60,9 @@ const buildRealmConfig = (props: {
   showCredentials: boolean;
   showGoogleOAuth: boolean;
   showGithubOAuth: boolean;
-  usernameEnabled: boolean;
-  emailEnabled: boolean;
-  phoneEnabled: boolean;
+  username: string;
+  email: string;
+  phoneNumber: string;
   registrationAllowed: boolean;
   resetPasswordAllowed: boolean;
   showBranding: boolean;
@@ -82,17 +87,13 @@ const buildRealmConfig = (props: {
       description: props.showBranding ? "Sign in to continue" : undefined,
       logoUrl: undefined,
       registrationAllowed: props.registrationAllowed,
-      emailEnabled: props.emailEnabled,
-      emailRequired: false,
-      usernameEnabled: props.usernameEnabled,
+      email: props.email as FieldRequirement,
+      username: props.username as FieldRequirement,
       usernameRegExp: "^[a-zA-Z0-9_]{3,30}$",
-      usernameRequired: false,
-      phoneEnabled: props.phoneEnabled,
-      phoneRequired: false,
+      phoneNumber: props.phoneNumber as FieldRequirement,
       verifyEmailRequired: false,
       verifyPhoneRequired: false,
-      firstNameLastNameEnabled: false,
-      firstNameLastNameRequired: false,
+      firstNameLastName: "none" as FieldRequirement,
       resetPasswordAllowed: props.resetPasswordAllowed,
       adminEmails: [],
       adminUsernames: [],
@@ -113,19 +114,25 @@ const DemoLogin = () => {
       title="Login"
       schema={showcaseSchema}
       initialValues={{
+        variant: "card",
         showCredentials: true,
         showGoogleOAuth: true,
         showGithubOAuth: false,
-        usernameEnabled: true,
-        emailEnabled: true,
-        phoneEnabled: false,
+        username: "optional",
+        email: "optional",
+        phoneNumber: "none",
         registrationAllowed: true,
         resetPasswordAllowed: true,
         showBranding: true,
       }}
       columns={1}
     >
-      {(props) => <Login realmConfig={buildRealmConfig(props)} />}
+      {(props) => (
+        <Login
+          realmConfig={buildRealmConfig(props)}
+          variant={props.variant as "card" | "split"}
+        />
+      )}
     </Showcase>
   );
 };