@navette-js/actions 1.0.0-beta.3 → 1.0.0-beta.4

package/lib/index.d.ts

@@ -15,8 +15,24 @@ export type ActionCallContext = {
     livewire: any;
     record: any;
     arguments: Record<string, unknown>;
-    data: Record<string, unknown>;
+    data: Record<string, unknown>; /** The action being run. */
+    action?: Action; /** Form data of the parent action, for an action of its modal footer (changes are kept). */
+    parentData?: Record<string, unknown>; /** For an action of a form component (affix action...): the component's state. */
+    state?: unknown; /** For an action of a form component: changes a field of the same form (`set('slug', value)`). */
+    set?: (name: string, value: unknown) => void;
+    get?: (name: string) => unknown; /** The modal's form, once validated (to save its relationships). */
+    schema?: any;
 };
+/** Message of a bulk notification, from the number of records concerned and the number of selected records. */
+export type BulkMessage = string | ((count: number, total: number) => string);
+/**
+ * Thrown by `action.halt()` (the modal stays open) and `action.cancel()` (the modal closes) to stop an action from one of
+ * its hooks. The host component catches it.
+ */
+export declare class ActionHalt extends Error {
+    readonly closesModal: boolean;
+    constructor(closesModal: boolean);
+}
 export declare class Action implements Renderable {
     /** Default setup for every instance created afterwards by `make()`, e.g. `Action.configureUsing((action) => action.size('sm'))`. */
     static configureUsing<T>(this: abstract new (...args: any[]) => T, configure: (instance: T) => void): void;
@@ -66,8 +82,6 @@ export declare class Action implements Renderable {
     /** Icon used when the action is a table row link. */
     tableIcon(name: string | null): this;
     private _iconButton;
-    /** Icon-only row action; the label becomes the tooltip and accessible name. */
-    iconButton(condition?: boolean): this;
     /** Icon used when the action is a menu item (ActionGroup). */
     groupedIcon(name: string | null): this;
     requiresConfirmation(condition?: boolean): this;
@@ -77,8 +91,7 @@ export declare class Action implements Renderable {
     modalIcon(name: string | null): this;
     private _badge;
     private _badgeColor;
-    /** Badge (counter) shown on the button. */
-    badge(badge: string | number | null | (() => string | number | null | Promise<string | number | null>)): this;
+    /** Color of the counter set with `badge(value)`. */
     badgeColor(color: string): this;
     private _slideOver;
     private _hasSubmit;
@@ -122,8 +135,48 @@ export declare class Action implements Renderable {
     schema(components: any[] | ((schema: any) => any), columns?: Record<string, number> | number | null): this;
     /** Applies the action's form to the host's schema; the function returns either components or the configured schema. */
     applySchema(schema: any): any | null;
-    /** Extra buttons in the modal footer, after the submit button. */
+    /**
+     * Extra buttons in the modal footer, after the submit button. An action with an `action()` function runs on top of this
+     * one (with its own modal, if it has one), and gets this action's form data as `parentData`.
+     */
     extraModalFooterActions(actions: Action[]): this;
+    getExtraModalFooterActions(): Action[];
+    private _closeByClickingAway;
+    private _closeByEscaping;
+    private _closeButton;
+    private _stickyHeader;
+    private _stickyFooter;
+    private _modalAlignment;
+    private _footerAlignment;
+    private _modalHidden;
+    private _mountUsing;
+    /** `false`: clicking outside the modal does not close it. */
+    closeModalByClickingAway(condition?: boolean): this;
+    /** `false`: the Escape key does not close the modal. */
+    closeModalByEscaping(condition?: boolean): this;
+    /** `false`: no close button in the modal header. */
+    modalCloseButton(condition?: boolean): this;
+    /** Keeps the modal header visible while its content scrolls. */
+    stickyModalHeader(condition?: boolean): this;
+    /** Keeps the modal footer visible while its content scrolls. */
+    stickyModalFooter(condition?: boolean): this;
+    modalAlignment(alignment: 'start' | 'center' | null): this;
+    modalFooterActionsAlignment(alignment: 'start' | 'center' | 'end' | null): this;
+    private _steps;
+    /** Builds the wizard of `steps()`: registered by `@navette-js/forms`, which owns the `Wizard` component. */
+    static stepsRenderer: ((steps: any[], submit: Action, cancel: Action) => any) | null;
+    /**
+     * Turns the modal form into a wizard: each step is validated before the next one, and the last step submits the action.
+     * `steps` are `Step` components of `@navette-js/forms`.
+     */
+    steps(steps: any[] | null): this;
+    isWizard(): boolean;
+    /** Runs the action without its modal (e.g. no confirmation for some records). */
+    modalHidden(condition?: Lazy<boolean, ActionCallContext>): this;
+    isModalHidden(ctx: ActionCallContext): Promise<boolean>;
+    /** Runs when the action is mounted, after the form is filled: `ctx.data` is the form state, which you may change. */
+    mountUsing(callback: ((ctx: ActionCallContext) => unknown) | null): this;
+    runMountUsing(ctx: ActionCallContext): Promise<void>;
     /** Initial form state (e.g. from the record). */
     fillForm(resolver: (ctx: ActionCallContext) => Record<string, unknown> | Promise<Record<string, unknown>>): this;
     /** Modal width (`xs` … `7xl`). Defaults to `md` for a confirmation and `4xl` for a form. */
@@ -140,6 +193,56 @@ export declare class Action implements Renderable {
     before(fn: (ctx: ActionCallContext) => unknown | Promise<unknown>): this;
     /** Runs after the handler succeeds (logging, extra notification…). */
     after(fn: (ctx: ActionCallContext) => unknown | Promise<unknown>): this;
+    private _individualAuthorization;
+    private _chunkSize;
+    private _deselectAfterCompletion;
+    private _successNotificationTitle;
+    private _failureNotificationTitle;
+    private _missingAuthorizationMessage;
+    private _missingProcessingMessage;
+    /**
+     * Bulk action: each selected record must pass this policy ability (or function), otherwise it is skipped and counted in the
+     * failure notification. Used by `processSelectedRecords()` of the table's page.
+     */
+    authorizeIndividualRecords(ability: string | ((record: any, ctx: ActionCallContext) => boolean | Promise<boolean>) | null): this;
+    getIndividualRecordsAuthorization(): string | ((record: any, ctx: ActionCallContext) => boolean | Promise<boolean>) | null;
+    /** Number of selected records loaded at a time by `processSelectedRecords()` (100 by default). */
+    chunkSelectedRecords(size: number): this;
+    getSelectedRecordsChunkSize(): number;
+    /** Clears the table selection once the bulk action has run. */
+    deselectRecordsAfterCompletion(condition?: boolean): this;
+    shouldDeselectRecordsAfterCompletion(): boolean;
+    /** Notification sent when every selected record was processed. */
+    successNotificationTitle(title: string | null): this;
+    getSuccessNotificationTitle(): string | null;
+    /** Notification title when some records failed: receives the number of processed records and the number selected. */
+    failureNotificationTitle(title: BulkMessage | null): this;
+    getFailureNotificationTitle(success: number, total: number): string | null;
+    /** Body line for records skipped by `authorizeIndividualRecords()`: receives their number and the number selected. */
+    missingBulkAuthorizationFailureNotificationMessage(message: BulkMessage | null): this;
+    getMissingBulkAuthorizationFailureNotificationMessage(count: number, total: number): string | null;
+    /** Body line for records whose processing failed: receives their number and the number selected. */
+    missingBulkProcessingFailureNotificationMessage(message: BulkMessage | null): this;
+    getMissingBulkProcessingFailureNotificationMessage(count: number, total: number): string | null;
+    private _successNotification;
+    private _successRedirectUrl;
+    private _preserveData;
+    /**
+     * Customizes the success notification of a prebuilt action: the function receives the notification and returns it (changed)
+     * or `null` to send nothing.
+     */
+    successNotification(customize: ((notification: any, ctx: ActionCallContext) => any) | null): this;
+    getSuccessNotificationCustomizer(): ((notification: any, ctx: ActionCallContext) => any) | null;
+    /** Where a prebuilt action redirects after success: a URL, or a function of the context (record, replica...). */
+    successRedirectUrl(url: string | ((ctx: ActionCallContext & Record<string, unknown>) => string | null | Promise<string | null>) | null): this;
+    getSuccessRedirectUrl(ctx: ActionCallContext & Record<string, unknown>): Promise<string | null>;
+    /** "Create & create another": fields kept in the new form (names, or a function returning the data to keep). */
+    preserveFormDataWhenCreatingAnother(fields: string[] | ((data: Record<string, unknown>) => Record<string, unknown>) | null): this;
+    getDataPreservedForAnother(data: Record<string, unknown>): Record<string, unknown>;
+    /** Stops the action from one of its hooks; the modal stays open. */
+    halt(): never;
+    /** Stops the action from one of its hooks and closes the modal. */
+    cancel(): never;
     call(ctx: ActionCallContext): Promise<unknown>;
     /** Menu item of a table bulk action. The click goes through the table's Alpine `mountAction()`, which sends the selection. */
     toGroupedHtml(ctx: ComponentContext, context: Record<string, unknown>): Promise<string>;
@@ -151,7 +254,7 @@ export declare class Action implements Renderable {
     /** Small link (or icon button) for a table row action. */
     toLinkHtml(ctx: ComponentContext, context: Record<string, unknown>, wireKey: string): Promise<string>;
     /** Modal of a mounted action; `content` is the rendered form, if any. */
-    toModalHtml(ctx: ActionCallContext, index: number, content?: string | null): Promise<string>;
+    toModalHtml(ctx: ActionCallContext, index: number, content?: string | null, mountContext?: Record<string, unknown>): Promise<string>;
     alpineClickHandler(handler: string | null): this;
     private _livewireTarget;
     private _iconAfter;
@@ -169,15 +272,80 @@ export declare class Action implements Renderable {
     /** Shown but unusable; the server also refuses to mount it. */
     disabled(condition?: Lazy<boolean, ComponentContext>): this;
     isDisabled(ctx: ComponentContext): Promise<boolean>;
+    private _view;
+    private _labeledFrom;
+    private _outlined;
+    /** Trigger style, instead of the one chosen by the location of the action. */
+    button(): this;
+    link(): this;
+    /** Icon only: the label becomes the tooltip and accessible name. */
+    iconButton(condition?: boolean): this;
+    badge(badge?: string | number | null | (() => string | number | null | Promise<string | number | null>)): this;
+    /** Icon button on small screens, labeled button from this breakpoint up (`sm`, `md`, `lg`, `xl`, `2xl`). */
+    labeledFrom(breakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | null): this;
+    /** Outlined button. */
+    outlined(condition?: boolean): this;
+    getView(): 'button' | 'link' | 'icon-button' | 'badge' | null;
+    /** Markup of a link, icon button or badge trigger; `attributes` carries the click (or href) behavior. */
+    private styledTriggerHtml;
     /** Renders the action as a button (or as a link when it has a URL). */
     toHtml(ctx: ComponentContext, explicitMountContext?: Record<string, unknown> | null): Promise<string>;
 }
 /** Group of actions collapsed into a dropdown behind a "⋮" icon button. */
+/**
+ * Actions in a dropdown menu ("⋮" icon button by default). A nested group with `dropdown(false)` is shown as a section of
+ * the menu, separated by a divider. `buttonGroup()` shows the actions side by side instead.
+ */
 export declare class ActionGroup {
     private actions;
-    constructor(actions: Action[]);
-    static make(actions: Action[]): ActionGroup;
+    private _label;
+    private _icon;
+    private _color;
+    private _size;
+    private _tooltip;
+    private _view;
+    private _dropdown;
+    private _buttonGroup;
+    private _placement;
+    private _width;
+    private _offset;
+    private _maxHeight;
+    private _hidden;
+    constructor(actions: (Action | ActionGroup)[]);
+    static make(actions: (Action | ActionGroup)[]): ActionGroup;
+    /** Every action of the group, nested groups included. */
     getActions(): Action[];
-    /** `keyOf` returns each action's `wire:key` (it depends on the record). */
-    toHtml(ctx: ComponentContext, context: Record<string, unknown>, keyOf: (action: Action) => string): Promise<string>;
+    getName(): string;
+    /** A group is never mounted: its actions are. */
+    isMountable(): boolean;
+    label(label: string | null): this;
+    icon(icon: string): this;
+    color(color: string): this;
+    size(size: string): this;
+    tooltip(tooltip: string | null): this;
+    /** Labeled button trigger. */
+    button(): this;
+    link(): this;
+    iconButton(): this;
+    /** `false`: inside another group, the actions form a section of its menu (with a divider). */
+    dropdown(condition?: boolean): this;
+    hasDropdown(): boolean;
+    /** The actions side by side, as a group of buttons. */
+    buttonGroup(condition?: boolean): this;
+    /** Menu placement: `bottom-start`, `bottom-end`, `top-start`... (`bottom-end` in tables). */
+    dropdownPlacement(placement: string | null): this;
+    /** Menu width: `xs` to `7xl`. */
+    dropdownWidth(width: string | null): this;
+    /** Distance between the trigger and the menu, in pixels (8 by default). */
+    dropdownOffset(offset: number | null): this;
+    /** Maximum height of the menu, as a CSS length; it scrolls beyond. */
+    maxHeight(height: string | null): this;
+    hidden(condition?: Lazy<boolean, ComponentContext>): this;
+    visible(condition?: Lazy<boolean, ComponentContext>): this;
+    isVisible(ctx: ComponentContext): Promise<boolean>;
+    private triggerHtml;
+    /** Menu items of the visible actions, one list per section (nested groups without dropdown). */
+    private itemLists;
+    /** `keyOf` returns each action's `wire:key` (it depends on the record in a table). */
+    toHtml(ctx: ComponentContext, explicitContext?: Record<string, unknown> | null, keyOf?: (action: Action) => string): Promise<string>;
 }

package/lib/index.js

@@ -1,5 +1,5 @@
 // @navette-js/actions — actions: buttons, links, menu items and modal actions.
-import { Attributes, e, evaluate, icon, js, loadingIndicator, renderHook, views, configured, configureUsing } from '@navette-js/support';
+import { Attributes, cls, e, evaluate, icon, js, loadingIndicator, renderHook, views, configured, configureUsing } from '@navette-js/support';
 import { t } from '@navette-js/support/i18n';
 import { fileURLToPath } from 'node:url';
 views.namespace('filament-actions', fileURLToPath(new URL('../views', import.meta.url)));
@@ -14,6 +14,14 @@ export const ActionsRenderHook = {
 };
 let colorManager = null;
 export const useColorManager = (manager) => { colorManager = manager; };
+/**
+ * Thrown by `action.halt()` (the modal stays open) and `action.cancel()` (the modal closes) to stop an action from one of
+ * its hooks. The host component catches it.
+ */
+export class ActionHalt extends Error {
+    closesModal;
+    constructor(closesModal) { super(closesModal ? 'Action cancelled.' : 'Action halted.'); this.closesModal = closesModal; }
+}
 export class Action {
     /** Default setup for every instance created afterwards by `make()`, e.g. `Action.configureUsing((action) => action.size('sm'))`. */
     static configureUsing(configure) { configureUsing(this, configure); }
@@ -88,8 +96,6 @@ export class Action {
     /** Icon used when the action is a table row link. */
     tableIcon(name) { this._tableIcon = name; return this; }
     _iconButton = false;
-    /** Icon-only row action; the label becomes the tooltip and accessible name. */
-    iconButton(condition = true) { this._iconButton = condition; return this; }
     /** Icon used when the action is a menu item (ActionGroup). */
     groupedIcon(name) { this._groupedIcon = name; return this; }
     requiresConfirmation(condition = true) { this._requiresConfirmation = condition; return this; }
@@ -99,8 +105,7 @@ export class Action {
     modalIcon(name) { this._modalIcon = name; return this; }
     _badge = null;
     _badgeColor = 'primary';
-    /** Badge (counter) shown on the button. */
-    badge(badge) { this._badge = badge; return this; }
+    /** Color of the counter set with `badge(value)`. */
     badgeColor(color) { this._badgeColor = color; return this; }
     _slideOver = false;
     _hasSubmit = true;
@@ -164,8 +169,60 @@ export class Action {
         const result = this._schema(schema);
         return Array.isArray(result) ? schema.columns(this._schemaColumns).components(result) : result;
     }
-    /** Extra buttons in the modal footer, after the submit button. */
+    /**
+     * Extra buttons in the modal footer, after the submit button. An action with an `action()` function runs on top of this
+     * one (with its own modal, if it has one), and gets this action's form data as `parentData`.
+     */
     extraModalFooterActions(actions) { this._extraModalFooterActions = actions; return this; }
+    getExtraModalFooterActions() { return this._extraModalFooterActions; }
+    // --- modal behavior
+    _closeByClickingAway = true;
+    _closeByEscaping = true;
+    _closeButton = true;
+    _stickyHeader = false;
+    _stickyFooter = false;
+    _modalAlignment = null;
+    _footerAlignment = null;
+    _modalHidden = false;
+    _mountUsing = null;
+    /** `false`: clicking outside the modal does not close it. */
+    closeModalByClickingAway(condition = true) { this._closeByClickingAway = condition; return this; }
+    /** `false`: the Escape key does not close the modal. */
+    closeModalByEscaping(condition = true) { this._closeByEscaping = condition; return this; }
+    /** `false`: no close button in the modal header. */
+    modalCloseButton(condition = true) { this._closeButton = condition; return this; }
+    /** Keeps the modal header visible while its content scrolls. */
+    stickyModalHeader(condition = true) { this._stickyHeader = condition; return this; }
+    /** Keeps the modal footer visible while its content scrolls. */
+    stickyModalFooter(condition = true) { this._stickyFooter = condition; return this; }
+    modalAlignment(alignment) { this._modalAlignment = alignment; return this; }
+    modalFooterActionsAlignment(alignment) { this._footerAlignment = alignment; return this; }
+    _steps = null;
+    /** Builds the wizard of `steps()`: registered by `@navette-js/forms`, which owns the `Wizard` component. */
+    static stepsRenderer = null;
+    /**
+     * Turns the modal form into a wizard: each step is validated before the next one, and the last step submits the action.
+     * `steps` are `Step` components of `@navette-js/forms`.
+     */
+    steps(steps) {
+        this._steps = steps;
+        this._schema = steps === null ? null : (schema) => {
+            if (!Action.stepsRenderer)
+                throw new Error('Action.steps() needs @navette-js/forms to be loaded.');
+            const submitLabel = this._modalSubmitActionLabel ?? t('filament-actions::modal.actions.submit.label');
+            const submit = Action.make('submit').label(submitLabel).color(this._color === 'gray' ? 'primary' : this._color).submit('callMountedAction');
+            const cancel = Action.make('cancel').label(this._cancelLabel ?? t('filament-actions::modal.actions.cancel.label')).color('gray').alpineClickHandler('close()');
+            return schema.components([Action.stepsRenderer(steps, submit, cancel)]);
+        };
+        return this;
+    }
+    isWizard() { return this._steps !== null; }
+    /** Runs the action without its modal (e.g. no confirmation for some records). */
+    modalHidden(condition = true) { this._modalHidden = condition; return this; }
+    async isModalHidden(ctx) { return Boolean(await evaluate(this._modalHidden, ctx)); }
+    /** Runs when the action is mounted, after the form is filled: `ctx.data` is the form state, which you may change. */
+    mountUsing(callback) { this._mountUsing = callback; return this; }
+    async runMountUsing(ctx) { await this._mountUsing?.(ctx); }
     /** Initial form state (e.g. from the record). */
     fillForm(resolver) { this._fillForm = resolver; return this; }
     /** Modal width (`xs` … `7xl`). Defaults to `md` for a confirmation and `4xl` for a form. */
@@ -182,9 +239,68 @@ export class Action {
     before(fn) { this._before = fn; return this; }
     /** Runs after the handler succeeds (logging, extra notification…). */
     after(fn) { this._after = fn; return this; }
+    // --- bulk actions
+    _individualAuthorization = null;
+    _chunkSize = 100;
+    _deselectAfterCompletion = false;
+    _successNotificationTitle = null;
+    _failureNotificationTitle = null;
+    _missingAuthorizationMessage = null;
+    _missingProcessingMessage = null;
+    /**
+     * Bulk action: each selected record must pass this policy ability (or function), otherwise it is skipped and counted in the
+     * failure notification. Used by `processSelectedRecords()` of the table's page.
+     */
+    authorizeIndividualRecords(ability) { this._individualAuthorization = ability; return this; }
+    getIndividualRecordsAuthorization() { return this._individualAuthorization; }
+    /** Number of selected records loaded at a time by `processSelectedRecords()` (100 by default). */
+    chunkSelectedRecords(size) { this._chunkSize = Math.max(1, Math.floor(size)); return this; }
+    getSelectedRecordsChunkSize() { return this._chunkSize; }
+    /** Clears the table selection once the bulk action has run. */
+    deselectRecordsAfterCompletion(condition = true) { this._deselectAfterCompletion = condition; return this; }
+    shouldDeselectRecordsAfterCompletion() { return this._deselectAfterCompletion; }
+    /** Notification sent when every selected record was processed. */
+    successNotificationTitle(title) { this._successNotificationTitle = title; return this; }
+    getSuccessNotificationTitle() { return this._successNotificationTitle; }
+    /** Notification title when some records failed: receives the number of processed records and the number selected. */
+    failureNotificationTitle(title) { this._failureNotificationTitle = title; return this; }
+    getFailureNotificationTitle(success, total) { const title = this._failureNotificationTitle; return typeof title === 'function' ? title(success, total) : title; }
+    /** Body line for records skipped by `authorizeIndividualRecords()`: receives their number and the number selected. */
+    missingBulkAuthorizationFailureNotificationMessage(message) { this._missingAuthorizationMessage = message; return this; }
+    getMissingBulkAuthorizationFailureNotificationMessage(count, total) { const message = this._missingAuthorizationMessage; return typeof message === 'function' ? message(count, total) : message; }
+    /** Body line for records whose processing failed: receives their number and the number selected. */
+    missingBulkProcessingFailureNotificationMessage(message) { this._missingProcessingMessage = message; return this; }
+    getMissingBulkProcessingFailureNotificationMessage(count, total) { const message = this._missingProcessingMessage; return typeof message === 'function' ? message(count, total) : message; }
+    // --- outcome of single actions
+    _successNotification = null;
+    _successRedirectUrl = null;
+    _preserveData = null;
+    /**
+     * Customizes the success notification of a prebuilt action: the function receives the notification and returns it (changed)
+     * or `null` to send nothing.
+     */
+    successNotification(customize) { this._successNotification = customize; return this; }
+    getSuccessNotificationCustomizer() { return this._successNotification; }
+    /** Where a prebuilt action redirects after success: a URL, or a function of the context (record, replica...). */
+    successRedirectUrl(url) { this._successRedirectUrl = url; return this; }
+    async getSuccessRedirectUrl(ctx) { return typeof this._successRedirectUrl === 'function' ? this._successRedirectUrl(ctx) : this._successRedirectUrl; }
+    /** "Create & create another": fields kept in the new form (names, or a function returning the data to keep). */
+    preserveFormDataWhenCreatingAnother(fields) { this._preserveData = fields; return this; }
+    getDataPreservedForAnother(data) {
+        if (!this._preserveData)
+            return {};
+        if (typeof this._preserveData === 'function')
+            return this._preserveData(data) ?? {};
+        return Object.fromEntries(this._preserveData.filter((field) => Object.hasOwn(data, field)).map((field) => [field, data[field]]));
+    }
+    /** Stops the action from one of its hooks; the modal stays open. */
+    halt() { throw new ActionHalt(false); }
+    /** Stops the action from one of its hooks and closes the modal. */
+    cancel() { throw new ActionHalt(true); }
     async call(ctx) {
         if (!this._handler)
             return null;
+        ctx = { ...ctx, action: this };
         if (this._mutateData)
             ctx = { ...ctx, data: await this._mutateData(ctx.data ?? {}, ctx) };
         await this._before?.(ctx);
@@ -241,6 +357,9 @@ export class Action {
     async toLinkHtml(ctx, context, wireKey) {
         if (!colorManager)
             throw new Error('No color manager: call useColorManager() first.');
+        // `button()`, `badge()`, `outlined()` or `labeledFrom()` in a table row: rendered like a header action.
+        if (this._view === 'button' || this._view === 'badge' || this._outlined || this._labeledFrom)
+            return this.toHtml(ctx, context);
         const color = this._lazyColor ? await this._lazyColor(ctx) : this._color;
         const iconName = this._lazyIcon ? await this._lazyIcon(ctx) : (this._tableIcon ?? this._icon);
         const raw = `mountAction(${js(this.name)}, {}, ${js(context)})`;
@@ -262,7 +381,7 @@ export class Action {
         return `<button ${keys}${tooltip}type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${classes}" wire:click="${e(raw)}" wire:key="${e(wireKey)}">${iconHtml}${loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': raw }), 'sm')}<span class="fi-link-label">${e(label)}</span></button>`;
     }
     /** Modal of a mounted action; `content` is the rendered form, if any. */
-    async toModalHtml(ctx, index, content = null) {
+    async toModalHtml(ctx, index, content = null, mountContext = {}) {
         if (!colorManager)
             throw new Error('No color manager: call useColorManager() first.');
         const schemaCtx = { livewire: ctx.livewire, component: null, operation: null, record: ctx.record, get: () => undefined, state: undefined };
@@ -280,15 +399,21 @@ export class Action {
             + hook(ActionsRenderHook.MODAL_CUSTOM_CONTENT_FOOTER_BEFORE) + hook(ActionsRenderHook.MODAL_CUSTOM_CONTENT_FOOTER_AFTER);
         if (content !== null || hooked !== '')
             content = hooked;
+        // Footer actions with a handler are mounted on top of this one, with its context.
+        const footerActions = await Promise.all(this._extraModalFooterActions.map((a) => (a.isMountable() ? a.toHtml(schemaCtx, { ...mountContext, parentAction: index }) : a.toHtml(schemaCtx))));
         return views.render('filament-actions::modal', {
-            slideOver: this._slideOver, content, confirmation, width, alignment: confirmation || ['xs', 'sm'].includes(width) ? 'center' : 'start',
+            // A wizard has its own buttons (back, next, submit): the modal has no footer.
+            hasFooter: !this.isWizard(),
+            closeByClickingAway: this._closeByClickingAway, closeByEscaping: this._closeByEscaping, closeButton: this._closeButton, stickyHeader: this._stickyHeader, stickyFooter: this._stickyFooter,
+            footerAlignment: this._footerAlignment ?? (confirmation ? 'center' : 'start'),
+            slideOver: this._slideOver, content, confirmation, width, alignment: this._modalAlignment ?? (confirmation || ['xs', 'sm'].includes(width) ? 'center' : 'start'),
             livewireId: ctx.livewire.id, id: `fi-${ctx.livewire.id}-action-${index}`, index, name: this.name,
             heading: (await evaluate(this._modalHeading, ctx)) ?? label,
             description: (await evaluate(this._modalDescription, ctx)) ?? (this._requiresConfirmation ? t('filament-actions::modal.confirmation') : null),
             iconName: this._modalIcon ?? (this._requiresConfirmation ? 'o-exclamation-triangle' : null), color,
             cancel: await Action.make('cancel').label(this._cancelLabel ?? t('filament-actions::modal.actions.cancel.label')).color('gray').alpineClickHandler('close()').toHtml(schemaCtx),
             // The submit button of a gray action uses the primary color.
-            submit: !this._hasSubmit ? '' : (await Action.make('submit').label(submitLabel).color(color === 'gray' ? 'primary' : color).submit('callMountedAction').toHtml(schemaCtx)) + (await Promise.all(this._extraModalFooterActions.map((a) => a.toHtml(schemaCtx)))).join(''),
+            submit: !this._hasSubmit ? '' : (await Action.make('submit').label(submitLabel).color(color === 'gray' ? 'primary' : color).submit('callMountedAction').toHtml(schemaCtx)) + footerActions.join(''),
         });
     }
     alpineClickHandler(handler) { this._alpineClick = handler; return this; }
@@ -308,11 +433,72 @@ export class Action {
     /** Shown but unusable; the server also refuses to mount it. */
     disabled(condition = true) { this._disabled = condition; return this; }
     async isDisabled(ctx) { return evaluate(this._disabled, ctx); }
+    _view = null;
+    _labeledFrom = null;
+    _outlined = false;
+    /** Trigger style, instead of the one chosen by the location of the action. */
+    button() { this._view = 'button'; return this; }
+    link() { this._view = 'link'; return this; }
+    /** Icon only: the label becomes the tooltip and accessible name. */
+    iconButton(condition = true) { this._iconButton = condition; this._view = condition ? 'icon-button' : null; return this; }
+    badge(badge) {
+        // `badge()` without argument: badge trigger style; with a value: a counter on the button.
+        if (arguments.length === 0) {
+            this._view = 'badge';
+            return this;
+        }
+        this._badge = badge ?? null;
+        return this;
+    }
+    /** Icon button on small screens, labeled button from this breakpoint up (`sm`, `md`, `lg`, `xl`, `2xl`). */
+    labeledFrom(breakpoint) { this._labeledFrom = breakpoint !== null && ['sm', 'md', 'lg', 'xl', '2xl'].includes(breakpoint) ? breakpoint : null; return this; }
+    /** Outlined button. */
+    outlined(condition = true) { this._outlined = condition; return this; }
+    getView() { return this._view; }
+    /** Markup of a link, icon button or badge trigger; `attributes` carries the click (or href) behavior. */
+    async styledTriggerHtml(ctx, view, attributes, tag, wireTarget) {
+        const label = (await evaluate(this._label, ctx)) ?? this.getDefaultLabel();
+        const iconName = this._lazyIcon ? await this._lazyIcon(ctx) : this._icon;
+        const color = this._lazyColor ? await this._lazyColor(ctx) : this._color;
+        const colors = (component) => (color !== 'gray' ? colorManager.getComponentClasses(component, color) : []);
+        const loader = tag === 'button' && wireTarget ? loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': wireTarget })) : '';
+        const glyph = iconName ? icon(iconName, { attributes: tag === 'button' && wireTarget ? new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': wireTarget }) : undefined }) : '';
+        const tooltip = await this.tooltipAttribute(ctx);
+        if (view === 'icon-button')
+            return `<${tag} title="${e(label)}" aria-label="${e(label)}" ${tooltip}${attributes} class="${cls(['fi-ac-icon-btn-action', 'fi-icon-btn', `fi-size-${this._size}`, ...colors('icon-button')])}">${glyph}${loader}</${tag}>`;
+        if (view === 'badge')
+            return `<${tag} ${tooltip}${attributes} class="${cls(['fi-ac-badge-action', 'fi-badge', `fi-size-${this._size}`, ...colors('badge')])}">${glyph}${loader}<span class="fi-badge-label-ctn"><span class="fi-badge-label">${e(label)}</span></span></${tag}>`;
+        return `<${tag} ${tooltip}${attributes} class="${cls(['fi-ac-link-action', 'fi-link', `fi-size-${this._size}`, ...colors('link')])}">${glyph}${loader}<span class="fi-link-label">${e(label)}</span></${tag}>`;
+    }
     /** Renders the action as a button (or as a link when it has a URL). */
     async toHtml(ctx, explicitMountContext = null) {
         if (!colorManager)
             throw new Error('No color manager: call useColorManager() first.');
         const linkUrl = this._lazyUrl ? this._lazyUrl(ctx) : this._url;
+        // Explicit trigger styles (link, icon button, badge), and the icon button / labeled button pair of `labeledFrom()`.
+        if (this._submit === null && (this._view === 'link' || this._view === 'icon-button' || this._view === 'badge' || this._labeledFrom)) {
+            const safeUrl = linkUrl !== null && /^(\/(?!\/)|https?:\/\/)/.test(linkUrl) ? linkUrl : null;
+            const mountContext = explicitMountContext ?? ctx.livewire?.getActionMountContext?.() ?? {};
+            const mountExpression = this._handler ? (Object.keys(mountContext).length ? `mountAction(${js(this.name)}, {}, ${js(mountContext)})` : `mountAction(${js(this.name)})`) : null;
+            const click = safeUrl ? `href="${e(safeUrl)}" ${this._newTab ? 'target="_blank" ' : 'wire:navigate '}` : `type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" ${this._alpineClick ? `x-on:click="${e(this._alpineClick)}" ` : ''}${(mountExpression ?? this._action) ? `wire:click="${e(mountExpression ?? this._action)}" ` : ''}`;
+            const tag = safeUrl ? 'a' : 'button';
+            const target = this._livewireTarget ?? mountExpression ?? this._action;
+            if (this._labeledFrom) {
+                const iconButton = (await this.styledTriggerHtml(ctx, 'icon-button', click.trim(), tag, target)).replace('class="fi-ac-icon-btn-action', `class="${this._labeledFrom}:fi-hidden fi-ac-icon-btn-action`);
+                const previousView = this._view, previousLabeled = this._labeledFrom;
+                this._view = null;
+                this._labeledFrom = null;
+                try {
+                    const labeled = (await this.toHtml(ctx, explicitMountContext)).replace(/class="([^"]*\bfi-btn\b[^"]*)"/, (_match, classes) => `class="${classes} fi-hidden ${previousLabeled}:fi-inline-grid"`);
+                    return iconButton + labeled;
+                }
+                finally {
+                    this._view = previousView;
+                    this._labeledFrom = previousLabeled;
+                }
+            }
+            return this.styledTriggerHtml(ctx, this._view, click.trim(), tag, target);
+        }
         if (linkUrl !== null && /^(\/(?!\/)|https?:\/\/)/.test(linkUrl)) {
             const link = new Attributes().class(['fi-ac-btn-action', 'fi-btn', `fi-size-${this._size}`, ...(this._color !== 'gray' ? colorManager.getComponentClasses('button', this._color) : [])]);
             const linkIcon = this._icon ? icon(this._icon) : '';
@@ -333,7 +519,7 @@ export class Action {
             'wire:target': this._livewireTarget ?? this._submit,
             'x-bind:disabled': isSubmit ? 'isProcessing' : null,
         })
-            .class(['fi-ac-btn-action', 'fi-btn', `fi-size-${this._size}`, ...colorManager.getComponentClasses('button', this._color)])
+            .class(['fi-ac-btn-action', 'fi-btn', `fi-size-${this._size}`, ...(this._outlined ? ['fi-outlined', ...colorManager.getComponentClasses('button-outlined', this._color)] : colorManager.getComponentClasses('button', this._color))])
             .when(this._action, (a) => a.set('wire:click', this._action))
             .when(mountExpression, (a) => a.set('wire:click', mountExpression))
             .when(this._alpineClick, (a) => a.set('x-on:click', this._alpineClick));
@@ -349,22 +535,118 @@ export class Action {
     }
 }
 /** Group of actions collapsed into a dropdown behind a "⋮" icon button. */
+/**
+ * Actions in a dropdown menu ("⋮" icon button by default). A nested group with `dropdown(false)` is shown as a section of
+ * the menu, separated by a divider. `buttonGroup()` shows the actions side by side instead.
+ */
 export class ActionGroup {
     actions;
+    _label = null;
+    _icon = 'm-ellipsis-vertical';
+    _color = 'primary';
+    _size = 'md';
+    _tooltip = null;
+    _view = 'icon-button';
+    _dropdown = true;
+    _buttonGroup = false;
+    _placement = null;
+    _width = null;
+    _offset = null;
+    _maxHeight = null;
+    _hidden = false;
     constructor(actions) { this.actions = actions; }
     static make(actions) { return configured(new ActionGroup(actions)); }
-    getActions() { return this.actions; }
-    /** `keyOf` returns each action's `wire:key` (it depends on the record). */
-    async toHtml(ctx, context, keyOf) {
-        if (!colorManager)
-            throw new Error('No color manager: call useColorManager() first.');
-        const items = [];
+    /** Every action of the group, nested groups included. */
+    getActions() { return this.actions.flatMap((action) => (action instanceof ActionGroup ? action.getActions() : [action])); }
+    getName() { return 'group'; }
+    /** A group is never mounted: its actions are. */
+    isMountable() { return false; }
+    label(label) { this._label = label; return this; }
+    icon(icon) { this._icon = icon; return this; }
+    color(color) { this._color = color; return this; }
+    size(size) { this._size = size; return this; }
+    tooltip(tooltip) { this._tooltip = tooltip; return this; }
+    /** Labeled button trigger. */
+    button() { this._view = 'button'; return this; }
+    link() { this._view = 'link'; return this; }
+    iconButton() { this._view = 'icon-button'; return this; }
+    /** `false`: inside another group, the actions form a section of its menu (with a divider). */
+    dropdown(condition = true) { this._dropdown = condition; return this; }
+    hasDropdown() { return this._dropdown; }
+    /** The actions side by side, as a group of buttons. */
+    buttonGroup(condition = true) { this._buttonGroup = condition; return this; }
+    /** Menu placement: `bottom-start`, `bottom-end`, `top-start`... (`bottom-end` in tables). */
+    dropdownPlacement(placement) { this._placement = placement !== null && /^(top|bottom|left|right)(-(start|end))?$/.test(placement) ? placement : null; return this; }
+    /** Menu width: `xs` to `7xl`. */
+    dropdownWidth(width) { this._width = width !== null && /^(xs|sm|md|lg|xl|[2-7]xl)$/.test(width) ? width : null; return this; }
+    /** Distance between the trigger and the menu, in pixels (8 by default). */
+    dropdownOffset(offset) { this._offset = offset !== null && Number.isFinite(offset) ? Math.max(0, Math.round(offset)) : null; return this; }
+    /** Maximum height of the menu, as a CSS length; it scrolls beyond. */
+    maxHeight(height) { this._maxHeight = height !== null && /^[0-9.]+(px|rem|em|vh|%)$/.test(height) ? height : null; return this; }
+    hidden(condition = true) { this._hidden = condition; return this; }
+    visible(condition = true) { return this.hidden(typeof condition === 'function' ? async (ctx) => !(await condition(ctx)) : !condition); }
+    async isVisible(ctx) {
+        if (await evaluate(this._hidden, ctx))
+            return false;
         for (const action of this.actions)
             if (await action.isVisible(ctx))
-                items.push(await action.toRecordGroupedHtml(ctx, context, keyOf(action)));
-        if (!items.length)
+                return true;
+        return false;
+    }
+    triggerHtml() {
+        if (!colorManager)
+            throw new Error('No color manager: call useColorManager() first.');
+        const label = this._label ?? t('filament-actions::group.trigger.label');
+        const tooltip = this._tooltip ? ` x-tooltip="${e(`{ content: ${js(this._tooltip)}, theme: $store.theme, allowHTML: false }`)}"` : '';
+        const colors = (component) => (this._color !== 'gray' || component === 'icon-button' ? colorManager.getComponentClasses(component, this._color) : []);
+        if (this._view === 'button')
+            return `<button${tooltip} type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${cls(['fi-ac-btn-group', 'fi-btn', `fi-size-${this._size}`, ...colors('button')])}">${icon(this._icon)}${e(label)}</button>`;
+        if (this._view === 'link')
+            return `<button${tooltip} type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${cls(['fi-ac-link-group', 'fi-link', `fi-size-${this._size}`, ...colors('link')])}">${icon(this._icon)}<span class="fi-link-label">${e(label)}</span></button>`;
+        return `<button title="${e(label)}" aria-label="${e(label)}"${tooltip} type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${['fi-ac-icon-btn-group', 'fi-icon-btn', `fi-size-${this._size}`, ...colors('icon-button')].join(' ')}">${icon(this._icon)}</button>`;
+    }
+    /** Menu items of the visible actions, one list per section (nested groups without dropdown). */
+    async itemLists(ctx, context, keyOf) {
+        const lists = [];
+        let current = [];
+        for (const action of this.actions) {
+            if (action instanceof ActionGroup && !action.hasDropdown()) {
+                if (!(await action.isVisible(ctx)))
+                    continue;
+                if (current.length) {
+                    lists.push(current);
+                    current = [];
+                }
+                lists.push(...(await action.itemLists(ctx, context, keyOf)));
+                continue;
+            }
+            if (!(await action.isVisible(ctx)))
+                continue;
+            current.push(action instanceof ActionGroup ? await action.toHtml(ctx, context, keyOf) : await action.toRecordGroupedHtml(ctx, context, keyOf(action)));
+        }
+        if (current.length)
+            lists.push(current);
+        return lists.filter((list) => list.length);
+    }
+    /** `keyOf` returns each action's `wire:key` (it depends on the record in a table). */
+    async toHtml(ctx, explicitContext = null, keyOf = (action) => `actions.${action.getName()}`) {
+        if (!colorManager)
+            throw new Error('No color manager: call useColorManager() first.');
+        if (await evaluate(this._hidden, ctx))
+            return '';
+        const context = explicitContext ?? ctx.livewire?.getActionMountContext?.() ?? {};
+        if (this._buttonGroup) {
+            const buttons = [];
+            for (const action of this.getActions())
+                if (await action.isVisible(ctx))
+                    buttons.push(await action.toHtml(ctx, explicitContext));
+            return buttons.length ? `<div class="fi-btn-group">${buttons.join('')}</div>` : '';
+        }
+        const lists = await this.itemLists(ctx, context, keyOf);
+        if (!lists.length)
             return '';
-        const label = e(t('filament-actions::group.trigger.label'));
-        return `<div x-data="filamentDropdown" class="fi-dropdown"><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger"><button title="${label}" aria-label="${label}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${['fi-ac-icon-btn-group', 'fi-icon-btn', 'fi-size-md', ...colorManager.getComponentClasses('icon-button', 'primary')].join(' ')}">${icon('m-ellipsis-vertical')}</button></div><div x-cloak x-float.placement.bottom-end.flip.teleport.offset="{ offset: 8 }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel"><div class="fi-dropdown-list" role="group">${items.join(' ')}</div></div></div>`;
+        const panelClasses = cls(['fi-dropdown-panel', this._width ? `fi-width-${this._width}` : null, { 'fi-scrollable': this._maxHeight !== null }]);
+        const style = this._maxHeight ? ` style="max-height: ${this._maxHeight}"` : '';
+        return `<div x-data="filamentDropdown" class="fi-dropdown"><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger">${this.triggerHtml()}</div><div x-cloak x-float.placement.${this._placement ?? 'bottom-end'}.flip.teleport.offset="{ offset: ${this._offset ?? 8} }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="${panelClasses}"${style}>${lists.map((items) => `<div class="fi-dropdown-list" role="group">${items.join(' ')}</div>`).join('')}</div></div>`;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/actions",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Actions and modals for Navette admin panels.",
   "license": "MIT",
   "type": "module",
@@ -38,8 +38,8 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/support": "1.0.0-beta.3",
-    "@navette-js/schemas": "1.0.0-beta.3"
+    "@navette-js/support": "1.0.0-beta.4",
+    "@navette-js/schemas": "1.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public",

package/views/modal.ejs

@@ -1,20 +1,21 @@
 <%# Modal of a mounted action (confirmation or form). Closing it unmounts the action. %>
+<% const trapOnWindow = locals.slideOver || stickyHeader || stickyFooter; const close = '$dispatch(' + js('close-modal') + ', { id: ' + js(id) + ' })'; %>
 <div wire:partial="action-modals.<%- index %>"<% if (description) { %> aria-describedby="<%= id %>.description"<% } %> aria-labelledby="<%= id %>.heading" aria-modal="true" id="<%= id %>" role="<%- confirmation ? 'alertdialog' : 'dialog' %>" tabindex="-1" x-data="filamentModal({
                 id: <%- js(id) %>,
                 isScrollLocked: true,
                 shouldRestoreFocus: false,
             })" data-fi-modal-id="<%= id %>" x-on:close-modal.window="if (($event.detail.id === <%- js(id) %>) && isOpen) close()" x-on:close-modal-quietly.window="if (($event.detail.id === <%- js(id) %>) && isOpen) closeQuietly()" x-on:open-modal.window="if (($event.detail.id === <%- js(id) %>) && (! isOpen)) open()" x-bind:class="{
         'fi-modal-open': isOpen,
-    }" x-cloak x-show="isOpen" class="<%- locals.slideOver ? 'fi-modal fi-modal-slide-over fi-absolute-positioning-context' : 'fi-modal fi-absolute-positioning-context' %>" wire:key="<%= livewireId %>.actions.<%= name %>.modal" x-on:modal-closed="if ($event.detail.id === <%= js(id) %>) $wire.unmountAction(false)">
+    }" x-cloak x-show="isOpen" class="<%- cls(['fi-modal', locals.slideOver ? 'fi-modal-slide-over' : null, 'fi-absolute-positioning-context', { 'fi-modal-has-sticky-header': stickyHeader, 'fi-modal-has-sticky-footer': stickyFooter }]) %>" wire:key="<%= livewireId %>.actions.<%= name %>.modal" x-on:modal-closed="if ($event.detail.id === <%= js(id) %>) $wire.unmountAction(false)">
     <div aria-hidden="true" x-show="isOpen" x-transition.duration.300ms.opacity class="fi-modal-close-overlay"></div>
 
-    <div tabindex="-1" x-on:click.self="$dispatch(<%= js('close-modal') %>, { id: <%= js(id) %> })" x-trap.noreturn="isTrapActive" class="fi-modal-window-ctn fi-clickable">
-        <form x-on:keydown.window.escape="if (isTopmost()) $dispatch(<%= js('close-modal') %>, { id: <%= js(id) %> })" x-show="isWindowVisible" x-transition:enter="fi-transition-enter" x-transition:leave="fi-transition-leave" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" wire:submit.prevent="callMountedAction" wire:key="<%= livewireId %>.modal.<%= id %>.window" class="<%- cls(['fi-modal-window', 'fi-modal-window-has-close-btn', { 'fi-modal-window-has-content': content !== null }, 'fi-modal-window-has-footer', { 'fi-modal-window-has-icon': iconName }, 'fi-align-' + alignment, 'fi-width-' + width]) %>">
+    <div<% if (!trapOnWindow) { %> tabindex="-1"<% } %><% if (closeByClickingAway) { %> x-on:click.self="<%= close %>"<% } %><% if (!trapOnWindow) { %> x-trap.noreturn="isTrapActive"<% } %> class="<%- cls(['fi-modal-window-ctn', { 'fi-clickable': closeByClickingAway }]) %>">
+        <form<% if (closeByEscaping) { %> x-on:keydown.window.escape="if (isTopmost()) <%= close %>"<% } %><% if (trapOnWindow) { %> x-trap.noreturn="isTrapActive" tabindex="0"<% } %> x-show="isWindowVisible" x-transition:enter="fi-transition-enter" x-transition:leave="fi-transition-leave" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" wire:submit.prevent="callMountedAction" wire:key="<%= livewireId %>.modal.<%= id %>.window" class="<%- cls(['fi-modal-window', { 'fi-modal-window-has-close-btn': closeButton }, { 'fi-modal-window-has-content': content !== null }, { 'fi-modal-window-has-footer': locals.hasFooter !== false }, { 'fi-modal-window-has-icon': iconName }, 'fi-align-' + alignment, 'fi-width-' + width]) %>">
             <div wire:key="<%= livewireId %>.modal.<%= id %>.header" class="fi-modal-header">
-                <%- view('filament::components.icon-button', {
+                <% if (closeButton) { %><%- view('filament::components.icon-button', {
                     iconName: 'o-x-mark', iconSize: 'lg', label: t('filament::components/modal.actions.close.label'), className: 'fi-modal-close-btn',
-                    extra: attrs({ tabindex: '-1' }), after: attrs({ 'x-on:click': "$dispatch('close-modal', { id: " + js(id) + ' })' }),
-                }) %>
+                    extra: attrs({ tabindex: closeByEscaping ? '-1' : null }), after: attrs({ 'x-on:click': "$dispatch('close-modal', { id: " + js(id) + ' })' }),
+                }) %><% } %>
 
                 <% if (iconName) { %>
                     <div class="fi-modal-icon-ctn">
@@ -44,12 +45,14 @@
                 </div>
             <% } %>
 
-            <div wire:key="<%= livewireId %>.modal.<%= id %>.footer" class="fi-modal-footer fi-align-<%- confirmation ? 'center' : 'start' %>">
+            <% if (locals.hasFooter !== false) { %>
+            <div wire:key="<%= livewireId %>.modal.<%= id %>.footer" class="fi-modal-footer fi-align-<%- footerAlignment %>">
                 <div class="fi-modal-footer-actions">
                     <%# Confirmation: cancel then confirm; form: submit then cancel. %>
                     <%- confirmation ? cancel + submit : submit + cancel %>
                 </div>
             </div>
+            <% } %>
         </form>
     </div>
 </div>