Skip to content

frontend-assets.md

Latest commit

 

History

History
94 lines (61 loc) · 3.01 KB

frontend-assets.md

File metadata and controls

94 lines (61 loc) · 3.01 KB
Raw

Frontend Assets

AxFormBundle includes a standalone npm package located in src/Resources/assets.

Package Information

  • Name: @fire1/ax-form
  • Logic: Vanilla JavaScript (jQuery-dependent)
  • UI: Vue 3 Components & SCSS

Components

AxForm (JS Class)

The main engine that handles modal opening, AJAX loading, and plugin management.

import { AxForm } from '@fire1/ax-form';

// Manual trigger
const ax = new AxForm('#my-button');

Vue 3 Components

The bundle provides the following Vue components for easy integration:

  • AxForm.vue: Trigger link for standard forms.
  • AxEdit.vue: Trigger link for edit forms (auto-compiles JSON data).
  • AxPage.vue: Trigger link for full-page forms.
  • AxLink.vue: Generic AJAX link.

Example Usage:

import AxForm from '@fire1/ax-form/components/ax-form.vue';

// Register globally or locally
app.component('ax-form', AxForm);
<template>
    <ax-form :path="path('item_new')" plugin="ax-submit">
        Add Item
    </ax-form>
</template>

Styling

Import the SCSS file to get the standard modal styles:

@import "~@fire1/ax-form/ax-form.scss";

Multi-step modals (#ajaxSubmitSteps)

When the server renders setAxNextSubmit(n) on a form, the modal footer includes a Next link instead of Submit:

Element Id (either works) Attribute
Next button ax-form-ajax-submit (bundle Twig) or ajax-form-ajax-submit (custom Twig override) data-clicks="{{ n }}"

After the form HTML is loaded, AxForm.#emitFormReadyEvent() calls #ajaxSubmitSteps():

  1. Binds a delegated click on the Next button (click.axformSteps).
  2. POSTs the current <form> to its action URL with serialize().
  3. Replaces #ax-form-content with the response HTML.
  4. Calls #emitFormReadyEvent() again (re-focus, plugins, step binding).

On the last step the server should not emit the Next button—only Submit—so #ajaxSubmitSteps exits early ($next.length === 0).

Console debugging

All console.log / console.info / console.error calls in ax-form.js and ax-plugs.js are prefixed with [AxForm]. Filter the browser console with [AxForm] when debugging wizards.

Useful messages:

  • [AxForm] Found steps form ... — Next button detected; step POST handler registered.
  • [AxForm] Next step clicked... — User clicked Next (click, data-clicks).
  • [AxForm] emit ready form event — Form HTML loaded; forms-ready / form-ready fired.

Rebuild or republish frontend assets after JS changes (your application’s asset pipeline or the @fire1/ax-form npm package).

See ax-steps-service.md for the full PHP + JS contract.

Plugins

You can activate specialized behavior via the data-ax-plugin attribute (comma-separated):

  • ax-submit: Handles async form submission with file upload support.
  • validation: Performs a "pre-submit" to the server to check for validation errors before final submission.