[6.x] Inertia section edit

[brianjhanson]

The main focus here is porting the sections edit page over to Inertia but maybe the real code was all the things we had to change along the way.

Editable Tables

The biggest of those is figuring out how to manage editable tables. In the end, I ended up creating our own version of TanStack Table's columnHelper which will eventually have dedicated methods for each of the input types the current editableTable.twig supports. At the moment we only have the ones that were needed for this port (text, lightswitch and checkbox).

Vue Wrappers

Another fairly large shift in this PR is that we've added a script that will generate Vue components from the lit web components. I wanted to avoid this, but annoyingly Vue and Lion don't agree on some prop values. The Vue wrappers smooth this out so you can just v-model the inputs as you would expect. These components are only to handle the v-model binding which is why we still have a Select component in the main resources/js/components folder. The Select component takes in an options prop and handles normalizing those before rendering the appropriate markup.

Not ideal, but at least these layers keep things flexible.

It may end up that using Lion's form components isn't really worth it if we're living in a purely Vue world but for now, I still like the flexibility it allows us. That way if we have some views that we can't fully convert to Vue for some reason, we can ensure some visual consistency by using the @craftcms/cp components.

Copilot's summary

Including this because it did a pretty good job of summing things up.

Component Enhancements and Features:

• craft-action-item now supports checkable items with new checked, active, and type properties, updated rendering logic, and corresponding style adjustments to allow for checkbox-like menu items. [1] [2] [3] [4]
• craft-chip gains an icon property for easy prefix icon rendering, improved slot handling, and minor style adjustments for layout consistency. [1] [2] [3] [4] [5]
• craft-button introduces a new dashed appearance, with corresponding styles and property updates for more visual variety. [1] [2]
• craft-input and craft-select components now support additional sizing and alignment options, including small, medium, and large sizes, a center property, and a corrected use of maxlength instead of size for input length. [1] [2] [3] [4]
• craft-switch-button and craft-switch have updated sizing logic for better consistency across controls, and a new Storybook story is added for craft-switch with various usage examples. [1] [2] [3]

Build Process and Exports:

• The build process now includes a step to generate Vue wrappers, with a new script and npm command (generate:vue-wrappers), and updates to package.json exports to better support consumption from different environments and frameworks. [1] [2] [3] [4] [5]

Storybook and Documentation:

• New stories and improved story rendering for craft-action-item and craft-switch components, demonstrating new features and usage patterns. [1] [2] [3]

[Copilot]

Pull request overview

This PR migrates the Settings → Sections index/create/edit flows to Inertia pages, modernizes shared table/UI infrastructure, and aligns frontend imports with the packaged @craftcms/cp dist/type entrypoints.

Changes:

• Convert Sections settings pages to Inertia (SettingsSectionsIndexPage, SettingsSectionsEditPage) and update controller/tests accordingly.
• Enhance CpScreenResponse to support rendering Inertia screens, and expand AdminTable for pagination/sorting/metadata.
• Add shared Vue composables/components (editable table, reorderable rows, input generator) and update CP package exports + generated Vue wrapper tooling.

Reviewed changes

