@arqel-dev/ui 0.9.1 → 0.9.2

package/dist/pages.js

@@ -2,11 +2,12 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useMemo, useState, useRef, useEffect, useCallback, useId } from 'react';
 import { cva } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
+import { Slot, DropdownMenu as DropdownMenu$1, Dialog as Dialog$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { isFieldEntry, isLayoutEntry } from '@arqel-dev/types/forms';
 import { useArqelForm } from '@arqel-dev/hooks';
 import { usePage, router } from '@inertiajs/react';
+import { XIcon } from 'lucide-react';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
 var __defProp = Object.defineProperty;
@@ -865,6 +866,477 @@ var init_ArqelEditPage = __esm({
     };
   }
 });
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var init_dropdown_menu = __esm({
+  "src/shadcn/ui/dropdown-menu.tsx"() {
+    "use client";
+    init_cn();
+  }
+});
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            Dialog$1.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Close" }) })
+      ]
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var init_dialog = __esm({
+  "src/shadcn/ui/dialog.tsx"() {
+    init_cn();
+    init_button();
+  }
+});
+function ActionFormModal({
+  open,
+  onOpenChange,
+  action,
+  fields,
+  onSubmit,
+  processing = false,
+  errors = {},
+  initialValues = {}
+}) {
+  const [values, setValues] = useState(initialValues);
+  const size = action.modalSize ?? "md";
+  const schema = useMemo(
+    () => ({
+      schema: (action.form ?? []).map((entry) => ({
+        kind: "field",
+        name: entry.name,
+        type: entry.type
+      })),
+      columns: 1,
+      model: null,
+      inline: false,
+      disabled: false
+    }),
+    [action.form]
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs(DialogContent, { className: cn("overflow-auto", SIZE_CLASSES[size]), children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: action.label }) }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "flex flex-col gap-4",
+        onSubmit: (e) => {
+          e.preventDefault();
+          onSubmit(values);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            FormRenderer,
+            {
+              schema,
+              fields,
+              values,
+              errors,
+              onChange: (name, value) => setValues((prev) => ({ ...prev, [name]: value })),
+              disabled: processing
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FormActions,
+            {
+              processing,
+              submitLabel: action.label,
+              extra: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", disabled: processing, children: "Cancel" }) })
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+var SIZE_CLASSES;
+var init_ActionFormModal = __esm({
+  "src/action/ActionFormModal.tsx"() {
+    init_FormActions();
+    init_FormRenderer();
+    init_dialog();
+    init_cn();
+    init_Button();
+    SIZE_CLASSES = {
+      sm: "sm:max-w-[24rem]",
+      md: "sm:max-w-[32rem]",
+      lg: "sm:max-w-[44rem]",
+      xl: "sm:max-w-[56rem]",
+      full: "sm:max-w-[90vw] h-[90vh]"
+    };
+  }
+});
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  config,
+  onConfirm,
+  processing = false
+}) {
+  const [typed, setTyped] = useState("");
+  useEffect(() => {
+    if (!open) setTyped("");
+  }, [open]);
+  const requiresText = config?.requiresText;
+  const submitDisabled = processing || requiresText !== void 0 && typed !== requiresText;
+  const variant = COLOR_VARIANT[config?.color ?? "destructive"];
+  const submitLabel = config?.submitLabel ?? (config?.color === "info" ? "Confirm" : "Delete");
+  const cancelLabel = config?.cancelLabel ?? "Cancel";
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => onOpenChange(next), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[28rem]", showCloseButton: false, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: config?.heading ?? "Are you sure?" }),
+      config?.description && /* @__PURE__ */ jsx(DialogDescription, { children: config.description })
+    ] }),
+    requiresText !== void 0 && /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Type ",
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: requiresText }),
+        " to confirm"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          ref: (el) => el?.focus(),
+          value: typed,
+          onChange: (e) => setTyped(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !submitDisabled) {
+              e.preventDefault();
+              onConfirm();
+            }
+          },
+          className: "h-9 rounded-md border border-input bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", disabled: processing, children: cancelLabel }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant, disabled: submitDisabled, onClick: onConfirm, children: processing ? "Working\u2026" : submitLabel })
+    ] })
+  ] }) });
+}
+var COLOR_VARIANT;
+var init_ConfirmDialog = __esm({
+  "src/action/ConfirmDialog.tsx"() {
+    init_dialog();
+    init_Button();
+    COLOR_VARIANT = {
+      destructive: "destructive",
+      warning: "default",
+      info: "default"
+    };
+  }
+});
+function ActionButton({
+  action,
+  formFields = [],
+  onInvoke,
+  processing = false,
+  errors,
+  size = "default",
+  className
+}) {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [formOpen, setFormOpen] = useState(false);
+  const variant = VARIANT_OVERRIDE[action.variant] ?? COLOR_TO_VARIANT[action.color];
+  const handleClick = () => {
+    if (action.disabled) return;
+    if (action.requiresConfirmation) {
+      setConfirmOpen(true);
+    } else if (action.form && action.form.length > 0) {
+      setFormOpen(true);
+    } else {
+      onInvoke();
+    }
+  };
+  const handleConfirm = () => {
+    setConfirmOpen(false);
+    if (action.form && action.form.length > 0) {
+      setFormOpen(true);
+    } else {
+      onInvoke();
+    }
+  };
+  const handleFormSubmit = (values) => {
+    onInvoke(values);
+    setFormOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size,
+        disabled: action.disabled === true || processing,
+        title: action.tooltip,
+        onClick: handleClick,
+        className,
+        children: action.label
+      }
+    ),
+    action.requiresConfirmation && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirmOpen,
+        onOpenChange: setConfirmOpen,
+        config: action.confirmation,
+        onConfirm: handleConfirm,
+        processing
+      }
+    ),
+    action.form && action.form.length > 0 && /* @__PURE__ */ jsx(
+      ActionFormModal,
+      {
+        open: formOpen,
+        onOpenChange: setFormOpen,
+        action,
+        fields: formFields,
+        onSubmit: handleFormSubmit,
+        processing,
+        errors
+      }
+    )
+  ] });
+}
+var COLOR_TO_VARIANT, VARIANT_OVERRIDE;
+var init_ActionButton = __esm({
+  "src/action/ActionButton.tsx"() {
+    init_ActionFormModal();
+    init_Button();
+    init_ConfirmDialog();
+    COLOR_TO_VARIANT = {
+      primary: "default",
+      secondary: "outline",
+      destructive: "destructive",
+      success: "default",
+      warning: "default",
+      info: "default"
+    };
+    VARIANT_OVERRIDE = {
+      default: "default",
+      outline: "outline",
+      ghost: "ghost",
+      destructive: "destructive"
+    };
+  }
+});
+function ActionMenu({
+  actions,
+  formFieldsByAction = {},
+  onInvoke,
+  inlineThreshold = 3,
+  processing = false,
+  trigger,
+  className
+}) {
+  if (actions.length === 0) return null;
+  if (actions.length <= inlineThreshold) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-1", className), children: actions.map((action) => /* @__PURE__ */ jsx(
+      ActionButton,
+      {
+        action,
+        formFields: formFieldsByAction[action.name] ?? [],
+        onInvoke: (values) => onInvoke(action, values),
+        processing,
+        size: "sm"
+      },
+      action.name
+    )) });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Actions", children: "\u22EF" }) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 6, className: cn("min-w-[12rem]", className), children: actions.map((action) => /* @__PURE__ */ jsx(
+      DropdownMenuItem,
+      {
+        disabled: action.disabled === true,
+        variant: action.color === "destructive" ? "destructive" : "default",
+        onSelect: () => {
+          if (action.disabled) return;
+          onInvoke(action);
+        },
+        children: action.label
+      },
+      action.name
+    )) })
+  ] });
+}
+var init_ActionMenu = __esm({
+  "src/action/ActionMenu.tsx"() {
+    init_dropdown_menu();
+    init_cn();
+    init_ActionButton();
+    init_Button();
+  }
+});
 function TableCell({ column, value }) {
   switch (column.type) {
     case "text":
@@ -1575,11 +2047,23 @@ function pruneEmptyFilters(values) {
   }
   return out;
 }
+function invokeAction(action, record, formValues) {
+  const recordId = record?.id;
+  const url = action.url ? action.url.replace("{id}", String(recordId ?? "")) : `/arqel-dev/actions/${action.name}`;
+  const method = action.method.toLowerCase();
+  const data = { ...formValues ?? {} };
+  if (recordId !== void 0) data["record_id"] = recordId;
+  router.visit(url, {
+    method,
+    data,
+    preserveScroll: true
+  });
+}
 function buildQuery(params) {
   const data = {};
   const filters = pruneEmptyFilters(params.filters);
   if (Object.keys(filters).length > 0) data["filter"] = filters;
-  if (params.search) data["search"] = params.search;
+  if (params.search !== void 0) data["search"] = params.search;
   if (params.sort?.column) {
     data["sort"] = params.sort.column;
     if (params.sort.direction) data["direction"] = params.sort.direction;
@@ -1603,6 +2087,8 @@ function ArqelIndexPage() {
   }, []);
   const [filterValues, setFilterValues] = useState(initialFilters);
   const [searchValue, setSearchValue] = useState(props.search ?? "");
+  const [perPage, setPerPage] = useState(props.pagination?.perPage);
+  const [selectedIds, setSelectedIds] = useState([]);
   const searchDebounceRef = useRef(null);
   const visit = (data) => {
     const url = typeof window !== "undefined" ? window.location.pathname : page.url.split("?")[0];
@@ -1621,17 +2107,17 @@ function ArqelIndexPage() {
       nextFilters[name] = value;
     }
     setFilterValues(nextFilters);
-    visit(buildQuery({ filters: nextFilters, search: searchValue, sort: currentSort }));
+    visit(buildQuery({ filters: nextFilters, search: searchValue, sort: currentSort, perPage }));
   };
   const handleClearFilters = () => {
     setFilterValues({});
-    visit(buildQuery({ filters: {}, search: searchValue, sort: currentSort }));
+    visit(buildQuery({ filters: {}, search: searchValue, sort: currentSort, perPage }));
   };
   const handleSearchChange = (value) => {
     setSearchValue(value);
     if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
     searchDebounceRef.current = setTimeout(() => {
-      visit(buildQuery({ filters: filterValues, search: value, sort: currentSort }));
+      visit(buildQuery({ filters: filterValues, search: value, sort: currentSort, perPage }));
     }, 300);
   };
   useEffect(
@@ -1645,7 +2131,8 @@ function ArqelIndexPage() {
       buildQuery({
         filters: filterValues,
         search: searchValue,
-        sort: { column, direction }
+        sort: { column, direction },
+        perPage
       })
     );
   };
@@ -1655,20 +2142,50 @@ function ArqelIndexPage() {
         filters: filterValues,
         search: searchValue,
         sort: currentSort,
-        page: pageNum
+        page: pageNum,
+        perPage
       })
     );
   };
