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

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { type ColorManager, type Lazy } from '@navette-js/support';
+import { type HtmlString, type ColorManager, type Lazy } from '@navette-js/support';
 import type { ComponentContext, Renderable } from '@navette-js/schemas';
 /** Render hook slots of an action modal. Hooks receive the action as `data.action`. */
 export declare const ActionsRenderHook: {
@@ -51,6 +51,7 @@ export declare class Action implements Renderable {
     private _modalHeading;
     private _modalDescription;
     private _modalSubmitActionLabel;
+    private _lazySubmitLabel;
     private _modalIcon;
     private _icon;
     private _alpineClick;
@@ -77,6 +78,8 @@ export declare class Action implements Renderable {
     /** Navigation action, rendered as `<a href wire:navigate>`. */
     url(url: string | null | ((ctx: ComponentContext) => string | null)): this;
     /** A string: host component method called on click (`wire:click`). A function: the action handler, mounted through `mountAction()` (with its modal, if any). */
+    /** On click, dispatches a Livewire event (to a listener of the page or of another component), with parameters. */
+    dispatch(event: string, params?: unknown[] | Record<string, unknown>): this;
     action(action: string | ((ctx: ActionCallContext) => unknown | Promise<unknown>) | null): this;
     icon(name: string | null | ((ctx: ComponentContext) => string | null | Promise<string | null>)): this;
     /** Icon used when the action is a table row link. */
@@ -86,8 +89,10 @@ export declare class Action implements Renderable {
     groupedIcon(name: string | null): this;
     requiresConfirmation(condition?: boolean): this;
     modalHeading(heading: Lazy<string | null, ActionCallContext>): this;
-    modalDescription(description: Lazy<string | null, ActionCallContext>): this;
-    modalSubmitActionLabel(label: string | null): this;
+    /** Text under the heading; an `HtmlString` is inserted as is (build it from escaped values). */
+    modalDescription(description: Lazy<string | HtmlString | null, ActionCallContext>): this;
+    /** Label of the submit button; a function receives the action context (its arguments…). */
+    modalSubmitActionLabel(label: string | null | ((ctx: ActionCallContext) => string | null)): this;
     modalIcon(name: string | null): this;
     private _badge;
     private _badgeColor;
@@ -170,6 +175,9 @@ export declare class Action implements Renderable {
      * `steps` are `Step` components of `@navette-js/forms`.
      */
     steps(steps: any[] | null): this;
+    private _modifyWizard;
+    /** Changes the wizard built by `steps()` (`(wizard) => wizard.hiddenHeader()`). */
+    modifyWizardUsing(callback: ((wizard: any) => any) | null): this;
     isWizard(): boolean;
     /** Runs the action without its modal (e.g. no confirmation for some records). */
     modalHidden(condition?: Lazy<boolean, ActionCallContext>): this;

package/lib/index.js

@@ -40,6 +40,7 @@ export class Action {
     _modalHeading = null;
     _modalDescription = null;
     _modalSubmitActionLabel = null;
+    _lazySubmitLabel = null;
     _modalIcon = null;
     _icon = null;
     _alpineClick = null;
@@ -76,6 +77,8 @@ export class Action {
         this._lazyUrl = null;
     } return this; }
     /** A string: host component method called on click (`wire:click`). A function: the action handler, mounted through `mountAction()` (with its modal, if any). */
+    /** On click, dispatches a Livewire event (to a listener of the page or of another component), with parameters. */
+    dispatch(event, params = []) { return this.action(`$dispatch(${js(event)}${Array.isArray(params) ? params.map((param) => `, ${js(param)}`).join('') : `, ${js(params)}`})`); }
     action(action) {
         if (typeof action === 'function') {
             this._handler = action;
@@ -100,8 +103,17 @@ export class Action {
     groupedIcon(name) { this._groupedIcon = name; return this; }
     requiresConfirmation(condition = true) { this._requiresConfirmation = condition; return this; }
     modalHeading(heading) { this._modalHeading = heading; return this; }
+    /** Text under the heading; an `HtmlString` is inserted as is (build it from escaped values). */
     modalDescription(description) { this._modalDescription = description; return this; }
-    modalSubmitActionLabel(label) { this._modalSubmitActionLabel = label; return this; }
+    /** Label of the submit button; a function receives the action context (its arguments…). */
+    modalSubmitActionLabel(label) { if (typeof label === 'function') {
+        this._lazySubmitLabel = label;
+        this._modalSubmitActionLabel = null;
+    }
+    else {
+        this._modalSubmitActionLabel = label;
+        this._lazySubmitLabel = null;
+    } return this; }
     modalIcon(name) { this._modalIcon = name; return this; }
     _badge = null;
     _badgeColor = 'primary';
@@ -212,10 +224,14 @@ export class Action {
             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)]);
+            const wizard = Action.stepsRenderer(steps, submit, cancel);
+            return schema.components([this._modifyWizard?.(wizard) ?? wizard]);
         };
         return this;
     }
+    _modifyWizard = null;
+    /** Changes the wizard built by `steps()` (`(wizard) => wizard.hiddenHeader()`). */
+    modifyWizardUsing(callback) { this._modifyWizard = callback; 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; }
@@ -390,7 +406,7 @@ export class Action {
         const confirmation = this._requiresConfirmation;
         // A confirmation is centered (md); a form is start-aligned (4xl), except at small widths.
         const width = this._modalWidth ?? (confirmation ? 'md' : '4xl');
-        const submitLabel = this._modalSubmitActionLabel ?? t(confirmation ? 'filament-actions::modal.actions.confirm.label' : 'filament-actions::modal.actions.submit.label');
+        const submitLabel = this._lazySubmitLabel?.(ctx) ?? this._modalSubmitActionLabel ?? t(confirmation ? 'filament-actions::modal.actions.confirm.label' : 'filament-actions::modal.actions.submit.label');
         // Hook order: custom content, schema, content footer, each between its before/after slots.
         const scopes = ctx.livewire.getRenderHookScopes?.() ?? [];
         const hook = (name) => renderHook(name, scopes, { action: this });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/actions",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "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.4",
-    "@navette-js/schemas": "1.0.0-beta.4"
+    "@navette-js/support": "1.0.0-beta.5",
+    "@navette-js/schemas": "1.0.0-beta.5"
   },
   "publishConfig": {
     "access": "public",

package/views/modal.ejs

@@ -32,7 +32,7 @@
 
                     <% if (description) { %>
                         <p id="<%= id %>.description" class="fi-modal-description">
-                            <%= description %>
+                            <% if (description && typeof description === 'object' && typeof description.html === 'string') { %><%- description.html %><% } else { %><%= description %><% } %>
                         </p>
                     <% } %>
                 </div>