Copilot reviewed 81 out of 85 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
tests/Feature/Integration/PagesTest.php	Moves Sections page coverage to a dedicated Inertia page assertion.
tests/Feature/Http/Controllers/Settings/SectionsControllerTest.php	Updates expectations for Inertia + adds sorting and delete assertions.
src/Section/Sections.php	Clears query ordering before applying table sorting.
src/Http/Responses/CpScreenResponse.php	Adds inertiaPage() and Inertia rendering path in toResponse().
src/Http/Controllers/Settings/SectionsController.php	Implements Inertia-based Sections index/create/edit; adjusts flash responses.
resources/js/pages/SettingsSectionsIndexPage.vue	New Inertia index page using TanStack table + server-side sorting/pagination.
resources/js/pages/SettingsSectionsEditPage.vue	New Inertia edit page with form + per-site settings and preview targets.
resources/js/components/AdminTable/AdminTable.vue	Adds pagination footer, sorting UI, meta-driven classes/tags, and search slot.
resources/js/composables/useEditableTable.ts	New helper for inline-editable TanStack tables.
resources/js/components/ActionMenu.vue	New action menu wrapper for craft-action-menu/craft-action-item.
resources/js/components/sites/SiteFields.vue	Switches to useInputGenerator for handle/baseUrl generation.
packages/craftcms-cp/src/components/input/*	Updates craft-input sizing/attrs handling.
packages/craftcms-cp/scripts/* + package.json	Adds Vue wrapper generation script + export map changes.

Comments suppressed due to low confidence (1)

packages/craftcms-cp/src/components/input/input.ts:25

• craft-input’s size attribute appears to have been repurposed from an HTML-style character width (used throughout the app as size="3", size="7", etc.) to a 'small' | 'medium' | 'large' enum. This is likely a breaking change: existing templates that pass numeric size will no longer size the underlying <input> as intended. Consider keeping a numeric size API (and using a different prop name for visual sizing, e.g. uiSize/variant), or updating all call sites and docs consistently.

  @property({type: Number, reflect: true}) maxlength?: string;
  @property({type: String, reflect: true}) size?: 'small' | 'medium' | 'large' =
    'medium';
  @property({reflect: true, type: Boolean}) small = false;
  @property({reflect: true, type: Boolean}) center = false;

  override connectedCallback() {
    super.connectedCallback();

    if (this._inputNode && this.maxlength) {
      const sizeInt = parseInt(this.maxlength, 10);
      if (sizeInt > 0) {
        this._inputNode.size = sizeInt;
      }
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[brianjhanson]

@riasvdv I made a CraftCms\Cms\Cp\CanSelect trait for enums that allows us to easily format them as value, label for selection on the frontend but if you have a better way to do that, or feel like that trait should live elsewhere I'm not attached to the name or location.

I also added a composer ci script so I can run all the things GitHub does locally more easily, but if you think that script name is bad (it may be) we can change it

[Copilot]

Pull request overview

Copilot reviewed 95 out of 98 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (10)

src/Cp/SelectOptions.php:1

• $suggestions items are built with label/value keys (not name), so sorting by 'name' is incorrect and may result in unsorted output or runtime issues depending on Arr::sort implementation. Sort by 'label' (or 'value') instead, or change the suggestion items to include a 'name' key consistently.
  src/Http/Responses/CpScreenResponse.php:1
• $this->crumbs can be null or a callable (per the crumbs() setter). In that case, $crumbs[] = ... will throw. Initialize $crumbs to an array (e.g., is_array($this->crumbs) ? $this->crumbs : []) before appending the title crumb.
  src/Entry/Validation/EntryTypeRules.php:1
• This replaces the prior allowlist that explicitly included '__blank__'. If the UI still submits '__blank__' to represent “no color”, Rule::enum(Color::class) will now reject it and cause validation failures. Either continue allowing '__blank__' in the rule, or normalize '__blank__' to null before validation.
  src/Section/Resources/SectionResource.php:1
• The null-coalescing operator won’t prevent a fatal error if $this->type is null because $this->type->value is evaluated first. If these fields can be unset (which the default for type suggests), use the nullsafe operator (?->value) (and/or defaults) to avoid dereferencing null.
  src/Section/Resources/SectionResource.php:1
• The null-coalescing operator won’t prevent a fatal error if $this->type is null because $this->type->value is evaluated first. If these fields can be unset (which the default for type suggests), use the nullsafe operator (?->value) (and/or defaults) to avoid dereferencing null.
  resources/js/composables/useEditableTable.ts:1
• A <textarea> does not support the type attribute, so inputType (email/url/number) won’t behave as intended and native browser validation/keyboards won’t apply. Either render an <input> element when inputType is not multiline, or drop type and set an appropriate inputmode/validation strategy for textarea.
  src/Http/RespondsWithFlash.php:1
• ->with($data) can overwrite the explicitly set 'error' key (and the success variant below can overwrite 'success') if $data contains those keys. To make the flash message deterministic, merge $data with the intended flash key in a single array (or ensure ordering can’t clobber it).
  yii2-adapter/legacy/web/twig/variables/Cp.php:1
• Fix typo in annotation: @dprecated → @deprecated.
  yii2-adapter/legacy/web/twig/variables/Cp.php:1
• Fix typo in docblock: shoudl → should.
  packages/craftcms-cp/scripts/generate-vue-wrappers.js:1
• The comment says checked-based components emit a checked-changed event, but the generated wrapper listens to model-value-changed. Either update the documentation to match the actual event used, or change the wrapper event listener so it matches the intended event contract.

/**

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.