-  const handlePerPageChange = (perPage) => {
+  const handlePerPageChange = (newPerPage) => {
+    setPerPage(newPerPage);
     visit(
       buildQuery({
         filters: filterValues,
         search: searchValue,
         sort: currentSort,
-        perPage
+        perPage: newPerPage
       })
     );
   };
+  const bulkActionsList = props.actions?.bulk ?? [];
+  const bulkActions = bulkActionsList.length > 0 && selectedIds.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: bulkActionsList.map((action) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        const url = action.url ?? `/arqel-dev/actions/${action.name}`;
+        const method = action.method.toLowerCase();
+        router.visit(url, {
+          method,
+          data: { record_ids: selectedIds },
+          preserveScroll: true,
+          onSuccess: () => setSelectedIds([])
+        });
+      },
+      className: "inline-flex h-8 items-center gap-1 rounded-sm border border-destructive/40 bg-destructive/10 px-3 text-xs font-medium text-destructive hover:bg-destructive/20",
+      children: action.label
+    },
+    action.name
+  )) }) : void 0;
+  const rowActionsList = props.actions?.row ?? [];
+  const rowActions = rowActionsList.length > 0 ? (record) => /* @__PURE__ */ jsx(
+    ActionMenu,
+    {
+      actions: rowActionsList,
+      onInvoke: (action, formValues) => invokeAction(action, record, formValues)
+    }
+  ) : void 0;
   return /* @__PURE__ */ jsx(
     ResourceIndex,
     {
@@ -1680,12 +2197,17 @@ function ArqelIndexPage() {
       onSortChange: handleSortChange,
       onPageChange: handlePageChange,
       onPerPageChange: handlePerPageChange,
-      search: searchValue
+      search: searchValue,
+      selectedIds,
+      onSelectionChange: (ids) => setSelectedIds(ids),
+      ...rowActions ? { rowActions } : {},
+      ...bulkActions ? { bulkActions } : {}
     }
   );
 }
 var init_ArqelIndexPage = __esm({
   "src/pages/ArqelIndexPage.tsx"() {
+    init_ActionMenu();
     init_ResourceIndex();
   }
 });